前言
上次我们说完jQuery中的动画之后，我们再来看一种jQuery在Web网页应用最为广泛的一种形式，这就是jQuery对表单的操作，通过jQuery对表单的操作，可以有效的提高用户体验。在此之前，我们首先要了解表单的组成部分。表单大致有3个部分组成。
第一部分由表单标签组成，包含url及所提交的方法。即我们通常写到的<form action=”#” method=”post”>当然提交方法也可以是get，他们之间的区别在此就不做讨论。
第二部分由表单域组成:包含文本框、密码框、隐藏域、多行文本框、复选框等等。
第三部分由表单按钮组成：包含提交按钮、复位按钮、一般按钮，用于控制将数据传送到服务器或者取消传送。
jQuery中对表单的操作主要是针对于第二部分，即对表单域的操作，例如对文本框、密码框、隐藏域的操作等等。首先我们先来看一个jQuery对表单的一个最简单的应用。
一. 单行文本框的应用
此处，我们首先来看HTML代码。
<form action="#" method="post" id="regForm"><fieldset><legend>个人基本信息</legend><div><label for="username">名称：</label><input id="username" type="text" value="admin" /></div><div><label for="password">密码：</label><input type="password" id="password" value="123456" /></div><div><label for="msg">详细信息：</label><textarea rows="3" cols="15">详细信息</textarea></div></fieldset></form>
初始化HTML代码后，如图1所示
我们所需要做的效果就是当光标移入文本框的时候，会出现阴影，表示此时正在操作的正是此行的文本框，效果就如图2所示。
那么应该如何达到这个效果呢？其实非常简单，就是为文本框添加两个事件：focus与blur事件。具体jQuery代码如下所示。
<script type="text/javascript">$(function () { //加载DOM$(":input").focus(function () { //选中所有input标签,为其添加focus事件，即当光标移入所选区域内所触发的事件$(this).addClass("focus"); //此处为其添加样式"focus”，注意我的样式写到了样式表中，此处未列出，样式即加背景与边框}).blur(function () { //此处添加blur事件$(this).removeClass("focus"); //移除样式});});</script>
此时便完成了我们预定的目标。
二. 表单验证
在各大网站中，jQuery应用最广泛的一种恐怕就是表单验证了吧。无论是我们在申请或者填写登录信息的时候，或多或少都会用到表单验证。我们在这里就好好说说表单验证！可能很多人都会用插件来用于表单验证，我们在这里首先自己写一种表单验证，然后我们再通过插件再来写一次表单验证，便于理解。
还是老样子，我们首先来看HTML代码。
<form action="" method="post"><div><div class="int"><label for="username">用户名：</label><input type="text" name="username" class="required" id="username" /></div><div class="int"><label for="email">邮箱：</label><input type="text" name="email" class="required" id="email" /></div><div class="int"><label for="personmsg">个人资料</label><input type="text" name="personmsg" /></div><div class="sub"><input type="submit" id="send" value="提交" /><input type="reset" id="res" value="重置" /></div></div></form>
我们再为其添加css样式后，此处不列出css样式,使其显示如图3所示。
我们的目标效果是：
1. 用户名及邮箱为必填项，如果没有填写，提示用户填写。
2.对用户名及邮箱进行有效性验证，要求用户名至少为6位，当用户输入小于6位时，则会提示用户“请输入至少6位用户名”,邮箱中必须复合邮箱规范。
我们先整理下思路：
1. 首先我们寻找表单中的必填文本框，即class=”required“的文本框，为其添加样式”*“。
2. 针对用户名及密码的文本框，我们进行有效性判断，这里我们以用户名的文本框为例进行分析，当光标离开文本框的时候应触发blur事件，此时开始判断用户所输入内容的有效性，我们在这里假定用户名至少为6位，通过判断文本框的值的长度来返回不同的信息，如果用户输入内容为空或者字符小于6位，则返回一个错误消息提示用户输入必须至少6位，需要注意的是，我们在返回消息时候可以为其添加样式，当然样式最好定义在css中（样式中最好带有图片），如图4所示。如果输入长度大于等于6位，我们则返回正确信息，并为其添加好样式，如图5所示。同理，也为邮箱进行有效性判断，不过这里值得注意的是，邮箱是通过正则表达式进行判断的。
3. 好了，大致这些就进行的可以了，但是，如何能更好的提高用户体验呢？那就是我们希望，用户在焦点引入文本框的时候就能够进行提示，并且每键入一个字符的时候，就可以再次进行有效性验证！那么就在上面的基础上在为文本框添加两个事件focus与keyup事件，此时我们直接在这两个事件中添写triggerHandler(“blur”)就可以，此处一定要写triggerHandler，而不能是trigger，如果写trigger的话，则不但会激活我们写的blur事件，同时也会激活其自带的鼠标blur事件，而triggerHandler则可以将系统默认鼠标blur事件关闭。
4. 当然，最后我们也应该为两个按钮添加click事件。那么我们就来具体看看代码吧。
<script type="text/javascript">$(function () { //加载DOM//遍历class="required"的元素，即必填元素，并为其添加*$("input.required").each(function () {var $required = $("<strong class='high'>*</strong>");$(this).parent().append($required);});//为表单添加失去焦点的事件$("form :input").blur(function () {$(this).parent().find(".formtips").remove();if ($(this).is("#username")) { //验证用户名if (this.value == "" || this.value.length < 6) {var errorMsg = "请输入至少6位用户名";$(this).parent().append("<span class='formtips onError'>" + errorMsg + "</span>");} else {var okMsg = "输入正确";$(this).parent().append("<span class='formtips onOk'>" + okMsg + "</span>");}}if ($(this).is("#email")) { //验证邮箱if (this.value == "" || (this.value != "" && !/.+@.+.[a-zA-Z]{2,4}$/.test(this.value))) {var errorMsg = "请输入正确的邮箱地址";$(this).parent().append("<span class='formtips onError'>" + errorMsg + "</span>");} else {var okMsg = "输入正确";$(this).parent().append("<span class='formtips onOk'>" + okMsg + "</span>");}}}).keyup(function () {$(this).triggerHandler("blur");}).focus(function () {$(this).triggerHandler("blur");});//提交，通过判断返回的Error的次数来判断是否可以提交$("#send").click(function () {$("input.required").trigger("blur");var numError = $("form .onError").length;if (numError) {return false;}alert("success!");});//重置$("#res").click(function () {$(".formtips").remove();});})</script>
HTML代码如以先前HTML代码类似，我们具体来看jQuery代码。
<script type="text/javascript">$(document).ready(function () {$("#infoForm").validate({ //验证的是id="infoForm"的表格rules: { //定义验证规则rulesusername: { //对用户名的验证规则required: true,minlength: 6},email: { //对email的验证规则required: true,email:true}},messages: { //返回的验证信息username: {required: "请输入用户名",minlength: "请至少输入6个字符"},email: {required: "请输入邮箱",email: "请检查所输入的邮箱格式"}}});})</script>
用插件来写jQuery，相对而言更好写，这里需要注意的是validate中的与form的验证是通过<input>的name属性进行关联验证的，如用户名的验证，通过写好username验证。
就先写到这里吧，利用好jQuery中对表单的验证，可以有效提高用户的体验！
转自：http://www.cnblogs.com/yanfengfree/p/3536473.html