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

时间  2019-11-11
标签 jquery 实现 表单 验证 摘抄 选自 锋利的jQuery 例题 5.1.5 栏目 JQuery 繁體版
原文   原文链接

5.1.5 表单验证html

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

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

复制代码 
<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <title>jQueryStudy</title>
    <style>
     .int{ height: 30px; text-align: left; width: 600px; }
     label{ width: 200px; margin-left: 20px; }
     .high{ color: red; }
     .msg{ font-size: 13px; }
     .onError{ color: red; }
     .onSuccess{ color: green; }
    </style>
    <script src="http://code.jquery.com/jquery-latest.js"></script>    
</head>
<body>
    <form method="post" action="#">
        <div class="int">
            <label for="name">姓名：</label>
            <input type="text" id="name" class="required" />
        </div>
        <div class="int">
            <label for="email">邮箱：</label>
            <input type="text" id="email" class="required" />
        </div>
        <div class="int">
            <label for="address">住址：</label>
            <input type="text" id="address" />
        </div>
        <div class="int">
            <input type="submit" value="提交" id="send" style="margin-left: 70px;" />
            <input type="reset" value="重置" id="res" />
        </div>
    </form>    
</body>
</html>
复制代码

       显示效果如图 1 所示：api

            

                             图 1 表单初始化浏览器

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

复制代码 
　　 //为表单的必填文本框添加提示信息（选择form中的全部后代input元素）
    $("form :input.required").each(function () {
        //经过jquery api：$("HTML字符串") 建立jquery对象
        var $required = $("<strong class='high'>*</strong>");
        //添加到this对象的父级对象下
        $(this).parent().append($required);
    });
复制代码

       显示效果如图 2 所示：app

           

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

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

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

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

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

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

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

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

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

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

       根据以上分析，能够写出以下 jQuery 代码：

复制代码 
　　　　 //为表单的必填文本框添加提示信息（选择form中的全部后代input元素）
        $("form :input.required").each(function () {
            //经过jquery api：$("HTML字符串") 建立jquery对象
            var $required = $("<strong class='high'>*</strong>");
            //添加到this对象的父级对象下
            $(this).parent().append($required);
        });

        //为表单元素添加失去焦点事件
        $("form :input").blur(function(){
            var $parent = $(this).parent();
            //验证姓名
            if($(this).is("#name")){
                var nameVal = $.trim(this.value); //原生js去空格方式：this.replace(/(^\s*)|(\s*$)/g, "")
                var regName = /[~#^$@%&!*()<>:;'"{}【】  ]/;
                if(nameVal == "" || nameVal.length < 6 || regName.test(nameVal)){
                    var errorMsg = " 姓名非空，长度6位以上，不包含特殊字符！";
                    //class='msg onError' 中间的空格是层叠样式的格式
                    $parent.append("<span class='msg onError'>" + errorMsg + "</span>");
                }
                else{
                    var okMsg=" 输入正确";
                    $parent.find(".high").remove();
                    $parent.append("<span class='msg onSuccess'>" + okMsg + "</span>");
                }
            }
            //验证邮箱
            if($(this).is("#email")){
                var emailVal = $.trim(this.value);
                var regEmail = /.+@.+\.[a-zA-Z]{2,4}$/;
                if(emailVal== "" || (emailVal != "" && !regEmail.test(emailVal))){
                    var errorMsg = " 请输入正确的E-Mail住址！";
                    $parent.append("<span class='msg onError'>" + errorMsg + "</span>");
                }
                else{
                    var okMsg=" 输入正确";
                    $parent.find(".high").remove();
                    $parent.append("<span class='msg onSuccess'>" + okMsg + "</span>");
                }
            }
        });
复制代码

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

         

                                    图 3 操做屡次的提示效果

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

复制代码 
//为表单元素添加失去焦点事件
$("form :input").blur(function(){ 
    var $parent = $(this).parent();
    $parent.find(".msg").remove(); //删除之前的提醒元素（find()：查找匹配元素集中元素的全部匹配元素）
    // ...省略代码
});
复制代码

      显示效果如图 4 所示。

        

                               图 4 正确的效果

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

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

复制代码 
//点击重置按钮时，经过trigger()来触发文本框的失去焦点事件
$("#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 事件。      

      至此，表单验证过程就所有完成。读者能够根据本身的实际需求修改验证规则。 

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

完整代码：

复制代码 
<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <title>jQueryStudy</title>
    <style>
     .int{ height: 30px; text-align: left; width: 600px; }
     label{ width: 200px; margin-left: 20px; }
     .high{ color: red; }
     .msg{ font-size: 13px; }
     .onError{ color: red; }
     .onSuccess{ color: green; }
    </style>
    <script src="http://code.jquery.com/jquery-latest.js"></script>    
</head>
<body>
    <form method="post" action="#">
        <div class="int">
            <label for="name">姓名：</label>
            <input type="text" id="name" class="required" />
        </div>
        <div class="int">
            <label for="email">邮箱：</label>
            <input type="text" id="email" class="required" />
        </div>
        <div class="int">
            <label for="address">住址：</label>
            <input type="text" id="address" />
        </div>
        <div class="int">
            <input type="submit" value="提交" id="send" style="margin-left: 70px;" />
            <input type="reset" value="重置" id="res" />
        </div>
    </form>
    <script>
        //为表单的必填文本框添加提示信息（选择form中的全部后代input元素）
        $("form :input.required").each(function () {
            //经过jquery api：$("HTML字符串") 建立jquery对象
            var $required = $("<strong class='high'>*</strong>");
            //添加到this对象的父级对象下
            $(this).parent().append($required);
        });

        //为表单元素添加失去焦点事件
        $("form :input").blur(function(){
            var $parent = $(this).parent();
            $parent.find(".msg").remove(); //删除之前的提醒元素（find()：查找匹配元素集中元素的全部匹配元素）
            //验证姓名
            if($(this).is("#name")){
                var nameVal = $.trim(this.value); //原生js去空格方式：this.replace(/(^\s*)|(\s*$)/g, "")
                var regName = /[~#^$@%&!*()<>:;'"{}【】  ]/;
                if(nameVal == "" || nameVal.length < 6 || regName.test(nameVal)){
                    var errorMsg = " 姓名非空，长度6位以上，不包含特殊字符！";
                    //class='msg onError' 中间的空格是层叠样式的格式
                    $parent.append("<span class='msg onError'>" + errorMsg + "</span>");
                }
                else{
                    var okMsg=" 输入正确";
                    $parent.find(".high").remove();
                    $parent.append("<span class='msg onSuccess'>" + okMsg + "</span>");
                }
            }
            //验证邮箱
            if($(this).is("#email")){
                var emailVal = $.trim(this.value);
                var regEmail = /.+@.+\.[a-zA-Z]{2,4}$/;
                if(emailVal== "" || (emailVal != "" && !regEmail.test(emailVal))){
                    var errorMsg = " 请输入正确的E-Mail住址！";
                    $parent.append("<span class='msg onError'>" + errorMsg + "</span>");
                }
                else{
                    var okMsg=" 输入正确";
                    $parent.find(".high").remove();
                    $parent.append("<span class='msg onSuccess'>" + okMsg + "</span>");
                }
            }
        }).keyup(function(){
            //triggerHandler 防止事件执行完后，浏览器自动为标签得到焦点
            $(this).triggerHandler("blur"); 
        }).focus(function(){
            $(this).triggerHandler("blur");
        });
        
        //点击重置按钮时，经过trigger()来触发文本框的失去焦点事件
        $("#send").click(function(){
            //trigger 事件执行完后，浏览器会为submit按钮得到焦点
            $("form .required:input").trigger("blur"); 
            var numError = $("form .onError").length;
            if(numError){
                return false;
            }
            alert("注册成功！");
        });
    </script>
</body>
</html>
相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程