基于jquery实现即时检查格式是否正确的表单

现在很多网站的注册模块都可以实现即时检查格式是否正确，这样极大的增强了用户体验，对开发非常有利。
下面的代码是利用jquery实现了对一个表单字段格式的即时检查（包括字段长度、邮箱格式），同时在提交时，再次出发检查事件。
注意这个检查是keyup和focus上为主，利用这两个事件来触发blur（失去焦点）事件。

<html><head> <meta charset="utf-8" /> <title></title> <link href="css/style.css" rel="stylesheet" type="text/css" /> <script src="jquery-1.3.2.min.js"></script> <script>$（function （） {        //为每个必填字段后面加上* $（"form :input.required"）.each（function （） {var $required = $（"<strong class="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） {var errorMsg = "请输入至少6位的用户名";$parent.append（"<span class="formtips onError">" + errorMsg + "</span>"）; } else {var okMsg = "输入正确"$parent.append（"<span class="formtips onSuccess">" + okMsg + "</span>"）; }}if （$（this）.is（"#email"）） { if （this.value == "" || （this.value ！= "" && ！/.+@.+.[a-zA-Z]{2,4}$/.test（this.value））） {var errorMsg = "请输入正确的E-Mail地址";$parent.append（"<span class="formtips onError">" + errorMsg + "</span>"）; } else {var okMsg = "输入正确"$parent.append（"<span class="formtips onSuccess">" + okMsg + "</span>"）; }} }）.keyup（function （） {$（this）.triggerHandler（"blur"）;//keyup和focus利用triggerHandler来触发blur事件 }）.focus（function （） {$（this）.triggerHandler（"blur"）; }）; $（"#send"）.click（function （） {//提交按钮事件$（"form .required:input"）.trigger（"blur"）;var numError = $（"form .onError"）.length;if（numError）{ return false;}alert（"注册成功，密码已发到你的邮箱，请查收"）; }）;}）; </script></head><body> <form method="post" action=""><div class="int"> <label for="username">用户名</label> <input type="text" id="username" class="required" /></div><div class="int"> <label for="email">邮箱</label> <input type="text" id="email" class="required" /></div><div class="int"> <label for="=personinfo">个人资料</label> <input type="text" id="personinfo" /></div><div class="sub"> <input type="submit" value="提交" id="send" /> <input type="reset" id="res" /></div> </form></body></html>

更多内容点击：jquery表单验证大全
以上就是本文的全部内容，希望对大家学习jquery程序设计有所帮助。