JQuery验证插件validation的使用-CSDN博客

下载：

下载validatation插件地址：jqueryvalidation.org/；这里需要注意的是validation验证插件有依赖于JQuery的，所以连同JQuery也要一起放置到项目中。

使用：

简单配置：

使用的时候很简单，首先如果我们使用环境为中文，可以自定义中文提示信息（也可以另存为文件）：如下代码：

/**
 * Created by Administrator on 2017/6/14.
 */
(function( factory ) {
    if ( typeof define === "function" && define.amd ) {
        define( ["jquery", "../jquery.validate"], factory );
    } else {
        factory( jQuery );
    }
}(function( $ ) {

    /*
     * Translated default messages for the jQuery validation plugin.
     * Locale: ZH (Chinese, 中文 (Zhōngwén), 汉语, 漢語)
     */
    $.extend($.validator.messages, {
        required: "这是必填字段",
        remote: "请修正此字段",
        email: "请输入有效的电子邮件地址",
        url: "请输入有效的网址",
        date: "请输入有效的日期",
        dateISO: "请输入有效的日期 (YYYY-MM-DD)",
        number: "请输入有效的数字",
        digits: "只能输入数字",
        creditcard: "请输入有效的信用卡号码",
        equalTo: "你的输入不相同",
        extension: "请输入有效的后缀",
        maxlength: $.validator.format("最多可以输入 {0} 个字符"),
        minlength: $.validator.format("最少要输入 {0} 个字符"),
        rangelength: $.validator.format("请输入长度在 {0} 到 {1} 之间的字符串"),
        range: $.validator.format("请输入范围在 {0} 到 {1} 之间的数值"),
        max: $.validator.format("请输入不大于 {0} 的数值"),
        min: $.validator.format("请输入不小于 {0} 的数值")
    });

}));

入门使用：

代码如下:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>validate</title>
</head>
<body>
<form id="formID" action="">
    <legend>用户注册</legend>
    <label for="username">用户名:</label>
    <input type="text" name="username" id="username">
   <p>
       <label for="password">密码：</label>
       <input type="password" name="password" id="password">
   </p>
   <p>
       <input type="submit" value="注册">
   </p>
</form>
</body>
<script src="jquery.js" type="application/javascript"></script>
<script src="validate.js" type="application/javascript"></script>
<script src="validate_cn.js" type="application/javascript"></script>
<script>
    $(function () {
        $('#formID').validate({
            debug:true,
            rules:{
                username:{
                    required:true,
                    minlength:2,
                    maxlength:10
                },
                password:{
                    required:true,
                    minlength:2,
                    maxlength:12
                }
            }
        })
    })
</script>
</html>

显示效果：

43453bf8ec45143dbfcf63482693685108e6ac3d

自定义校验规则：

自定义校验规则我们使用需要使用 $.validator.addMethod 完成。简单实例如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>validate</title>
</head>
<body>
<form id="formID" action="">
    <legend>用户注册</legend>
    <label for="username">用户名:</label>
    <input type="text" name="username" id="username">
   <p>
       <label for="password">密码：</label>
       <input type="password" name="password" id="password">
   </p>
   <p>
       <input type="submit" value="注册">
   </p>
</form>
</body>
<script src="jquery.js" type="application/javascript"></script>
<script src="validate.js" type="application/javascript"></script>
<script src="validate_cn.js" type="application/javascript"></script>
<script>
    $(function () {
        $('#formID').validate({
            debug:true,
            rules:{
                username:{
                    required:true,
                    phone:true

                },
                password:{
                    required:true,
                    minlength:2,
                    maxlength:12
                }
            }
        }),
            /*
            *自定义校验规则
            *phone  要验证规则名称
            * func  校验处理
            * value 获取输入的值
            * Element  当前的文本框
            *params 校验参数
            * */
        $.validator.addMethod('phone',function (value,element,params) {
            /*手机的正则匹配*/
            var phone =/^1[3578]\d{9}$/;
            return this.optional(element)||(phone.test(value));
        },'请填写正确的手机号码！')
    })
</script>
</html>

远程校验：

remote用法：
1、remote使用get请求访问服务器
访问服务器后返回校验结果：正常的时候返回true，检验不通过的时候返回错误提示信息
remote:url
2、remote使用post请求访问服务器
remote:{
url:请求地址
type：请求类型post/get
data:{
需要传递的参数
}
}

<script>
    $(function () {
        $('#formID').validate({
            debug:true,
            rules:{
                username:{
                    required:true,
                    /*远程的校验*/
                    /*remote:"check.php"*/
                    remote:{
                        url:"check.php",
                        type:"post",
                        data:{
                            xxx:xxx
                        }
                    }
                },
                password:{
                    required:true,
                    minlength:2,
                    maxlength:12
                }
            }
        }),

radio、checkbox、select的验证

.radio的required表示必须选中一个

<input  type="radio" id="gender_male" value="m" name="gender" class="{required:true}" />
<input  type="radio" id="gender_female" value="f" name="gender"/>

checkbox的required表示必须选中
<input type="checkbox" class="checkbox" id="agree" name="agree" class="{required:true}" />

checkbox的minlength表示必须选中的最小个数,maxlength表示最大的选中个数,rangelength:[2,3]表示选中个数区间
<input type="checkbox" id="spam_email" value="email" name="spam[]" class="{required:true, minlength:2}" />
<input type="checkbox" id="spam_phone" value="phone" name="spam[]" />
<input type="checkbox" id="spam_mail" value="mail" name="spam[]" />

select的required表示选中的value不能为空
<select id="jungle" name="jungle" title="Please select something!" class="{required:true}">
    <option value=""></option>
    <option value="1">Buga</option>
    <option value="2">Baga</option>
    <option value="3">Oi</option>
</select>
 
select的minlength表示选中的最小个数（可多选的select）,maxlength表示最大的选中个 数,rangelength:[2,3]表示选中个数区间
<select id="fruit" name="fruit" title="Please select at least two fruits" class="{required:true, minlength:2}" multiple="multiple">
    <option value="b">Banana</option>
    <option value="a">Apple</option>
    <option value="p">Peach</option>
    <option value="t">Turtle</option>
</select>