<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>表单验证.html</title>
<style>
label{display:inline-block;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。