<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
.onError {
color: red;
}
</style>
</head>
<body>
<form action="" id="myForm">
<div class="init">
<label for="username">username:</label>
<input type="text" id="username"/>
</div> <div class="init">
<label for="email">email:</label>
<input type="text" id="email"/>
</div> <div class="init">
<label for="personInfo">personInfo:</label>
<input type="text" id="personInfo"/>
</div> <div class="sub">
<input type="submit" value="提交" id="send"/>
<input type="reset" id="red"/>
</div>
</form>
<script src="jquery.min.js"></script>
<script type="text/javascript">
$(function(){
$('#myForm :input').blur(function(){
var $parent = $(this).parent();
//在创建提交元素之前，将当前元素以前的提醒元素都删除
$parent.find('.onError').remove();
if($(this).is('#username')){
if($(this).val() == "" || $(this).val().length < 6){
var error_msg = '请至少输入6位的用户名';
$parent.append('<span class="onError">'+error_msg+'</span>');
}
} if($(this).is('#email')){
if($(this).val() == "" || ($(this).val() != "" && !/\w+[@]{1}\w+[.]\w+/.test($(this).val()))){
var error_msg = '请输入正确的email地址';
$parent.append('<span class="onError">'+error_msg+'</span>');
}
}
}).keyup(function(){ //为达到实时验证，添加keyup 和 focus 事件
/*注意点：
trigger()方法触发事件后，还会执行浏览器的默认事件，例如：
$('input').trigger("focus);
这一行代码不仅会触发为<input>元素绑定的focus事件，
也会使<input>元素本身得到焦点（这是浏览器的默认操作）。 如果只想触发绑定的focus事件，而不想执行浏览器默认操作，
可以使用jquery中另一个类似的方法---triggerHandler()
$("input").triggerHandler("focus");
该方法会触发<input>元素上绑定的特定事件，同时取消浏览器对此
事件的默认操作，即文本框只触发绑定的focus事件，不会得到焦点。
*/ /*这里，trigger('blur')不仅会触发为元素绑定的blur事件，
也会触发浏览器默认的blur事件，即不能将光标定位到文本框上。
而triggerHandler('blur')只会触发为元素绑定的blur事件，
而不触发浏览器默认的blur事件*/
$(this).triggerHandler('blur');
}).focus(function(){
$(this).triggerHandler('blur');
}); $('#send').click(function(){
$('#myForm .init :input').trigger('blur');
var numError = $('#myForm .init .onError').length;
if(numError){
return false;
}
alert("注册成功，密码已发送至您的邮箱！");
});
});
</script>
</body>
</html>