由于每次在元素失去焦点后，都会创建一个新的提醒元素，然后将它追加到文档中，最后就出现了多次的提醒信息。因此，需要在创建提醒元素之前，将当前元素以前的提醒元素都删除。可以使用 remove() 方法来完成，代码如下：
//为表单元素添加失去焦点事件 $("form :input").blur(function(){ var $parent = $(this).parent(); $parent.find(".msg").remove(); //删除以前的提醒元素 // ...省略代码 });
显示效果如图 4 所示。
图 4 正确的效果
当鼠标在表单元素中多次失去焦点时，都可以提醒用户填写是否正确。但是，如果用户无视错误提醒，执意要单击“提交”按钮时，为了使表单填写准确，在表单提交之前，需要对表单的必须填写元素进行一次整体的验证。可以直接用 trigger() 方法来触发blur事件，从而达到验证效果。如果填写错误，就会以红色提醒用户；如果名称和邮箱都不符合规则，那么就有两处错误，即有两个 class 为 “onError” 的元素，因此可以根据 class 为 “onError” 元素的长度来判断是否可以提交。如果长度为 0 ，即 true ，说明已经可以提交了；如果长度大于0，即 false ，说明有错误，需要阻止表单提交。阻止表单提交可以直接用 “return false” 语句。
根据上面的分析，可以在提交事件中写出如下jQuery代码：
//点击重置按钮时，触发文本框的失去焦点事件 $("#send").click(function(){ //trigger 事件执行完后，浏览器会为submit按钮获得焦点 $("form .required:input").trigger("blur"); var numError = $("form .onError").length; if(numError){ return false; } alert("注册成功，密码已发到你的邮箱"); });
显示效果如图 5 所示。
图 5 正确提交
用户也许会提出：为什么每次都要等字段元素失去焦点后，才提醒是否正确？如果输入时就可以提醒，这样就可以更加即时了。
为了达到用户提出的需求，需要给表单元素绑定 keyup 事件和 focus 事件，keyup 事件能在用户每次松开按键时触发，实现即时提醒；focus 事件能在元素得到焦点的时候触发，也可以实现即时提醒。
代码如下：
$("form :input").blur(function(){ //失去焦点处理函数 //代码省略... }).keyup(function(){ //triggerHandler 防止事件执行完后，浏览器自动为标签获得焦点 $(this).triggerHandler("blur"); }).focus(function(){ $(this).triggerHandler("blur"); });
这样当用户将光标定位到文本框上和改变文本框的值时，表单就会即时提醒用户填写是否正确，从而符合了用户的需求。
在前面的章节已经提过，trigger（“blur”）不仅会触发为元素绑定的blur事件，也会触发浏览器默认的 blur 事件，即不能讲光标定位到文本框上。而 triggerHandler（“blur”）只会触发为元素绑定的 blur 事件，而不触发浏览器默认的 blur 事件。
至此，表单验证过程就全部完成。读者可以根据自己的实际需求修改验证规则。
【注】：客户端的验证仅用于提升用户的操作体验，而服务器仍需对用户输入的数据的合法性进行校验。对于禁用了脚本的用户和用户自制的网页提交操作，必须在服务器端验证。
完整代码：
<!DOCTYPE html> <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"> <title>jQueryStudy</title> <style type="text/css"> .int{ height: 30px; text-align: left; width: 600px; } label{ width: 200px; margin-left: 20px; } .high{ color: red; } .msg{ font-size: 13px; } .onError{ color: red; } .onSuccess{ color: green; } </style> <script type="text/javascript" src="https://www.jb51.net/jquery-1.10.2.js"></script> </head> <body> <form method="post" action=""> <div> <label for="name">名称：</label> <input type="text" /> </div> <div> <label for="email">邮箱：</label> <input type="text" /> </div> <div> <label for="address">地址：</label> <input type="text" /> </div> <div> <input type="submit" value="提交" /> <input type="reset" value="重置" /> </div> </form> <script type="text/javascript"> $(document).ready(function(){ //为表单的必填文本框添加提示信息（选择form中的所有后代input元素） $("form :input.required").each(function(){ //创建元素 var $required = $("<strong>*</strong>"); //将它追加到文档中 $(this).parent().append($required); }); //为表单的必填文本框添加相关事件（blur、focus、keyup） $("form :input").blur(function(){ //注意：这里的this是DOM对象，$(this)才是jQuery对象 var $parent = $(this).parent(); //删除之前的错误提醒信息 $parent.find(".msg").remove(); //验证“名称” if($(this).is("#name")){ //运用jQuery中的$.trim()方法，去掉首位空格 if($.trim(this.value) == "" || $.trim(this.value).length < 6){ var errorMsg = " 请输入至少6位的名称！"; //class='msg onError' 中间的空格是层叠样式的格式 $parent.append("<span>" + errorMsg + "</span>"); } else{ var okMsg=" 输入正确"; $parent.find(".high").remove(); $parent.append("<span>" + okMsg + "</span>"); } } //验证邮箱 if($(this).is("#email")){ if($.trim(this.value) == "" || ($.trim(this.value) != "" && !/.+@.+\.[a-zA-Z]{2,4}$/.test($.trim(this.value)))){ var errorMsg = "请输入正确的E-Mail地址！"; $parent.append("<span>" + errorMsg + "</span>"); } else{ var okMsg=" 输入正确"; $parent.find(".high").remove(); $parent.append("<span>" + okMsg + "</span>"); } } }).keyup(function(){ //triggerHandler 防止事件执行完后，浏览器自动为标签获得焦点 $(this).triggerHandler("blur"); }).focus(function(){ $(this).triggerHandler("blur"); }); //点击重置按钮时，触发文本框的失去焦点事件 $("#send").click(function(){ //trigger 事件执行完后，浏览器会为submit按钮获得焦点 $("form .required:input").trigger("blur"); var numError = $("form .onError").length; if(numError){ return false; } alert("注册成功，密码已发到你的邮箱"); }); }); </script> </body> </html>