JQuery 表单校验插件 validate 使用纪录-白红宇

JQuery 表单校验插件 validate 使用纪录

阅读量：5967 次

发布时间：2019-06-19

本文共 3882 字，大约阅读时间需要 12 分钟。

JS诞生其中一个目的就是将，服务器端的校验在客户端提前完成，以避免用户提交数据后，后台校验报错的糟糕用户体验。

基于JQuery库的有很多优秀的插件，其中对于浏览器端表单进行验证的基本功能也有插件对应， validate插件便是一个。

官网地址： http://jqueryvalidation.org/

官网文档：http://jqueryvalidation.org/documentation/

下面网址是开发者提供的demo，代码可下载，可以给大家提供参考：

http://jquery.bassistance.de/validate/demo/index.html

本文要介绍validate插件使用方法，与特殊功能

校验规则设置

以 required规则为例子说明，有以下两个方法，属性|class+valdate接口或者 validate 接口设置规则参数。

相比方法1，方法2代码更加集中，逻辑清晰，方便维护。且方法一种属性 required与HTML5冲突了，放在class中会污染class的纯净性。

　　方法1，添加required属性，

      Your comment (required)

或者添加 required 到class中

      Your comment (required)

然后找到form DOM调用validate接口，完成表单规则设置动作：

$("#commentForm").validate();

　　方法2，直接使用validate接口设置规则：

$(".selector").validate({  rules: {    // simple rule, converted to {required:true}    name: "required",    // compound rule    email: {      required: true,      email: true    }  }});

错误提示区域的样式自定义

插件默认提供的错误提示是，在校验控件的右侧给予一个红色字符串显示，如果希望给错误提示语，换个位置和添加样式，就需要使用插件提供的接口了。

validate 提供 errorPlacement 接口，可以定制错误提示的样式和位置。 http://jqueryvalidation.org/?s

本文给出，将错误提示语放在报错控件下方，并添加错误提示边框和背景色的方法：

新增validate扩展JS文件 formValidateExt.js：

$.validator.setDefaults({    errorPlacement: function (error, element) {        /* 生成显示错误提示HTML DOM */        var tipHTML = "
       
";        var tipObj = $(tipHTML);        error.appendTo(tipObj);                tipObj.insertAfter(element);                var offset = element.offset();                var top = offset.top + element.height();        var left = offset.left;                console.log("top="+top)        console.log("height="+element.height())        console.log("left="+left)                tipObj.css("top", top);        tipObj.css("left", left);    }});//手机号码验证       jQuery.validator.addMethod("isMobile", function(value, element) {           var length = value.length;       var mobile = /^(((13[0-9])|(15[0-9])|(18[0-9])|(170))\d{8})$/;       return this.optional(element) || (length == 11 && mobile.test(value));       }, "请正确填写您的手机号码");            //电话号码验证       jQuery.validator.addMethod("isTel", function(value, element) {           var tel = /^\d{3,4}-?\d{7,9}$/;    //电话号码格式010-12345678       return this.optional(element) || (tel.test(value));       }, "请正确填写您的电话号码");

　　新增validate扩展css文件 formValidateExt.css：

div.errorLabelWraper{
        position: absolute;    display:inline-block;    padding-left: 5px;    line-height: 30px;    border:2px solid #A9A9A9;    background-color: #FEFEFE;    border-radius:5px;    -webkit-border-radius: 5px;    -moz-border-radius: 5px;}label.error{
        color: #FF0000;}

　　HTML示例文件：

     
                            
            
               
                    
         Gender            
                                         Male                        
                                         Female                    
        
                
                    
         Spam            
                                         Spam via E-Mail                        
                                         Spam via Phone                        
                                         Spam via Mail                    
        
                
                    Please select a jungleSelect noun
                    
                
                    phoneNum                    
                    
        
          address

　　服务器端校验

　　对于一些校验，不能够在浏览器端实现的，例如手机号重复，姓名重复等，需要后台检索数据库给结果的情况，

validate插件提供了 remote规则，可以实现远程校验：例如上例中phoneNum添加的规则， “checkSame.php”是后台的校验文件路径：

remote: "checkSame.php"

下面给出此文件后台实现， true表示校验通过， false表示不通过：

注释：上例中，还有一个省市联动的JQuery插件（js/jquery.cityselect.js），

可以完成表单中选择省份和城市的功能，见 http://www.helloweba.com/view-blog-188.html

转载地址：http://ogmax.baihongyu.com/

你可能感兴趣的文章