2023年6月21日发(作者：)
使⽤jQuery实现表单验证功能5.1.5 表单验证 表单作为 HTML 最重要的⼀个组成部分，⼏乎在每个⽹页上都有体现，例如⽤户提交信息、⽤户反馈信息和⽤户查询信息等，因此它是⽹站管理者与浏览者之间沟通的桥梁。在表单中，表单验证的作⽤也是⾮常重要的，它能使表单更加灵活、美观和丰富。 以⼀个简单的⽤户注册为例。⾸先新建⼀个表单， HTML 代码如下：
（2）如果是“名称”，判断元素的值的长度是否⼩于 6 ，如果⼩于 6 ，则⽤红⾊字体提醒⽤户输⼊不正确，反之，则⽤绿⾊提醒⽤户输⼊正确。 （3）如果是“邮箱”，判断元素的值是否符合邮箱的格式，如果不符合，则⽤红⾊字体提醒⽤户输⼊不正确，反之，则⽤绿⾊字体提醒⽤户输⼊正确。
（4）将提醒信息追加到当前的⽗元素的最后。
【注】：为了使⽤⽅便，当 text ⽂本框中的内容格式错误时，程序应尽量把所有提⽰都显⽰出来，⽽不是每次验证⼀种格式后只与之相关的错误提醒信息。 根据以上分析，可以写出如下 jQuery 代码： 当连续⼏次输⼊错误的格式后，会出现如图 3 所⽰的效果 图 3 操作多次的提⽰效果 由于每次在元素失去焦点后，都会创建⼀个新的提醒元素，然后将它追加到⽂档中，最后就出现了多次的提醒信息。因此，需要在创建提醒元素之前，将当前元素以前的提醒元素都删除。可以使⽤ remove() ⽅法来完成，代码如下：
//为表单元素添加失去焦点事件$("form :input").blur(function(){
var $parent = $(this).parent(); $(".msg").remove(); //删除以前的提醒元素 // ...省略代码}); 显⽰效果如图 4 所⽰。 图 4 正确的效果 当⿏标在表单元素中多次失去焦点时，都可以提醒⽤户填写是否正确。但是，如果⽤户⽆视错误提醒，执意要单击“提交”按钮时，为了使表单填写准确，在表单提交之前，需要对表单的必须填写元素进⾏⼀次整体的验证。可以直接⽤ trigger()⽅法来触发blur事件，从⽽达到验证效果。如果填写错误，就会以红⾊提醒⽤户；如果名称和邮箱都不符合规则，那么就有两处错误，即有两个 class 为 “onError” 的元素，因此可以根据 class 为 “onError” 元素的长度来判断是否可以提交。如果长度为0 ，即 true ，说明已经可以提交了；如果长度⼤于0，即 false ，说明有错误，需要阻⽌表单提交。阻⽌表单提交可以直接⽤“return false” 语句。
根据上⾯的分析，可以在提交事件中写出如下jQuery代码：
//点击重置按钮时，触发⽂本框的失去焦点事件$("#send").click(function(){ //trigger 事件执⾏完后，浏览器会为submit按钮获得焦点 $("form .required:input").trigger("blur");
var numError = $("form .onError").length; if(numError){ return false; } alert("注册成功，密码已发到你的邮箱");}); 显⽰效果如图 5 所⽰。 图 5 正确提交 ⽤户也许会提出：为什么每次都要等字段元素失去焦点后，才提醒是否正确？如果输⼊时就可以提醒，这样就可以更加即时了。 为了达到⽤户提出的需求，需要给表单元素绑定 keyup 事件和 focus 事件，keyup 事件能在⽤户每次松开按键时触发，实现即时提醒；focus 事件能在元素得到焦点的时候触发，也可以实现即时提醒。 代码如下：$("form :input").blur(function(){
//失去焦点处理函数 //代码省略...}).keyup(function(){ //triggerHandler 防⽌事件执⾏完后，浏览器⾃动为标签获得焦点 $(this).triggerHandler("blur");
}).focus(function(){ $(this).triggerHandler("blur");}); 这样当⽤户将光标定位到⽂本框上和改变⽂本框的值时，表单就会即时提醒⽤户填写是否正确，从⽽符合了⽤户的需求。
在前⾯的章节已经提过，trigger（“blur”）不仅会触发为元素绑定的blur事件，也会触发浏览器默认的 blur 事件，即不能讲光标定位到⽂本框上。⽽ triggerHandler（“blur”）只会触发为元素绑定的 blur 事件，⽽不触发浏览器默认的 blur 事件。
⾄此，表单验证过程就全部完成。读者可以根据⾃⼰的实际需求修改验证规则。 【注】：客户端的验证仅⽤于提升⽤户的操作体验，⽽服务器仍需对⽤户输⼊的数据的合法性进⾏校验。对于禁⽤了脚本的⽤户和⽤户⾃制的⽹页提交操作，必须在服务器端验证。完整代码：
2023年6月21日发(作者：)
使⽤jQuery实现表单验证功能5.1.5 表单验证 表单作为 HTML 最重要的⼀个组成部分，⼏乎在每个⽹页上都有体现，例如⽤户提交信息、⽤户反馈信息和⽤户查询信息等，因此它是⽹站管理者与浏览者之间沟通的桥梁。在表单中，表单验证的作⽤也是⾮常重要的，它能使表单更加灵活、美观和丰富。 以⼀个简单的⽤户注册为例。⾸先新建⼀个表单， HTML 代码如下：
（2）如果是“名称”，判断元素的值的长度是否⼩于 6 ，如果⼩于 6 ，则⽤红⾊字体提醒⽤户输⼊不正确，反之，则⽤绿⾊提醒⽤户输⼊正确。 （3）如果是“邮箱”，判断元素的值是否符合邮箱的格式，如果不符合，则⽤红⾊字体提醒⽤户输⼊不正确，反之，则⽤绿⾊字体提醒⽤户输⼊正确。
（4）将提醒信息追加到当前的⽗元素的最后。
【注】：为了使⽤⽅便，当 text ⽂本框中的内容格式错误时，程序应尽量把所有提⽰都显⽰出来，⽽不是每次验证⼀种格式后只与之相关的错误提醒信息。 根据以上分析，可以写出如下 jQuery 代码： 当连续⼏次输⼊错误的格式后，会出现如图 3 所⽰的效果 图 3 操作多次的提⽰效果 由于每次在元素失去焦点后，都会创建⼀个新的提醒元素，然后将它追加到⽂档中，最后就出现了多次的提醒信息。因此，需要在创建提醒元素之前，将当前元素以前的提醒元素都删除。可以使⽤ remove() ⽅法来完成，代码如下：
//为表单元素添加失去焦点事件$("form :input").blur(function(){
var $parent = $(this).parent(); $(".msg").remove(); //删除以前的提醒元素 // ...省略代码}); 显⽰效果如图 4 所⽰。 图 4 正确的效果 当⿏标在表单元素中多次失去焦点时，都可以提醒⽤户填写是否正确。但是，如果⽤户⽆视错误提醒，执意要单击“提交”按钮时，为了使表单填写准确，在表单提交之前，需要对表单的必须填写元素进⾏⼀次整体的验证。可以直接⽤ trigger()⽅法来触发blur事件，从⽽达到验证效果。如果填写错误，就会以红⾊提醒⽤户；如果名称和邮箱都不符合规则，那么就有两处错误，即有两个 class 为 “onError” 的元素，因此可以根据 class 为 “onError” 元素的长度来判断是否可以提交。如果长度为0 ，即 true ，说明已经可以提交了；如果长度⼤于0，即 false ，说明有错误，需要阻⽌表单提交。阻⽌表单提交可以直接⽤“return false” 语句。
根据上⾯的分析，可以在提交事件中写出如下jQuery代码：
//点击重置按钮时，触发⽂本框的失去焦点事件$("#send").click(function(){ //trigger 事件执⾏完后，浏览器会为submit按钮获得焦点 $("form .required:input").trigger("blur");
var numError = $("form .onError").length; if(numError){ return false; } alert("注册成功，密码已发到你的邮箱");}); 显⽰效果如图 5 所⽰。 图 5 正确提交 ⽤户也许会提出：为什么每次都要等字段元素失去焦点后，才提醒是否正确？如果输⼊时就可以提醒，这样就可以更加即时了。 为了达到⽤户提出的需求，需要给表单元素绑定 keyup 事件和 focus 事件，keyup 事件能在⽤户每次松开按键时触发，实现即时提醒；focus 事件能在元素得到焦点的时候触发，也可以实现即时提醒。 代码如下：$("form :input").blur(function(){
//失去焦点处理函数 //代码省略...}).keyup(function(){ //triggerHandler 防⽌事件执⾏完后，浏览器⾃动为标签获得焦点 $(this).triggerHandler("blur");
}).focus(function(){ $(this).triggerHandler("blur");}); 这样当⽤户将光标定位到⽂本框上和改变⽂本框的值时，表单就会即时提醒⽤户填写是否正确，从⽽符合了⽤户的需求。
在前⾯的章节已经提过，trigger（“blur”）不仅会触发为元素绑定的blur事件，也会触发浏览器默认的 blur 事件，即不能讲光标定位到⽂本框上。⽽ triggerHandler（“blur”）只会触发为元素绑定的 blur 事件，⽽不触发浏览器默认的 blur 事件。
⾄此，表单验证过程就全部完成。读者可以根据⾃⼰的实际需求修改验证规则。 【注】：客户端的验证仅⽤于提升⽤户的操作体验，⽽服务器仍需对⽤户输⼊的数据的合法性进⾏校验。对于禁⽤了脚本的⽤户和⽤户⾃制的⽹页提交操作，必须在服务器端验证。完整代码：
发布评论