JQuery验证插件validation的使用

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

下载：

下载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>

显示效果：

自定义校验规则：

自定义校验规则我们使用需要使用$.validator.addMethod完成。简单实例如下：
http://click.aliyun.com/m/23434/

JQuery验证插件validation的使用

猜你喜欢