基于jquery实现即时检查格式是否正确的表单
现在很多网站的注册模块都可以实现即时检查格式是否正确，这样极大的增强了用户体验，对开发非常有利。
下面的代码是利用jquery实现了对一个表单字段格式的即时检查（包括字段长度、邮箱格式），同时在提交时，再次出发检查事件。
注意这个检查是keyup和focus上为主，利用这两个事件来触发blur（失去焦点）事件。
<html>
<head>
<metacharset="utf-8"/>
<title></title>
<linkhref="css/style.css"rel="stylesheet"type="text/css"/>
<scriptsrc="jquery-1.3.2.min.js"></script>
<script>
$(function(){
//为每个必填字段后面加上*
$("form:input.required").each(function(){
var$required=$("<strongclass='high'>*</strong>");
$(this).parent().append($required);
});
//textbox失去焦点事件
$("form:input").blur(function(){
var$parent=$(this).parent();
$parent.find(".formtips").remove();
if($(this).is('#username')){
if(this.value==""||this.value.length<6){
varerrorMsg="请输入至少6位的用户名";
$parent.append('<spanclass="formtipsonError">'+errorMsg+"</span>");
}else{
varokMsg="输入正确"
$parent.append('<spanclass="formtipsonSuccess">'+okMsg+'</span>');
}
}
if($(this).is('#email')){
if(this.value==""||(this.value!=""&&!/.+@.+\.[a-zA-Z]{2,4}$/.test(this.value))){
varerrorMsg="请输入正确的E-Mail地址";
$parent.append('<spanclass="formtipsonError">'+errorMsg+"</span>");
}else{
varokMsg="输入正确"
$parent.append('<spanclass="formtipsonSuccess">'+okMsg+'</span>');
}
}
}).keyup(function(){
$(this).triggerHandler("blur");//keyup和focus利用triggerHandler来触发blur事件
}).focus(function(){
$(this).triggerHandler("blur");
});
$("#send").click(function(){//提交按钮事件
$("form.required:input").trigger('blur');
varnumError=$('form.onError').length;
if(numError)
{
returnfalse;
}
alert("注册成功，密码已发到你的邮箱，请查收");
});
});
</script>
</head>
<body>
<formmethod="post"action="">
<divclass="int">
<labelfor="username">用户名</label>
<inputtype="text"id="username"class="required"/>
</div>
<divclass="int">
<labelfor="email">邮箱</label>
<inputtype="text"id="email"class="required"/>
</div>
<divclass="int">
<labelfor="=personinfo">个人资料</label>
<inputtype="text"id="personinfo"/>
</div>
<divclass="sub">
<inputtype="submit"value="提交"id="send"/>
<inputtype="reset"id="res"/>
</div>
</form>
</body>
</html>
更多内容点击：
以上就是本文的全部内容，希望对大家学习jquery程序设计有所帮助。