jQuery Validate验证框架使用

jQuery Validate使用前的准备,需要下载相应js包括:1、jquery.validate.min.js。2、additional-methods.min.js。

当然必不可少的js jQuery文件。

引入上面的js后开始使用,jv(jquery validate以下叫jv)有两种用法,先看第一种:

第一种就是直接在控件上用class的方式直接用,如:class="email",这种方法如果想验证长度,好像不起效果,也可能是没研究出来。

jv的提示语默认是英文的,我们可以用内置方法把提示语换成我们想要的内容。

注意:使用前必须指定要验证的form。看代码:

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>jq控件验证</title>
    <script src="Script/jquery.min.js"></script>
    <script src="jqvaldate/jquery.validate.min.js"></script>
    <script src="jqvaldate/additional-methods.min.js"></script>
    <script>
        $(function () {
            $("#myform").validate({
            });
            $.extend($.validator.messages, {
                required: "必选字段",
                remote: "请修正该字段",
                email: "请输入正确格式的电子邮件",
                url: "请输入合法的网址",
                date: "请输入合法的日期",
                dateISO: "请输入合法的日期 (ISO).",
                number: "请输入合法的数字",
                digits: "只能输入整数",
                creditcard: "请输入合法的信用卡号",
                equalTo: "请再次输入相同的值",
                accept: "请输入拥有合法后缀名的字符串",
                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} 的值")
            });
        });
    </script>
</head>
<body>
    <form id="myform" method="post" action="">
        <p>
            <label for="email">E-Mail:</label>
            <input id="email" calss="required email" />
        </p>
        <p>
            <input class="submit" type="submit" value="立即注册" />
        </p>
    </form>
</body>
</html>

  上面的代码就是在calss中用内置验证方法直接验证的方式。

      来看一下第二种,在js中进行验证:

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>jq控件验证</title>
    <script src="Script/jquery.min.js"></script>
    <script src="jqvaldate/jquery.validate.min.js"></script>
    <script src="jqvaldate/additional-methods.min.js"></script>
    <script>
        $(function () {
            $("#myform").validate({
                focusInvalid: false,//验证无效时,是否有焦点响应
//指定验证成功后进行提交 submitHandler: function (form) { form.submit(); },
//要验证的控件 rules: { myname: { required: true }, email: { required: true, email: true }, jia: { required: true, byteRangeLength: [3, 6] } },
//提示语 messages: { myname: { required: "必填" }, email: { required: "必填", email: "E-Mail格式不正确" } } }); //添加自定义验证 jQuery.validator.addMethod( "byteRangeLength", function (value, element, param) { var length = value.length; for (var i = 0; i < value.length; i++) { if (value.charCodeAt(i) > 127) { length++; } } return this.optional(element) || (length >= param[0] && length <= param[1]); }, $.validator.format("请确保输入的值在{0}-{1}个字节之间(一个中文字算2个字节)") );
//定义提示语 $.extend($.validator.messages, { required: "必选字段", remote: "请修正该字段", email: "请输入正确格式的电子邮件", url: "请输入合法的网址", date: "请输入合法的日期", dateISO: "请输入合法的日期 (ISO).", number: "请输入合法的数字", digits: "只能输入整数", creditcard: "请输入合法的信用卡号", equalTo: "请再次输入相同的值", accept: "请输入拥有合法后缀名的字符串", 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} 的值") }); }); </script> </head> <body> <form id="myform" method="post" action=""> <p> <label for="myname">用户名:</label> <input id="myname" name="myname" /> </p> <p> <label for="email">E-Mail:</label> <input id="email" name="email" /> <input type="text" name="jia"/> </p> <p> <input class="submit" type="submit" value="立即注册" /> </p> </form> </body> </html>

  以上代码就是在js中进行验证。

      添加自定义验证的时候的三个参数分别为:验证名,要执行的函数(要执行的函数也有三个参数:val,element,param),要返回的值(可以格式化)。

      简单的自定义验证添加:   

$.validator.addMethod(
            "lths", function (val, element, pms) {
                if (val.length > pms.length ) {
                    return true;
                }
                else {
                    return false;
                }
            }
            , $.validator.format("必须大于{0}个字节"));

//在rules中调用的时候lths[6]

  以下是通过验证和未通过验证的操作:

//没有通过验证的操作 
highlight: function (element, errorClass) {
                    $(element).css("border-color", "red");
                },
//通过验证的操作
                unhighlight: function (element, errorClass) {
                    $(element).css("border-color", "");
                }

  

      

你可能感兴趣的:(jQuery Validate验证框架使用)