jquery validate检验 

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>test</title>
    <script src="jquery.js"></script>
    <script src="jquery.validate.js"></script>

    <script>
        $(function () {
            //添加自定义校验
            function compare_num(value, element) {
                var min_num = parseInt($("#min_num").val());
                var max_num = parseInt($("#max_num").val());
                if (!min_num || !max_num) {
                    return true;
                }
                return max_num > min_num;
            }
            jQuery.validator.addMethod("compare_num", compare_num, "最大值必须大于最小值");
            //...

            var validate = $("#myform").validate({
                debug: true, //调试模式取消submit的默认提交功能   
                //errorClass: "label.error", //默认为错误的样式类为：error   
                focusInvalid: false, //当为false时，验证无效时，没有焦点响应  
                onkeyup: false,   
                submitHandler: function(form){   //表单提交句柄,为一回调函数，带一个参数：form   
                    alert("提交表单");   
                    form.submit();   //提交表单   
                },
                
                //校验规则
                rules:{
                    myname:{
                        required:true
                    },
                    password:{
                        required:true,
                        rangelength:[3,10]
                    },
                    confirm_password:{
                        equalTo:"#password"
                    },
                    min_num: {
                        required: true
                    },
                    max_num: {
                        compare_num: true,     //自定义校验
                    },
                },    //end rules

                //校验提示信息
                messages:{
                    myname:{
                        required:"必填"
                    },
                    password:{
                        required: "不能为空",
                        rangelength: $.format("密码最小长度:{0}, 最大长度:{1}。")
                    },
                    confirm_password:{
                        equalTo:"两次密码输入不一致"
                    },
                    min_num: {
                        required: "最小值不能为空"
                    },
                }    //end messages
            }); //end validate
    
        });
    </script>
</head>
<body>
    <form id="myform" method="post" action="">
        <p>
            <label for="myname">用户名：</label>
            <input id="myname" name="myname" />
        </p>
        <p>
            <label for="password">登陆密码：</label>
            <input id="password" name="password" type="password"/>
        </p>
        <p>
            <label for="confirm_password">确认密码：</label>
            <input id="confirm_password" name="confirm_password" type="password"/>
        </p>
        <p>
            <label for="min_num">最小值：</label>
            <input id="min_num" name="min_num" type="text" />
        </p>
        <p>
            <label for="max_num">最大值：</label>
            <input id="max_num" name="max_num" type="text" />
        </p>
        <p>
            <input class="submit" type="submit" value="提交" />
        </p>
    </form>
</body>
</html>

　　

参考链接:   http://www.cnblogs.com/linjiqin/p/3431835.html

posted @ 2017-06-26 15:25  秒杀5S  阅读(184)  评论(0)    收藏  举报