JQuery.Validate学习笔记

JQuery Validate 插件为表单提供了强大的验证功能，让客户端表单验证变得更简单，同时提供了大量的定制选项，满足应用程序各种需求。该插件捆绑了一套有用的验证方法，包括 URL 和电子邮件验证，同时提供了一个用来编写用户自定义方法的 API。

使用JQuery Validate之前首先引入以下两个文件：jquery-1.11.1.js 和 jquery.validate.js。下载链接：https://jqueryvalidation.org。

菜鸟教程提供的 1.14.0 版本下载地址：http://static.runoob.com/download/jquery-validation-1.14.0.zip

直接上实例，html代码如下：

 <div id="form_con">

        <form class="cmxform" id="myform" method="post" action="">

            <table cellspacing="0" cellpadding="0">

                <tbody>

                    <tr>

                        <td>用户名</td>

                        <td><input type="text" id="username" name="username" class="required" /></td>

                        <td></td>

                    </tr>

                    <tr>

                        <td>密码</td>

                        <td><input id="password" type="password" name="firstpwd" /></td>

                        <td></td>

                    </tr>

                    <tr>

                        <td>验证密码</td>

                        <td><input type="password" name="secondpwd" /></td>

                        <td></td>

                    </tr>

                    <tr>

                        <td>性别</td>

                        <td><input id="sex" type="radio" name="sex" />男<input type="radio" name="sex" />女</td>

                        <td></td>

                    </tr>

                    <tr>

                        <td>年龄</td>

                        <td><input type="text" name="age" /></td>

                        <td></td>

                    </tr>

                    <tr>

                        <td>邮箱</td>

                        <td><input type="text" name="email" /></td>

                        <td></td>

                    </tr>

                    <tr>

                        <td>时间</td>

                        <td><input type="date" name="time" /></td>

                        <td></td>

                    </tr>

                    <tr>

                        <td>个人网页</td>

                        <td><input type="text" name="purl" /></td>

                        <td></td>

                    </tr>

                    <tr>

                        <td>电话</td>

                        <td><input type="text" name="telephone" /></td>

                        <td></td>

                    </tr>

                    <tr>

                        <td>附件</td>

                        <td><input type="file" name="afile"/></td>

                        <td></td>

                    </tr>

                    <tr><td colspan="3" ><input type="submit" name="submit" value="提交" /><button>重置</button></td></tr>

                </tbody>          

            </table>

        </form>

  </div>  

新建一个validated.js文件用于验证以上表单数据：

$(function(){
     var validator = $("#myform").validate({

        debug: true,       //调试模式取消submit的默认提交功能

        errorClass: "haha", //默认为错误的样式类为：error

        focusInvalid: false, 

        focusCleanup: true,

        onkeyup: false,

        errorElement: "span",  

        submitHandler: function(form) {   //表单提交句柄,为一回调函数，带一个参数：form

            alert("提交表单");

            form.submit(function()
            {
                return false;
            });   //提交表单

        },

        rules: {           //定义验证规则,其中属性名为表单的name属性

            username: {

                required: true,

                minlength: 2,

                   remote: {
                    url: "js/test.txt",     //后台处理程序
                    type: "get",               //数据发送方式
                    //dataType: "text",           //接受数据格式
                    data: {                     //要传递的数据
                        username: function() {
                            return $("#username").val();
                         }
                    }
                }
                //response.getwrite().write("true")

            },

            firstpwd: {

                required: true,

                //minlength: 6

                rangelength: [6, 8]

            },

            secondpwd: {

                required: true,

                equalTo: "#password"

            },

            sex: {

                required: true

            },

            age: {

                required: true,

                range: [0, 120]

            },

            email: {

                required: true,

                email: true

            },

            telephone:{

                required:true,

                isTelephone:true

            },

            purl: {

                required: true,

                url: true

            },

            afile: {

                required: true,

                accept: "xls,doc,rar,zip"

            }

        },

        messages: {       //自定义验证消息

            username: {

                required: "用户名是必需的！",

                minlength: $.validator.format("用户名至少要{0}个字符！"),

                remote: $.validator.format("{0}已经被占用")

            },

            firstpwd: {

                required: "密码是必需的！",

                rangelength:  $.validator.format("密码要在{0}-{1}个字符之间！")

            },

            secondpwd: {

                required: "密码验证是必需的！",

                equalTo: "密码验证需要与密码一致"

            },

            sex: {

                required: "性别是必需的"

            },

            age: {

                required: "年龄是必需的",

                range: "年龄必须介于{0}-{1}之间"

            },

            email: {

                required: "邮箱是必需的！",

                email: "请输入正确的邮箱地址（例如 myemail@163.com）"

            },

            telephone:{

                required: "手机号码是必需的！"

            },

            purl: {

                required: "个人主页是必需的",

                url: "请输入正确的url格式,如 http://www.domainname.com"

            },

            afile: {

                required: "附件是必需的！",

                accept: "只接收xls,doc,rar,zip文件"

            }

        },

        errorPlacement: function(error, element) {  //验证消息放置的地方

            error.appendTo(element.parent("td").next("td"));

        },

        highlight: function(element, errorClass) {  //针对验证的表单设置高亮

            $(element).addClass(errorClass);

        },

        success: function(label) {

            label.addClass("valid").text("Ok!")

        }

        /*,

        errorContainer: "#error_con",               //验证消息集中放置的容器

        errorLabelContainer: "#error_con ul",       //存放消息无序列表的容器

        wrapper: "li",                              //将验证消息用无序列表包围

        validClass: "valid",                        //通过验证的样式类

        errorElement: "span",                         //验证标签的名称，默认为：label

        success: "valid"                            //验证通过的样式类

        */

    });

    // 手机号码验证
    jQuery.validator.addMethod("isTelephone", function(value, element) {
        var tel = /^1[358][0-9]{9}$/;
        return tel.test(value);
    }, "请正确填写您的手机号码");

    $("button").click(function() {

        validator.resetForm();

    });

});

注意：

1.username属性是通过远程验证的，通过remote连接后台程序进行验证。代码如下：

remote: {
                    url: "js/test.txt",     //后台处理程序
                    type: "get",               //数据发送方式
                    //dataType: "text",           //接受数据格式
                    data: {                     //要传递的数据
                        username: function() {
                            return $("#username").val();
                         }
                    }

2.telephone元素的验证是自定义添加的方法，代码如下：

 // 手机号码验证
    jQuery.validator.addMethod("isTelephone", function(value, element) {
        var tel = /^1[358][0-9]{9}$/;
        return tel.test(value);
    }, "请正确填写您的手机号码");

addmethod里面有三个参数：name   function   message。 方法名称 调用方法  提示信息。

3.设置提示信息的地方：

 errorPlacement: function(error, element) {  //验证消息放置的地方

            error.appendTo(element.parent("td").next("td"));

        },

可将常用的验证方法收集好，写成一个js文件，一般写在 additional-methods.js 文件中，方便以后自己代码调用。未完待续。。。