5.1.5表格验证

表单作为HTML最重要的组成部分之一，几乎体现在每一个网页中，如用户提交信息、用户反馈信息和用户查询信息等，因此是网站管理者和访问者之间的桥梁。在表单中，表单验证的功能也很重要，可以让表单更加灵活、美观、丰富。

以一个简单的用户注册为例。首先，使用以下HTML代码创建一个新表单：

！DOCTYPE html html head meta http-equiv=' content-type ' content=' text/html；charset=utf-8 ' titlejQueryStudy/title style type=' text/CSS '。int { height: 30px文本-左对齐：宽度： 600 px；}标签{ width: 200px左边距left: 20px} .高{ color:红色；} .msg { font-size : 13px；} .onError{ color:红色；} .onSuccess{ color:绿色；}/style script type=' text/JavaScript ' src=' http : jquery-1 . 10 . 2 . js '/script/Head body form方法=' post ' action=' Div ' class=' int ' Label for=' name ' name:/labe input type=' text ' id=' name ' class=' required '/Div class=' int ' Label for=' email ' mailbox:/labe input type=' text ' id=' email ' class=' required '/Div class=' int '/input type=' reset ' value=' reset ' id=' RES '/div/form script type=' text/JavaScript '/script/body/html显示效果如图1所示。

图1表单初始化

表单中类属性为“required”的文本框必须填写，因此需要与其他不需要填写的表单元素区分开来，即在文本框后面加一个红色星号。您可以使用append()方法，代码如下：

Script type='text/javascript' /将提示信息添加到表单的必需文本框中(选择表单中的所有后代输入元素)$ ('form:input。必选')。每个(function(){//create element var $ required=$(' strong class=' high ' */strong ')；//将其追加到文档$ (this)中。父项()。追加($必需)；});/script的显示效果如图2所示。

图2标有一颗小红星

当用户在“名称”文本框中填写信息后，将光标焦点从“名称”文本框移开时，需要立即判断该名称是否符合验证规则。当光标焦点移出“邮箱”文本框时，也需要立即判断“邮箱”是否填写正确，因此需要在表单元素中添加一个失焦事件，即模糊事件。JQuery代码如下：

脚本类型='text/javascript' //添加一个失焦事件$ ('form:Input ')。模糊(函数(){//.省略代码})添加到表单的元素中；/script验证表单元素，如下所示。

(1)确定当前失焦元素是“名称”还是“邮箱”，然后单独处理。

(2)如果是“name”，判断元素值的长度是否小于6。如果小于6，用红色字体提醒用户输入不正确；否则，使用绿色提醒用户输入正确。

(3)如果是“邮箱”，判断元素的值是否符合邮箱的格式，如果不是，用红色字体提醒用户输入不正确，否则，用绿色字体提醒用户输入正确。

(4)将提醒信息追加到当前父元素的末尾。

【注意】:为了使用方便，当文本框中的内容格式错误时，程序应尽量显示所有提示，而不是每次验证后只显示与一种格式相关的错误提醒信息。

根据以上分析，我们可以编写以下jQuery代码：

Script type='text/javascript' /将提示信息添加到表单的必需文本框中(选择表单中的所有后代输入元素)$ ('form:input。必选')。每个(function(){//create element var $ required=$(' strong class=' high ' */strong ')；//将其追加到文档$ (this)中。父项()。追加($必需)；});//添加失焦事件$ ('form:Input ')。blur(function(){ var $ parent=$(this))。表单元素的父级()；//验证名称if ($ (this)。是(' # name '){ if($)。修剪(这个。value==' ' | | $。修剪(这个。值)。length 6){ varerrmsg='请输入至少6位数的名称！'；//class=' msg OnError '；中间的空格是$ parent.append的格式(' span class=' msg on error msg '/span ')；} else{ var okMsg='输入正确'；$parent.find('。高')。移除()；$ parent . append(' span class=' msg on success ' ' okMsg '/span ')；} }//验证邮箱if ($ (this)。is(' # email '){ if($)。修剪(这个。value==' ' | |($)。修剪(这个。值)！='' !/[电子邮件保护] 。[a-za-z] {2，4} $/。测试($。修剪(这个。value)))){ varerrmsg='请输入正确的电子邮件地址！'；$ parent . append(' span class=' msg onError ' ' error msg '/span ')；} else{ var okMsg='输入正确'；$parent.find('。高')。移除()；$ parent . append(' span class=' msg on success ' ' okMsg '/span ')；} } });/script当连续几次输入错误的格式时，就会出现图3所示的效果

图3多个操作的提示效果

因为每次元素失去焦点时，都会创建一个新的提醒元素，然后将其附加到文档中。最后，会出现几个提醒。因此，在创建提醒元素之前，需要删除当前元素之前的所有提醒元素。您可以使用remove()方法，代码如下：

//添加失焦事件$ ('form:Input ')。blur(function(){ var $ parent=$(this))。表单元素的父级()；$parent.find('。消息')。移除()；//删除上一个提醒元素/.省略代码})；显示效果如图4所示。

图4正确的效果

当鼠标在表单元素中多次失焦时，可以提醒用户是否填写正确。但是，如果用户忽略错误提醒，坚持点击“提交”按钮，为了准确填写表单，需要在提交表单前验证表单的必要元素一次。可以直接使用trigger()方法触发模糊事件，从而达到验证效果。如果填写不正确，会以红色提醒用户；如果名称和邮箱不符合规则，则有两个错误，即有两个类为“onError”的元素，因此可以根据类为“onError”的元素的长度来判断是否可以提交。如果长度为0，即真，则可以提交；如果长度大于0，即false，则表示存在错误，需要阻止表单提交。为了防止表单提交，您可以直接使用“return false”语句。

根据上面的分析，可以在提交事件中编写以下jQuery代码：

//当单击重置按钮时，事件$ ('# send ')。Click (function () {//trigger被触发，浏览器会得到focus $('表单。要求：输入')。提交按钮的触发器(“模糊”)。var numError=$('形式。' onError ')。长度；if(numerr){ return false；}提醒(“已成功注册，密码已发送到您的邮箱”)；});显示效果如图5所示。

图5正确提交

用户可能会问：为什么每次都要等字段元素失焦才提醒是否正确？如果打字的时候能提醒一下，可以更立竿见影。

为了满足用户提出的要求，需要将keyup事件和focus事件绑定形成元素，用户每次释放按键都可以触发keyup事件，实现即时提醒；焦点事件可以在元素获得焦点时触发，也可以实现即时提醒。

代码如下：

$ ('form:input ')。blur(function(){//失焦处理程序//代码省略.}).keyup(function(){//trigger handler)防止浏览器在事件执行后自动获取标记的焦点。$(这个)。triggerHandler(' blur ')；}).focus(function(){ $(this))。triggerHandler(' blur ')；});这样，当用户将光标定位在文本框上并更改文本框的值时，表单会立即提醒用户填写是否正确，从而满足用户的需求。

如前一章所述，触发器(“模糊”)不仅会触发为元素绑定的模糊事件，还会触发浏览器默认的模糊事件，即光标无法定位在文本框上。触发器处理程序(“模糊”)将只触发绑定到元素的模糊事件，而不是浏览器默认的模糊事件。

至此，表单验证过程完成。读者可以根据自己的实际需要修改验证规则。

【注意】:客户端验证只是为了提升用户的操作体验，而服务器仍然需要验证用户输入数据的有效性。禁用脚本的用户和用户制作的网页提交操作必须在服务器端进行验证。

完整代码：

！DOCTYPE html html head meta http-equiv=' content-type ' content=' text/html；charset=utf-8 ' titlejQueryStudy/title style type=' text/CSS ' .int { height: 30px文本-左对齐：宽度： 600像素；}标签{宽度： 200像素左边距left: 20px}。高{ color:红色；} .msg { font-size : 13px} .onError{ color:红色；} .成功{ color:绿色；}/style脚本类型=' text/JavaScript ' src=' http : jquery-1。10 .2 .js '/script/head body form方法=' post ' action=' div class=' int ' label for=' name '名称：/标签输入类型='text' id='name' class='必选//div class=' int '标签为=' email '邮箱：/标签输入类型=' text ' id=' email ' class=' required '/div class=' int '标签为=' address '地址：/label输入类型=' text ' id=' person info '/div/div class=' int '输入类型=' submit ' value='提交id=' send ' style=' margin-left : 70px；'/input type='reset' value='重置id=' RES '/div/form脚本类型='text/javascript' $(文档)。就绪（函数(){ //为表单的必填文本框添加提示信息（选择形式中的所有后代投入元素)$”(表单：输入。必需的).每个（函数(){ //创建元素var $ required=$(' strong class=' high ' */strong ')；//将它追加到文档中$(这个)。父项()。追加($必需);});//为表单的必填文本框添加相关事件（模糊、聚焦、向上键)$(“表单：输入”).模糊（函数(){ //注意：这里的这是数字正射影像图对象，$(这个)才是jQuery对象var $parent=$(this).parent()；//删除之前的错误提醒信息$parent.find(' .消息')。移除();//验证"名称"如果($(这个)。是(' # name '){//运用jQuery中的$.修剪()方法，去掉首位空格if($ .修剪(这个。value)=' | | $ .修剪（这个值)。长度6){ var errorMsg='请输入至少6位的名称！//class='msg onError '中间的空格是层叠样式的格式$家长。追加(' span class=' msg onError ' '错误消息'/span ')；} else{ var okMsg='输入正确；$parent.find(' .高')。移除();$家长。追加(' span class=' msg on success ' ' okMsg '/span ')；} } //验证邮箱if($(this).是(' # email '){ if($).修剪(这个。value)=' | | |($).修剪（这个值)!='' !/[emailprotected] .[a-zA-Z]{2，4}$/.测试($。修剪(这个。value)))){ var errorsmsg='请输入正确的电子邮件地址!'；$家长。追加(' span class=' msg onError ' '错误消息'/span ')；} else{ var okMsg='输入正确；$parent.find(' .高')。移除();$家长。追加(' span class=' msg on success ' ' okMsg '/span ')；} } }).keyup(function(){//triggerHandler防止事件执行完后，浏览器自动为标签获得焦点$(这个)。triggerHandler(' blur ')；}).focus(function(){ $(this))。triggerHandler(' blur ')；});//点击重置按钮时，触发文本框的失去焦点事件$(“# send”).单击（函数(){//触发器事件执行完后，浏览器会为使服从按钮获得焦点$(“表单。必需的d :输入).触发器("模糊");var numError=$('形式“onError”).长度；if(number){ return false；}警报('注册成功，密码已发到你的邮箱');});});/script/body/htmljQuery官方空气污染指数：http://api.jquery.com/

以上所述是小编给大家介绍的使用jQuery实现表单验证功能，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！