jQ实现表单实时提醒

在注册登录界面，输入账号和密码时，总会在文本框的右侧出现提醒，这种提醒能很好的提示我们要如何去输入。那么这种实时提醒是怎么用代码实现的呢？

1：先创建一个注册登录界面。

<form method="post" action=" ">
<div class="cen">
<label for="username">账号:</label>
<input type="text" id="username" name="user" class="zh" />
</div>
<div class="cen">
<label for="password">密码:</label>
<input type="password" id="password" name="pass" class="mm" />
</div>
<div class="sub">
<input type="submit" value="登录" name="b1" id="send"/>
<input type="submit" value="注册" name="b2" />
</div>
</form>

效果如图：

2：给表单里的文本框绑定失去焦点事件（blur）

$(function(){

//文本框失去焦点
$('form :input').blur(function(){
var $parent = $(this).parent();
$parent.find(".formtips").remove();
//验证账号
if($(this).is('#username')){
if(this.value==""|| this.value.length < 6){
var errorzh = '请输入6-12位数.';
$parent.append('<span class = "formtips error">' + errorzh + '</span>');
}else{
var okzh = '输入正确.';
$parent.append('<span class = "formtips">' + okzh + '</span>');
}
}
//验证密码
if($(this).is('#password')){
if(this.value == ""|| this.value.length < 6){
var errormm = '请输入6-16位数.';
$parent.append('<span class = "formtips error">' + errormm + '</span>');
}else{
var okmm = '输入正确.';
$parent.append('<span class = "formtips">' + okmm + '</span>');
}

}
}).keyup(function(){     //keyup事件能在用户每次松开按键时触发，实现即时提醒。
$(this).triggerHandler("blur");
//trigger("blur")不仅会触发为元素绑定的blur事件，也会触发浏览器默认的blur事件，即不能将光标定位到文本框上。而triggerHandler("blur")只会触发前者而不会出发后者
}).focus(function(){    //focus事件能在元素得到焦点的时候触发，也能实现及时提醒。
$(this).triggerHandler("blur");
});
//最终验证。
$('#send').click(function(){
$("form .zh:input").trigger('blur');
$("form .mm:input").trigger('blur');
if($('form .error').length) {
alert("账号密码输入错误。");
return false;
}
});
})

效果如图：

在点击登录按钮时，表单的数据就会提交。最终验证的功能就是表单提交之前，对表单进行一次整体的验证。如果有错误，则用“return false”来阻止表单提交。

效果如下：