jquery.validation校验

Posted 心肺

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了jquery.validation校验相关的知识,希望对你有一定的参考价值。

jquery Validata验证框架的详解

首先导入js库

<script src="jquery.validation/jquery-1.9.1.js"></script>
<script src="jquery.validation/jquery.validate.min.js"></script>

 

1.validate(options)是运行form表单的开始,他是用来验证你所选的form,以上代码的第五行“#myForm"是form的id名。

2.rules() 是校验规则他就是validate里的options,是用户定义的键/值对规则。键为一个表单元素的 name属性、值为一个简单的字符串或者由规则/参数对组成的一个对象。

3. messages ()是用户自定义的 键/值 对消息===键为一个表单元素的name属性,值为该表单元素将要显示的消息。

 

默认的校验规则

(1).required:true      ---必须要填写的字段

(2).remote:"remote-valid.jsp"    ---使用ajax方法调用remote-valid.jsp验证输入值

(3).email:true    ---必须输入正确格式的电子邮件

(4).url:true    ---必须输入正确格式的网址

(5).date:true   ---必须输入争取格式的日期,日期校验ie6出错,慎用

(6).dateISO:true   ---必须输入正确格式的日期(例如:2017-06-20, 2017/06/20)只验证格式,不验证有效性 

(7).number:true  ---必须输入合法的数字(负数,小数)

(8).digits:true  ---必须输入整数

(9).creditcard:true   ---必须输入合法的信用卡号

(10).equalTo:"#password"   ---输入值必须和#password相同

(11).accept:   --- 输入拥有合法的后缀名的字符串(上传文件的后缀)

(12).maxlength:5   ---输入长度最多的是5的字符串(汉字算一个字符)

(13).minlength:10   ---输入长度最小的是10的字符串(汉字算一个字符)

(14).ranglength:[5.10]   ---输入的长度必须介于 5 和 10 之间的字符串(汉字算一个字符)

(15).range:[5,10]   ---输入值必须介于 5 和 10 之间

(16).max:5 ---输入值不能大于5

(17).min:10    ---输入值不能小于10 

 

其用法为:

<!DOCTYPE html>
<html>

    <head lang="en">
        <meta charset="UTF-8">
        <title></title>
        <style>
            #img {
                display: none;
                width: 30px;
                height: 30px;
            }
        </style>
        <script src="jquery.validation/jquery-1.9.1.js"></script>
        <script src="jquery.validation/jquery.validate.min.js"></script>
        <script src="js/ajax1.js"></script>
        <script>
            $(function() {
                var oLgn = $("#lgn");
                var oReg = $("#reg");
                var oImg = $("#img");
                var oSpan = $("#span");
                var oUser = $("#user");
                var oPass = $("#pass");
                $(#demoForm).validate({
                    rules: {
                        //用户名
                        username: {
                            required: true,
                            rangelength: [6, 11]
                        },
                        //密码
                        password: {
                            required: true,
                            rangelength: [11, 13]
                        },

                    },
                    messages: {
                        //用户名
                        username: {
                            required: 此项必填,
                            rangelength: 用户名长度为6-11位
                        },
                        //密码
                        password: {
                            required: 此项必填,
                            rangelength: 用户名长度为11-13位
                        }

                    },
                    submitHandler: function() {
                        oLgn.on(click, function() {
                            myAjax(user.php, "lgn", oUser.val(), oPass.val());
                        });
                        oReg.on(click, function() {
                            myAjax(user.php, "add", oUser.val(), oPass.val());
                        })
                        //myAjax(‘user.php‘,"lgn",oUser.val(),oPass.val());
                        function myAjax(url, act, userValue, passValue) {
                            $.ajax({
                                url: url,
                                data: {
                                    act: act,
                                    user: userValue,
                                    pass: passValue
                                },
                                beforeSend: function() {
                                    oImg.css("display", "block")
                                },
                                success: function(res) {
                                    var json = eval(( + res + ));
                                    oSpan.html(json.msg);
                                },
                                complete: function() {
                                    oImg.css("display", "none")
                                }
                            })
                        }
                    },
                });
            });
            
            
        </script>

    </head>

    <body>
        <form action="" id="demoForm">
            <p>
                <label for="user">username:</label>
                <input type="text" name="username" id="user" />
            </p>
            <p>
                <label for="pass">password:</label>
                <input type="text" name="password" id="pass" />
            </p>
            <p><input type="submit" value="登录" id="lgn" />
                <input type="submit" value="注册" id="reg" /></p>
            <img src="loading.jpg" alt="" id="img" />
            <span id="span"></span>
        </form>
    </body>
</html>

 

希望以上内容会对大家有所帮助!!!

 

以上是关于jquery.validation校验的主要内容,如果未能解决你的问题,请参考以下文章

jquery validation笔记

jQuery Validation让验证变得如此easy

jquery validation表单验证插件。

Jquery Validate 默认校验规则及常用的自定义验证规则

Jquery Validation,如果出现错误,我该如何运行自定义代码

如何在 jQuery.validation 中添加不等于规则