5.1.5 表单验证

表单（form）作为 HTML 最重要的一个组成部分，几乎在每个网页上都有体现，例如用户提交信息、用户反馈信息和用户查询信息等，因此它是网站管理者与浏览者之间沟通的桥梁。在表单中，表单验证的作用也是非常重要的，它能使表单更加灵活、美观和丰富。

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

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <meta http-equiv="content-type" content="text/html; charset=utf-8">
  5.     <title>jQueryStudy</title>
  6.     <style>
  7.      .int{ height: 30px; text-align: left; width: 600px; }
  8.      label{ width: 200px; margin-left: 20px; }
  9.      .high{ color: red; }
  10.      .msg{ font-size: 13px; }
  11.      .onError{ color: red; }
  12.      .onSuccess{ color: green; }
  13.     </style>
  14.     <script src="http://code.jquery.com/jquery-latest.js"></script>
  15. </head>
  16. <body>
  17.     <form method="post" action="#">
  18.         <div class="int">
  19.             <label for="name">姓名：</label>
  20.             <input type="text" id="name" class="required" />
  21.         </div>
  22.         <div class="int">
  23.             <label for="email">邮箱：</label>
  24.             <input type="text" id="email" class="required" />
  25.         </div>
  26.         <div class="int">
  27.             <label for="address">住址：</label>
  28.             <input type="text" id="address" />
  29.         </div>
  30.         <div class="int">
  31.             <input type="submit" value="提交" id="send" style="margin-left: 70px;" />
  32.             <input type="reset" value="重置" id="res" />
  33.         </div>
  34.     </form>
  35. </body>
  36. </html>

显示效果如图 1 所示：

图 1 表单初始化

在表单内 class 属性为 “required” 的文本框是必须填写的，因此需要将它与其他的非必须填写的表单元素加以区别，即在文本框后面追加一个红色的星号标识。可以使用 append() 方法来完成，代码如下：

  1. 　　 //为表单的必填文本框添加提示信息（选择form中的所有后代input元素）
  2.     $("form :input.required").each(function () {
  3.         //通过jquery api：$("HTML字符串") 创建jquery对象
  4.         var $required = $("<strong class='high'>*</strong>");
  5.         //添加到this对象的父级对象下
  6.         $(this).parent().append($required);
  7.     });

显示效果如图 2 所示：

图 2 在必填元素后添加小红星标记

用户在“姓名”文本框中填写完信息后，将光标的焦点从“姓名”文本框中移出时，需要即时判断姓名是否符合验证规则。当光标的焦点从“邮箱”文本框移出时，也需要即时判断“邮箱”填写是否正确，因此需要给表单元素添加失去焦点事件，即 blur 事件。 jQuery 代码如下：

  1.  　　//为表单的元素添加失去焦点事件
  2.     $("form :input").blur(function () {
  3.         // ...省略代码
  4.     });

给表单里的必填元素添加验证功能的步骤如下：

（1）判断当前失去焦点的元素是“姓名”还是“邮箱”，然后分别处理。

（2）如果是“姓名”，判断元素的值的长度是否小于 6 ，如果小于 6 ，则用红色字体提醒用户输入不正确，反之，则用绿色提醒用户输入正确。

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

（4）将提醒信息追加到当前元素的父元素下面。

【注】：为了使用方便，当 text 文本框中的内容格式错误时，程序应尽量把所有提示信息都显示出来，而不是每次验证一种格式后只显示一个提示信息。 不过有时为了提高响应性，也会每次只显示一个提示信息。如：检查用户名是否重复，需要访问数据库。

如何提示，需要依据具体的业务需求来确定。

根据以上分析，可以写出如下 jQuery 代码：

  1. 　　　　 //为表单的必填文本框添加提示信息（选择form中的所有后代input元素）
  2.         $("form :input.required").each(function () {
  3.             //通过jquery api：$("HTML字符串") 创建jquery对象
  4.             var $required = $("<strong class='high'>*</strong>");
  5.             //添加到this对象的父级对象下
  6.             $(this).parent().append($required);
  7.         });
  8.  
  9.         //为表单元素添加失去焦点事件
  10.         $("form :input").blur(function(){
  11.             var $parent = $(this).parent();
  12.             //验证姓名
  13.             if($(this).is("#name")){
  14.                 var nameVal = $.trim(this.value); //原生js去空格方式：this.replace(/(^\s*)|(\s*$)/g, "")
  15.                 var regName = /[~#^$@%&!*()<>:;'"{}【】  ]/;
  16.                 if(nameVal == "" || nameVal.length < 6 || regName.test(nameVal)){
  17.                     var errorMsg = " 姓名非空，长度6位以上，不包含特殊字符！";
  18.                     //class='msg onError' 中间的空格是层叠样式的格式
  19.                     $parent.append("<span class='msg onError'>" + errorMsg + "</span>");
  20.                 }
  21.                 else{
  22.                     var okMsg=" 输入正确";
  23.                     $parent.find(".high").remove();
  24.                     $parent.append("<span class='msg onSuccess'>" + okMsg + "</span>");
  25.                 }
  26.             }
  27.             //验证邮箱
  28.             if($(this).is("#email")){
  29.                 var emailVal = $.trim(this.value);
  30.                 var regEmail = /.+@.+\.[a-zA-Z]{2,4}$/;
  31.                 if(emailVal== "" || (emailVal != "" && !regEmail.test(emailVal))){
  32.                     var errorMsg = " 请输入正确的E-Mail住址！";
  33.                     $parent.append("<span class='msg onError'>" + errorMsg + "</span>");
  34.                 }
  35.                 else{
  36.                     var okMsg=" 输入正确";
  37.                     $parent.find(".high").remove();
  38.                     $parent.append("<span class='msg onSuccess'>" + okMsg + "</span>");
  39.                 }
  40.             }
  41.         });

当连续几次输入错误的格式后，会出现如图 3 所示的效果

图 3 操作多次的提示效果

由于每次在元素失去焦点后，都会创建一个新的提醒元素，然后将它追加到文档中，最后就出现了多次的提醒信息。因此，需要在创建提醒元素之前，将当前元素以前的提醒元素都删除。可以使用 remove() 方法来完成，代码如下：

  1. //为表单元素添加失去焦点事件
  2. $("form :input").blur(function(){
  3.     var $parent = $(this).parent();
  4.     $parent.find(".msg").remove(); //删除以前的提醒元素（find()：查找匹配元素集中元素的所有匹配元素）
  5.     // ...省略代码
  6. });

显示效果如图 4 所示。

图 4 正确的效果

当鼠标在表单元素中多次失去焦点时，都可以提醒用户填写是否正确。但是，如果用户无视错误提醒，执意要单击“提交”按钮时，为了使表单填写准确，在表单提交之前，需要对表单的必须填写元素进行一次整体的验证。可以直接用 trigger() 方法来触发blur事件，从而达到验证效果。如果填写错误，就会以红色提醒用户；如果姓名和邮箱都不符合规则，那么就有两处错误，即有两个 class 为 “onError” 的元素，因此可以根据 class 为 “onError” 元素的长度来判断是否可以提交。如果长度为 0 ，即 true ，说明已经可以提交了；如果长度大于0，即 false ，说明有错误，需要阻止表单提交。阻止表单提交可以直接用 “return false” 语句。

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

  1. //点击重置按钮时，通过trigger()来触发文本框的失去焦点事件
  2. $("#send").click(function(){
  3.     //trigger 事件执行完后，浏览器会为submit按钮获得焦点
  4.     $("form .required:input").trigger("blur");
  5.     var numError = $("form .onError").length;
  6.     if(numError){
  7.         return false;
  8.     }
  9.     alert("注册成功！");
  10. });

显示效果如图 5 所示。

图 5 验证通过

用户也许会提出：为什么每次都要等字段元素失去焦点后，才提醒是否正确？如果输入时就可以提醒，这样就可以更加即时了。

为了达到用户提出的需求，需要给表单元素绑定 keyup 事件和 focus 事件，keyup 事件能在用户每次松开按键时触发，实现即时提醒；focus 事件能在元素得到焦点的时候触发，也可以实现即时提醒。

代码如下：

  1. $("form :input").blur(function(){
  2.     //失去焦点处理函数
  3.     //代码省略...
  4. }).keyup(function(){
  5.     //triggerHandler 防止事件执行完后，浏览器自动为标签获得焦点
  6.     $(this).triggerHandler("blur");
  7. }).focus(function(){
  8.     $(this).triggerHandler("blur");
  9. });

这样当用户将光标定位到文本框上和改变文本框的值时，表单就会即时提醒用户填写是否正确，从而符合了用户的需求。

在前面的章节已经提过，trigger（“blur”）不仅会触发为元素绑定的blur事件，也会触发浏览器默认的 blur 事件，即不能讲光标定位到文本框上。而 triggerHandler（“blur”）只会触发为元素绑定的 blur 事件，而不触发浏览器默认的 blur 事件。

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

【注】：客户端的验证仅用于提升用户的操作体验，而服务器仍需对用户输入的数据的合法性进行校验。对于禁用了脚本的用户和用户自制的网页提交操作，必须在服务器端验证。

完整代码：

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <meta http-equiv="content-type" content="text/html; charset=utf-8">
  5.     <title>jQueryStudy</title>
  6.     <style>
  7.      .int{ height: 30px; text-align: left; width: 600px; }
  8.      label{ width: 200px; margin-left: 20px; }
  9.      .high{ color: red; }
  10.      .msg{ font-size: 13px; }
  11.      .onError{ color: red; }
  12.      .onSuccess{ color: green; }
  13.     </style>
  14.     <script src="http://code.jquery.com/jquery-latest.js"></script>
  15. </head>
  16. <body>
  17.     <form method="post" action="#">
  18.         <div class="int">
  19.             <label for="name">姓名：</label>
  20.             <input type="text" id="name" class="required" />
  21.         </div>
  22.         <div class="int">
  23.             <label for="email">邮箱：</label>
  24.             <input type="text" id="email" class="required" />
  25.         </div>
  26.         <div class="int">
  27.             <label for="address">住址：</label>
  28.             <input type="text" id="address" />
  29.         </div>
  30.         <div class="int">
  31.             <input type="submit" value="提交" id="send" style="margin-left: 70px;" />
  32.             <input type="reset" value="重置" id="res" />
  33.         </div>
  34.     </form>
  35.     <script>
  36.         //为表单的必填文本框添加提示信息（选择form中的所有后代input元素）
  37.         $("form :input.required").each(function () {
  38.             //通过jquery api：$("HTML字符串") 创建jquery对象
  39.             var $required = $("<strong class='high'>*</strong>");
  40.             //添加到this对象的父级对象下
  41.             $(this).parent().append($required);
  42.         });
  43.  
  44.         //为表单元素添加失去焦点事件
  45.         $("form :input").blur(function(){
  46.             var $parent = $(this).parent();
  47.             $parent.find(".msg").remove(); //删除以前的提醒元素（find()：查找匹配元素集中元素的所有匹配元素）
  48.             //验证姓名
  49.             if($(this).is("#name")){
  50.                 var nameVal = $.trim(this.value); //原生js去空格方式：this.replace(/(^\s*)|(\s*$)/g, "")
  51.                 var regName = /[~#^$@%&!*()<>:;'"{}【】  ]/;
  52.                 if(nameVal == "" || nameVal.length < 6 || regName.test(nameVal)){
  53.                     var errorMsg = " 姓名非空，长度6位以上，不包含特殊字符！";
  54.                     //class='msg onError' 中间的空格是层叠样式的格式
  55.                     $parent.append("<span class='msg onError'>" + errorMsg + "</span>");
  56.                 }
  57.                 else{
  58.                     var okMsg=" 输入正确";
  59.                     $parent.find(".high").remove();
  60.                     $parent.append("<span class='msg onSuccess'>" + okMsg + "</span>");
  61.                 }
  62.             }
  63.             //验证邮箱
  64.             if($(this).is("#email")){
  65.                 var emailVal = $.trim(this.value);
  66.                 var regEmail = /.+@.+\.[a-zA-Z]{2,4}$/;
  67.                 if(emailVal== "" || (emailVal != "" && !regEmail.test(emailVal))){
  68.                     var errorMsg = " 请输入正确的E-Mail住址！";
  69.                     $parent.append("<span class='msg onError'>" + errorMsg + "</span>");
  70.                 }
  71.                 else{
  72.                     var okMsg=" 输入正确";
  73.                     $parent.find(".high").remove();
  74.                     $parent.append("<span class='msg onSuccess'>" + okMsg + "</span>");
  75.                 }
  76.             }
  77.         }).keyup(function(){
  78.             //triggerHandler 防止事件执行完后，浏览器自动为标签获得焦点
  79.             $(this).triggerHandler("blur");
  80.         }).focus(function(){
  81.             $(this).triggerHandler("blur");
  82.         });
  83.  
  84.         //点击重置按钮时，通过trigger()来触发文本框的失去焦点事件
  85.         $("#send").click(function(){
  86.             //trigger 事件执行完后，浏览器会为submit按钮获得焦点
  87.             $("form .required:input").trigger("blur");
  88.             var numError = $("form .onError").length;
  89.             if(numError){
  90.                 return false;
  91.             }
  92.             alert("注册成功！");
  93.         });
  94.     </script>
  95. </body>
  96. </html>

用 jQuery 实现表单验证（摘抄）——选自《锋利的jQuery》（第2版）第5章的例题 5.1.5 表单验证的更多相关文章

  1. php验证复选框有效性的示例

    本文介绍一个简单的php通过代码验证复选框值的有效性,有需要的可以参考一下 验证复选框的php代码,如下: 复制代码代码如下: <?php   /**   * 在php中验证复选框的有效性  * ...

  2. 【锋利的jQuery】表单验证插件踩坑

    和前几篇博文提到的一样,由于版本原因,[锋利的jQuery]表单验证插件部分又出现照着敲不出效果的情况. 书中的使用方法: 1. 引入jquery源文件, 2. 引入表单验证插件js文件, 3. 在f ...

  3. 微信小程序——表单验证插件WxValidate的二次封装（终极版）

    微信小程序表单验证前面的两篇文章做的效果总感觉都有点不太友好,第一篇里的效果是将错误信息通过对话框形式弹出来,这种形式在web形式下早已经淘汰了:第二篇是一次性全部显示所有的错误,然后3秒后自动消失, ...

  4. ASP.NET MVC异步验证是如何工作的03,jquery.validate.unobtrusive.js是如何工作的

    在上一篇"ASP.NET MVC异步验证是如何工作的02,异步验证表单元素的创建"中了解了ASP.NET异步验证是如何创建表单元素的,本篇体验jquery.validate.uno ...

  5. ASP.NET MVC异步验证是如何工作的01,jQuery的验证方式、错误信息提示、validate方法的背后

    ASP.NET MVC借助jQuery的验证机制,提供了一套从客户端到服务端异步验证的解决方案,通常情况下,用起来相当方便.但面对一些相对特殊的情况,可能会遇到验证失效的场景,比如在使用ajax动态异 ...

  6. jquery实现下拉框多选

    一.说明 本文是利用EasyUI实现下拉框多选功能,在ComboxTree其原有的基础上对样式进行了改进,样式表已上传demo,代码如下 二.代码 <!DOCTYPE html PUBLIC & ...

  7. jquery数组之存放checkbox全选值示例代码

    使用jquery数组可以存放checkbox全选值,下面有个不错的示例,感兴趣的朋友可以参考下. 复制代码代码如下: <input type="checkbox" id=&q ...

  8. 雷林鹏分享：jQuery EasyUI 数据网格 - 添加复选框

    jQuery EasyUI 数据网格 - 添加复选框 本实例演示如何放置一个复选框列到数据网格(DataGrid).通过复选框,用户将可以选择 选中/取消选中 网格行数据. 为了添加一个复选框列,我们 ...

  9. Jquery全选系列操作（锋利的jQuery）

    Jquery全选系列操作(锋利的jQuery) <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml" ...

随机推荐

  1. Jsp入门EL表达式_学习笔记

    1.EL表达式 [1] 简介 > JSP表达式 <%= %> 用于向页面中输出一个对象. > 到JSP2.0时,在我们的页面中不允许出现 JSP表达式和 脚本片段. > ...

  2. java实现银行管理系统

    Bank类 package First; import java.util.TreeSet; //银行类public class Bank {        private String Bankna ...

  3. OpenCV 腐蚀与膨胀(Eroding and Dilating)

    #include "opencv2/imgproc/imgproc.hpp" #include "opencv2/highgui/highgui.hpp" #i ...

  4. [Redis] Redis哨兵模式部署 - zz胖的博客

    1. 部署Redis集群 redis的安装及配置参考[redis部署] 本文以创建一主二从的集群为例. 1.1 部署与配置 先创建sentinel目录,在该目录下创建8000,8001,8002三个以 ...

  5. caffe之mac下环境搭建

    参考 http://www.linuxidc.com/Linux/2016-09/135026.html 1. 安装brew,也叫homebrew,mac下类似于ubuntu的apt-get功能 cu ...

  6. 在angular中自定义筛选管道

    Angular 内置了一些管道,比如 DatePipe.UpperCasePipe.LowerCasePipe.CurrencyPipe 和 PercentPipe. 它们全都可以直接用在任何模板中; ...

  7. tomcat一闪而过

    JAVA_HOME should point to a JDK not a JRE |vista tomcat 有的朋友在启动Tomcat的时候会出现问题. 1例如: 手动点击startup.bat ...

  8. AtomicBoolean介绍

    网上资料: 使用 AtomicBoolean 高效并发处理 "只初始化一次" 的功能要求: 1 privatestatic AtomicBoolean initialized = ...

  9. <JZOJ4269>挑竹签

    emm一开始将++cnt敲成cnt++ 就很委屈 一个拓扑排序而已 Description 挑竹签——小时候的游戏 夏夜,早苗和诹访子在月光下玩起了挑竹签这一经典的游戏.挑竹签,就是在桌上摆上一把竹签 ...

  10. [洛谷P1495] 曹冲养猪 (中国剩余定理模板)

    中国剩余定理(朴素的)用来解线性同余方程组: x≡a[1] (mod m[1]) x≡a[2] (mod m[2]) ...... x≡a[n] (mod m[n]) 定义ms=m[1]*m[2]*. ...