HTML+JSP的用户名后台验证

Advertisement

1.regist.html
注册的页面 包含Email账号和密码

<html>
  <head>
  <meta http-equiv=Content-Type content="text/html;charset=utf-8">
<title>regist</title></head>
<script type="text/javascript" src="myjs.js">

</script>

  <body>
<form action="#"  method="post">
<span  id="span_err"></span>
<hr  color="#CCCCCC"/>
<table align="center" >
<tr>
  <td>Email:</td><!-- Email-->
  <td><input type="text" id="email"  name="email"  onBlur="checkEmail()" />  </td>
  <td style="font-size:13px;width:220px;"><span id="span_email"></span><br/></td>
</tr>  

 <tr>
  <td>密码:</td> <!-- 密码 -->
  <td><input type="password" id="pwd" name="pwd"   onBlur="checkPwd()" />  </td>
  <td style="font-size:13px; width:220px;"><span id="span_pwd"></span><br/></td>
</tr> 

<tr>
  <td>确认密码:</td> <!-- 确认密码 -->
  <td><input type="password" id="confirmPwd"   name="confirmPwd" onBlur="valPwd()" />  </td>
  <td style="font-size:13px; width:220px;"><span id="span_confirmPwd"></span><br/></td>
</tr> 

 <tr>
 <td>
  <input type="button"  value="登陆" onClick="register()"/>   <!-- 注册 -->
  </td>
  <td>
  <input type="reset" value="重置" onClick="clickSpan()" />  <!-- 重置 -->
  </td>
  </tr>
  </table>
</form>
  </body>
</html>

2.myjs.js
JS文件 主要用于验证regist.html的数据合法性
在做这个JS的时候,function processResponse()
曾经遇到过HTTP500的错误,在网上找了很多的方法都没有解决,最后打开IE的选项
在高级里面把显示友好的HTTP错误信息的勾去掉,强制让代码执行后会有一个JSP报错信息弹出。此后重启tomcat服务器,HTTP500的错误不知为什么就消失。

另外就是在jsp确认的页面里面,由于缓存的原因,当你修改checkEmail.jsp页面里面
if("shark@126.com".equlas(email))
所需要修改的值的时候,保存再刷新regist.html 你输入前面的信息它依旧会报错(Email重复)。所以在请求jsp页面的时候加上了"+new Date()+",这样可以确保每次请求的页面所做的处理都不一样。


/*F5刷新事件 清空文本框*/
function DisableF5()
{
   with (event)
   {
           // F5 and Ctrl+R
     if (keyCode==116 || (ctrlKey && keyCode==82))
     {
       document.forms[0].email.value="";
       document.forms[0].pwd.value="";
       document.forms[0].confirmPwd.value="";
       return false;
     }
   }
}   

function clickSpan()
{
    var span_err=document.getElementById("span_err");
    var span_email=document.getElementById("span_email");
    var span_pwd=document.getElementById("span_pwd");
    var span_confirmPwd=document.getElementById("span_confirmPwd");

    span_email.innerHTML="";
    span_pwd.innerHTML="";
    span_confirmPwd.innerHTML="";
    span_err.innerHTML="";
}

document.onkeydown = DisableF5; 

var XMLHttpReq = false;
     //创建XMLHttpRequest对象
function createXMLHttpRequest()
{
        if(window.XMLHttpRequest)
        { //检测是否为Mozilla浏览器
            try
            {
              XMLHttpReq = new XMLHttpRequest();
             }
             catch(e)
             {
                 alert(e);
             }
        }
        else if (window.ActiveXObject)
        { //检测是否为IE浏览器
            try
            {
                XMLHttpReq = new ActiveXObject("Msxml2.XMLHTTP");
            }
            catch (e)
            {
                try
                {
                    XMLHttpReq = new ActiveXObject("Microsoft.XMLHTTP");
                }
                catch (e)
                {
                    alert(e);
                }
            }
       }
}
    //发送请求方法
    function sendRequest(url)
    {
        createXMLHttpRequest();
        XMLHttpReq.open("GET", url, true);
        XMLHttpReq.onreadystatechange = processResponse;//指定响应处理函数
        XMLHttpReq.send(null);  // 发送请求
    }
    // 处理返回信息函数
    function processResponse()
    {
        var span_err=document.getElementById("span_err");
        if (XMLHttpReq.readyState == 4)
        { // 判断XMLHttpRequest对象是否已成功接收数据
            if (XMLHttpReq.status == 200)
            { // 请求成功
                   checkUsernameCallback();     //调用处理函数
            }
            else
            { //页面异常
            //alert(XMLHttpReq.status);
                span_err.innerHTML="<font color='red'>× 页面有错误</font>"; //
            }
        }
    }
/*-------------------------------------------------------------------------------------------------------------------------*/
//验证用户名
var emailFlag=false;

function checkEmail()
{
    var email=document.forms[0].email.value;
    var span_email=document.getElementById("span_email");
    if(email=="" || email==null)
    {
         emailFlag=false;
         span_email.innerHTML="<font color='red'>× 请输入Email!</font>"; //
    }
    else if(!test_Email(email))
    {
        emailFlag=false;
        span_email.innerHTML="<font color='red'>× 请输入正确的Email!</font>"; //
    }
    else
    {
         span_email.innerHTML="検証…"
         sendRequest("checkEmail.jsp?"+new Date()+"&email="+encodeURI(email)); // 正在验证
    }
}
function checkUsernameCallback()
{
    var json=eval('('+XMLHttpReq.responseText+')');
    var span_email=document.getElementById("span_email");
    if(json.msg==true)
    {
         emailFlag=true;
         span_email.innerHTML="<font color='green'>√ 符合要求的Email</font>"; //
    }
    else
    {
         emailFlag=false;
         span_email.innerHTML="<font color='red'>× Email 重复</font>"; //
    }
}

function test_Email(strEmail)
    {
                var myReg = /^([\S])+[@]{1}([\S])+[.]{1}(\S)+$/;
                if(myReg.test(strEmail))
                {
                    return true;
                }
                return false;
    }
/*-------------------------------------------------------------------------------------------------------------------------*/
//密码验证
var pwdFlag=false;
var confirmPwdFlag=false;

function checkPwd()
{
    var pwd=document.forms[0].pwd.value;
    var span_pwd=document.getElementById("span_pwd");
    if(""==pwd || null==pwd)
    {
        pwdFlag=false;
        span_pwd.innerHTML="<font color='red'>× 请输入密码!</font>"; //
    }
    else
    {
        pwdFlag=true;
        span_pwd.innerHTML="";
    }
}

function valPwd()
{
        var pwd=document.forms[0].pwd.value;
        var confirmPwd=document.forms[0].confirmPwd.value;
        var span_confirmPwd=document.getElementById("span_confirmPwd");
        if(""==confirmPwd || null==confirmPwd)
        {
            confirmPwdFlag=false;
            span_confirmPwd.innerHTML="<font color='red'>× 请输入确认密码!</font>";  //
        }
        if(pwd!=confirmPwd)
        {
            confirmPwdFlag=false;
            span_confirmPwd.innerHTML="<font color='red'>× 请确保两次密码一致!</font>"; //
        }
        if(pwd==confirmPwd && (""!=confirmPwd && null!=confirmPwd))
        {
            confirmPwdFlag=true;
            span_confirmPwd.innerHTML="";
        }
}

//重复密码验证

/*-------------------------------------------------------------------------------------------------------------------------*/
//注册表单提交验证
function register()
{
    var span_err=document.getElementById("span_err");
    var span_email=document.getElementById("span_email");
    var span_pwd=document.getElementById("span_pwd");
    var span_confirmPwd=document.getElementById("span_confirmPwd");
    if(emailFlag==false)
    {
        span_email.innerHTML="<font color='red'>× Email错误!</font>"; //
    }
    if(pwdFlag==false)
    {
        span_pwd.innerHTML="<font color='red'>× 密码错误!</font>"; //
    }
    if(confirmPwdFlag==false)
    {
            span_confirmPwd.innerHTML="<font color='red'>× 确认密码错误!</font>"; //
    }
if(emailFlag==true && pwdFlag==true &&  confirmPwdFlag==true)
{

   span_err.innerHTML="<font color='green'>√ 提交成功!</font>"; //
document.forms[0].submit();
}
else
{
   span_err.innerHTML="<font color='red'>× 信息不全!</font>"; //
}
}

3.checkEmail.jsp
获取由regist.html中传来的email参数(由于方便此处采用默认值的比较)
最后返回message

<%
request.setCharacterEncoding("utf-8");
response.setContentType("text/html");
response.setCharacterEncoding("utf-8");
out.flush();
String email=request.getParameter("email");

String message="";
if("shark@126.com".equlas(email))
{
    message="{msg:false}";
}
else
{
    message="{msg:true}";
}
out.print(message);
out.close();
%>

Similar Posts:

  • jquery servlet jsp完成用户名存在验证 $.ajax()

    好不容易做出来了,sharing,网上类似的东西挺少,而且还有错的,给大家看个demo,附件里有myeclipse的工程,可以下载运行 <%@ page language="java" import="java.util.*" pageEncoding="gb2312"%> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> &

  • 11级_Java_曹建波 03.13 Struts2&amp;ajax实现用户名唯一验证案例

    在项目的开发过程中离不开用户名唯一的验证或者邮件唯一的验证.那通过struts2技术是怎么实现,下面以用户名唯一验证案例讲解. 实现效果: 当用户名输入框失去焦点的时候,能够实现用户名唯一的验证 步骤: 1.设计界面代码 并且引入js文件 <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <%@ taglib uri="/strut

  • Struts2&amp;ajax实现用户名唯一验证案例

    在项目的开发过程中离不开用户名唯一的验证或者邮件唯一的验证.那通过struts2技术是怎么实现,下面以用户名唯一验证案例讲解. 实现效果: 当用户名输入框失去焦点的时候,能够实现用户名唯一的验证 步骤: 1.设计界面代码 并且引入js文件 [html]view plaincopyprint? 1 <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> 2

  • ajax 提交遇到 input表单ajax后台验证还没返回,就提前提交造成错误

    1,这里的手机或邮箱都要验证存在否?(ajax后台验证) 失去焦点验证 2, 验证码正确否,(ajax后台验证) 失去焦点验证 点击下一步 我前端判断的有点不严谨,造成 数据填写完,点击就提交了.这两个input 都还没ajax 返回数据 --cut-- xycool在1970-01-01 15:42:53回答到: 页面加载的时候先禁用下一步按钮,然后可考虑定义两个bool类型的变量,默认为false,当ajax返回正确的结果之后修改对应变量,最后判断这两个变量都为true之后在去除按钮的禁用.

  • jsp页面显示后台的错误

    想要在JSP页面查看后台的错误堆栈信息,那么需要做如下的设置 1新建一张JSP页面,并且设置 <%@ page contentType="text/html; charset=UTF-8" language="java" pageEncoding="UTF-8" isErrorPage="true"%> 设置isErrorPage="true" 2做一个DIV,设置默认的display为none

  • jquery用户名动态验证(jquery+mysql)

    先上html代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv=&quo

  • WCF用户名密码验证方式

    WCF使用用户名密码验证 服务契约 namespace WCFUserNameConstract { [ServiceContract] public interface IWcfContract { [OperationContract] bool GetOnWcfService(ref string MessageInfo); } } 服务实现 namespace WcfUserNameService { public class WcfUserNameService : IWcfContr

  • 前台后台验证 后台像前台编写JavaScript脚本 在控件中添加属性值 母版页以及占位符 内容页

      1.前台JavaScript验证. 2.后台的服务器验证. 3.在后台程序中向前台编写JavaScript脚本. 1)Response.Write("<script>alert('注册成功');</script>"); 问题:在网页内容输出前就显示了,所以就有可能导致样式没有导入. 2)if(string.IsNullOrEmpty(strUserName)) { this.Page.ClientScript.RegisterClientScript

  • [置顶] SpringMVC+Spring+mybatis 实现登录过程(使用后台验证框架)

    一:SpringMVC+Spring+mybatis 所要的jar包 二:xml基本配置 web.xml配置 <?xml version="1.0" encoding="UTF-8"?> <web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://java.sun.com/xml/ns/javaee" xmlns:w

  • ios 应用内支付(In-App Purchase,沙盒测试,后台验证)

    1.苹果iTunes Connect内购产品信息录入. 1)创建app内购买项目(Create New),选择类型: 1.消耗型项目 对于消耗型 App 内购买项目,用户每次下载时都必须进行购买.一次性服务通常属于消耗型项目,例如钓鱼App 中的鱼饵. 2.非消耗型项目 对于非消耗型 App 内购买项目,用户仅需要购买一次.不会过期或随使用而减少的服务通常为非消耗型项目,例如游戏App 的新跑道. 3.自动续订订阅 通过自动续订订阅,用户可以购买指定时间期限内的更新和动态内容.除非用户取消选择,