Jquery插件validate使用一则

jquery.validate是一个基于jquery的非常优秀的验证框架，可以通过它迅速验证一些常见的输入，并且可以自己扩充自己的验证方法。

主要功能有：

验证url，email，number，length，require等。

默认校验规则：

(1)required:true               必输字段
(2)remote:"check.php"          使用ajax方法调用check.php验证输入值
(3)email:true                  必须输入正确格式的电子邮件
(4)url:true                    必须输入正确格式的网址
(5)date:true                   必须输入正确格式的日期日期校验ie6出错，慎用
(6)dateISO:true                必须输入正确格式的日期(ISO)，例如：2009-06-23，1998/01/22 只验证格式，不验证有效性
(7)number:true                 必须输入合法的数字(负数，小数)
(8)digits:true                 必须输入整数
(9)creditcard:                 必须输入合法的信用卡号
(10)equalTo:"#field"           输入值必须和#field相同
(11)accept:                    输入拥有合法后缀名的字符串（上传文件的后缀）
(12)maxlength:5                输入长度最多是5的字符串(汉字算一个字符)
(13)minlength:10               输入长度最小是10的字符串(汉字算一个字符)
(14)rangelength:[5,10]         输入长度必须介于 5 和 10 之间的字符串")(汉字算一个字符)
(15)range:[5,10]               输入值必须介于 5 和 10 之间
(16)max:5                      输入值不能大于5
(17)min:10                     输入值不能小于10

validate安装：

下载validation，官网地址 http://jqueryvalidation.org/ 获得最新版本的js文件。

导入js库：

Html结构例如

<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8">

        <title>jQuery validation plug-in - main demo</title>

        <script type="text/javascript" src="jquery-1.7.2.js">

        </script>

        <script type="text/javascript" src="jquery.validate.min.js">

        </script>

        <script type="text/javascript" src="base.js">

        </script>

    </head>

    <body>

        <h1>validate测试</h1>

        <form method="get" action="" id="form1">

            <p>

                <label for="cname">

                    用户名

                </label>

                <input name="cname" type="text" class="required" minlength="2"/>

            </p>

            <p>

                <label for="cemail">

                    E-Mail

                </label>

                <input type="email" name="cemail" class="required email"/>

            </p>

            <p>

                <label for="curl">

                    URL

                </label>

                <input type="text" name="curl" class="url" />

            </p>

            <p>

                <label for="password">

                    密码

                </label>

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

            </p>

            <p>

                <label for="confirm_password">

                    确认密码

                </label>

                <input type="password" name="confirm_password" />

            </p>

            <p>

                <label for="ccomment">

                    自定义

                </label>

                <input type="text" name="comment" />

            </p>

            <p>

                <input class="submit" type="submit" value="Submit"/>

            </p>

        </form>

    </body>

</html>

将校验写在Js代码中：

例如

jQuery.extend(jQuery.validator.messages, {

    required: "必选字段",

    remote: "请修正该字段",

    email: "请输入正确格式的电子邮件",

    url: "请输入合法的网址",

    date: "请输入合法的日期",

    dateISO: "请输入合法的日期 (ISO).",

    number: "请输入合法的数字",

    digits: "只能输入整数",

    creditcard: "请输入合法的信用卡号",

    equalTo: "请再次输入相同的值",

    accept: "请输入拥有合法后缀名的字符串",

    maxlength: jQuery.validator.format("请输入一个 长度最多是 {0} 的字符串"),

    minlength: jQuery.validator.format("请输入一个 长度最少是 {0} 的字符串"),

    rangelength: jQuery.validator.format("请输入 一个长度介于 {0} 和 {1} 之间的字符串"),

    range: jQuery.validator.format("请输入一个介于 {0} 和 {1} 之间的值"),

    max: jQuery.validator.format("请输入一个最大为{0} 的值"),

    min: jQuery.validator.format("请输入一个最小为{0} 的值")

});

//自定义校验规则

jQuery.validator.addMethod("mobileNum", function(value, element){

    return this.optional(element) || /^((13[456789])|(15[012789])|(18[2378]))\d{8}$/.test(value);

});

$(function(){

    $("#form1").validate({

        errorElement: "span",// 使用"div"标签标记错误， 默认:"label"

        wrapper: "div",// 使用"li"标签再把上边的errorELement包起来

        errorClass: "validate-error",// 错误提示的css类名"error"

        rules: {

            cname: {// 需要进行验证的输入框name

                required: true,// 验证条件：必填

                minlength: 2// 验证条件：最小长度为2

            },

            cemail: {// 需要进行验证的输入框name

                required: true,// 验证条件：必填

                email: true// 验证条件：格式为email

            },

            curl: {// 需要进行验证的输入框name

                required: true,// 验证条件：必填

                url: true// 验证条件：格式为url

            },

            password: {

                required: true,

                minlength: 5

            },

            confirm_password: {

                required: true,

                minlength: 5,

                equalTo: "#password"

            },

            comment: {

                required: true,

                number: true,

                mobileNum: true

            }

        },

        messages: {

            cname: {

                required: "用户名不允许为空!"// 验证未通过的消息

            },

            cemail: {

                required: "地址不能为空",

                email: "输入正确的url"

            },

            curl: {

                required: "地址不能为空",

                url: "输入正确的url"

            },

            password: {

                required: "请输入密码",

                minlength: "密码的最小长度是{0}个字符"

            },

            confirm_password: {

                required: "请输入确认密码",

                minlength: "确认密码的最小长度是{0}个字符",

                equalTo: "确认密码与密码不相等"

            },

            comment: {

                required: "不能为空!",

                mobileNum: "输入数字不符合要求"

            }

        },

        errorPlacement: function(error, element){

            element.parent().append(error);

        },

        submitHandler: function(form){

            form.submit();

        },

        success: function(error, element){

            error.remove();

        }

    })

});

将校验规则写到控件中：

例如

<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8">

        <title>jQuery validation plug-in - main demo</title>

        <script type="text/javascript" src="jquery-1.7.2.js">

        </script>

        <script type="text/javascript" src="jquery.validate.min.js">

        </script>

        <script>

            $(function(){

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

            })

        </script>

        <script type="text/javascript" src="base.js">

        </script>

    </head>

    <body>

        <h1>validate测试</h1>

        <form method="get" action="" id="form1">

            <p>

                <label for="cname">

                    用户名

                </label>

                <input name="cname" type="text" class="required" minlength="2"/>

            </p>

            <p>

                <label for="cemail">

                    E-Mail

                </label>

                <input type="email" name="cemail" class="required email"/>

            </p>

            <p>

                <label for="curl">

                    URL

                </label>

                <input type="text" name="curl" class="url" />

            </p>

            <p>

                <label for="ccomment">

                    自定义

                </label>

                <input type="text" name="comment" />

            </p>

            <p>

                <input class="submit" type="submit" value="Submit"/>

            </p>

        </form>

    </body>

</html>

巴特西

Jquery插件validate使用一则

最新文章

热门文章