如何通过切换文本框焦点，实现页面数据有效性验证

用AJAX异步提交，当光标丢失时触动一个js函数进行ajax异步请求！主要就由触动焦点丢失事件产生

做这个要很细心很细心。参考HTML的事件触发机制，还有DOM局部更改机制第3点要与数据库交互。只有AJAX

用ajax进行异步请求，能很好地解决lz的问题

<%@page pageEncoding="utf-8" contentType="text/html;charset=utf-8"%>
<!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>
<title>用户注册 - 京东商城</title>
<link href="../css/login.css" rel="stylesheet" type="text/css" />
<link href="../css/page_bottom.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="../js/jquery-1.4.min.js"></script>
<script type="text/javascript" src="../js/jquery.validate.js"></script>
<script>
$(function(){
  $('#f').validate(
   {
    rules:{
      email:{required:true,email:true,
        remote:{
     url:"../registEmail.do",
     type:"post",
     dataType:"json",
     data:{
     email:function(){
         return $("#txtEmail").val();
                        }
        }
              }

      },
      nickname:{required:true,rangelength:[4,20]},
      pwd:{required:true,rangelength:[4,20]},
      password1:{required:true,rangelength:[4,20],equalTo:"#txtPassword"},
      number:{required:true,
       remote:{
     url:"../registNum.do",
     type:"post",
     dataType:"json",
     data:{
     number:function(){
         return $("#txtVerifyCode").val();
                        }
        }
              }
      }
           },
    messages:{
      email:{required:"email不能为空",email:"请输入正确的email格式",remote:"email已被占用"},
      nickname:{required:"用户名不能为空",rangelength:"密码应为4-20位之间"},
      pwd:{required:"密码不能为空",rangelength:"密码应为4-20位之间"},
      password1:{required:"密码不能为空",rangelength:"密码应为4-20位之间",equalTo:"两次密码不一致"},
      number:{required:"验证码不能为空",remote:"验证码输入不对"}
      },
   errorPlacement: function(error,element){
error.appendTo(element.next().find("span"));
}
   }
  );
  });
</script>
</head>
<body>
<%@include file="../common/head1.jsp"%>
<div class="login_step">
<img src="../images/5.gif" height="50px;"/>
注册步骤:
<span class="red_bold">1.填写信息</span> > 2.验证邮箱 > 3.注册成功
</div>

<div class="fill_message">
<form name="ctl00" method="post" action="../RegistOk.do" id="f">
<h2>
以下均为必填项
</h2>
<table class="tab_login" >
<tr>
<td valign="top" class="w1">
请填写您的Email地址：
</td>
<td>
<input  name="email" type="text" id="txtEmail" class="text_input"/>
<div class="text_left" id="emailValidMsg">
<p>
请填写有效的Email地址，在下一步中您将用此邮箱接收验证邮件。
</p>
<span id="email.info" style="color:red"></span>
</div>
</td>
</tr>
<tr>
<td valign="top" class="w1">
设置您在京东网的昵称：
</td>
<td>
<input name="nickname" type="text" id="txtNickName" class="text_input" />
<div class="text_left" id="nickNameValidMsg">
<p>
您的昵称可以由小写英文字母、中文、数字组成，
</p>
<p>
长度4－20个字符，一个汉字为两个字符。
</p>
<span id="name.info" style="color:red"></span>
</div>
</td>
</tr>
<tr>
<td valign="top" class="w1">
设置密码：
</td>
<td>
<input name="pwd" type="password" id="txtPassword"
class="text_input" />
<div class="text_left" id="passwordValidMsg">
<p>
您的密码可以由大小写英文字母、数字组成，长度6－20位。
</p>
<span id="password.info" style="color:red"></span>
</div>
</td>
</tr>
<tr>
<td valign="top" class="w1">
再次输入您设置的密码：
</td>
<td>
<input name="password1" type="password" id="txtRepeatPass"
class="text_input"/>
<div class="text_left" id="repeatPassValidMsg">
<span id="password1.info" style="color:red"></span>
</div>
</td>
</tr>
<tr>
<td valign="top" class="w1">
验证码：
</td>
<td>
<img class="yzm_img" id='imgVcode' src="../check.do" />
<input name="number" type="text" id="txtVerifyCode"
class="yzm_input"/>
<div class="text_left t1">
<p class="t1">
请输入图片中的四个字母。
<span id="number.info" style="color:red"></span>
<a href="javascript:;" onclick="document.getElementById('imgVcode').src = '../check.do?'+(new Date()).getTime()">看不清楚？换个图片</a>
</p>
</div>
</td>
</tr>
</table> <div class="login_in"> <input id="btnClientRegister" class="button_1" name="submit"  type="submit" value="注册"/>
</div>
</form>
</div>
<%@include file="../common/foot.jsp"%>
</body>
</html>
这是我做毕设项目的注册页面，自己对照一下，你的这些问题全能解决的，

Ajax 当推动焦点的时候就触发事件，把文件框中的数据向后台发送，在后台做处理，并把结果返回到页面

建议你用个JS框架，jqurey的validation,简单好用，不想用框架的话就用HTML中元素的onblur事件，失去焦点后触发一个JS函数，在这个函数中做一些判断，AJAX等操作。

   测试了下你的页面，下载并添加了jquery-1.4.min.js和jquery.validate.js，检查成功，第二个问题解决，谢谢！  但是下面这部分我不懂：
   remote : {
url : "../registEmail.do",
type : "post",
dataType : "json",
data : {
email : function() {
return $("#txtEmail").val();
}
}
  }
  这是email部分的，registEmail.do这个文件是神马，还有number部分的registNum.do文件，这些部分应该是要检查数据库信息吧？可不可以发来看看哦~谢谢啦~~

registEmail.do是一个映射，它是一个servlet文件吗，来执行邮箱的唯一性验证？或是jsp文件？

这个是业务层的，请求action的url，如果要的话，我发给你

谢谢大家的回复，特别要感谢zs_jl_bh！

调试易

如何通过切换文本框焦点，实现页面数据有效性验证

解决方案 »