<!DOCTYPE html>
<html lang="zh-CN"><head> <meta charset="UTF-8"> <title>表单验证.html</title> <style> label{display:inline-block;width:65px;text-align: right;} .btn{margin-left: 130px;} .error{color:red;} .ok{color:green;} </style> <script src="jquery-1.7.2.min.js"></script> <script> $(function(){ $("#username,#password").blur(function(){//当焦点不在用户名和密码框的时候 if($(this).parent().find("span").length>0){ //如果里面已经追加有span了，就讲它清空掉 $(this).parent().find("span").remove(); } var val=$(this).val(); //获取当前输入框的值 var reg=/^\w{6,20}$/; //创建正则，首尾匹配只能输入6到20位的数字或者字母 if(!reg.test(val)){ //如果匹配的结果为false，即与创建的正则不匹配，就 $(this).parent().append('<span class="error">error</span>'); 在后面追加一个error，否则就追加一个ok }else{ $(this).parent().append('<span class="ok">ok</span>'); } });$("#userform").submit(function(){ //当提交表单的时候触发被选元素的blur事件
$("#username").triggerHandler("blur"); $("#password").triggerHandler("blur"); if($("#userform").find(".error").length>0){//如果表单中已经有一个error，就不提交，否则，就提交 return false; } }); }); </script></head><body> <form action="http://baidu.com" id="userform"> <p><label for="username">用户名：</label><input type="text" name="username" id="username"></p> <p><label for="password">密 码：</label><input type="password" name="password" id="password"></p> <p><input type="submit" value="提交" class="btn"></p> </form></body></html>补充：triggerHandler() 方法触发被选元素上指定的事件。该方法与 trigger() 方法类似，不同的是 trigger() 也触发事件的默认行为（比如表单提交）。与 trigger() 方法相比的不同之处:1、它不会引起事件（比如表单提交）的默认行为2、.trigger() 会操作 jQuery 对象匹配的所有元素，而 .triggerHandler() 只影响第一个匹配元素。3、由 .triggerHandler() 创建的事件不会在 DOM 树中冒泡；如果目标元素不直接处理它们，则不会发生任何事情。该方法的返回的是事件处理函数的返回值，而不是具有可链性的 jQuery 对象。此外，如果没有处理程序被触发，则这个方法返回 undefined。