JqueryValidate使用 

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>jquery.validate测试</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <script src="Scripts/jquery-1.10.2.min.js"></script>
    <script src="Scripts/jquery.validate.min.js"></script> 
    <link href="Content/validation.css" rel="stylesheet" />
</head>
<body>
    <form id="signupForm" method="get" action="">
        <p>
            <label for="firstname">Firstname</label>
            <input id="firstname" name="firstname" />
        </p>
        <p>
            <label for="email">E-Mail</label>
            <input id="email" name="email" />
        </p>
        <p>
            <label for="password">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="Onlyone">自定义验证</label>
            <input id="Onlyone" name="Onlyone" type="text" />
        </p>
        <p>
            <input class="submit" type="submit" value="Submit" />
        </p>
    </form>
</body>
</html> 
<script type=text/javascript>
    $().ready(function () {
        $("#signupForm").validate({
            rules: { 
                firstname: "required",
                email: {
                    required: true,
                    email: true
                },
                password: {
                    required: true,
                    minlength: 5
                },
                confirm_password: {
                    required: true,
                    minlength: 5,
                    equalTo: "#password"
                },
                Onlyone: {
                    Onlyone:["1"]
                }
            },
            messages: {
                firstname: "请输入姓名",
                email: {
                    required: "请输入Email地址",
                    email: "请输入正确的email地址"
                },
                password: {
                    required: "请输入密码",
                    minlength: jQuery.format("密码不能小于{0}个字 符")
                },
                confirm_password: {
                    required: "请输入确认密码",
                    minlength: "确认密码不能小于5个字符",
                    equalTo: "两次输入密码不一致不一致"
                }
            }, 
            success: function (label) {//验证通过
                label.html(" ").addClass("checked");
            },
            errorPlacement: function (error, element) {//错误信息显示的位置
                error.appendTo(element.parent());//验证的元素后面（默认）
                element.addClass("error");//添加红色选中框
            },
            highlight: function (element, errorClass) {//可以给未通过验证的元素加效果、闪烁等
                $(element).parent().find("." + errorClass).removeClass("checked"); 
            },
            submitHandler: function () {
                alert("提交！！！");
            },
        });
    });
    //value 是元素的值，element 是元素本身，param 是参数。
    $.validator.addMethod("Onlyone", function (value, element, params) {
        if (value == params) {
            return true;
        }
        else {
            return false;
        }
    },"必须是1");
</script> 








　　






            

            
posted @ 
2015-04-10 16:57 
兴趣就是天赋 
阅读(115) 
评论(0) 
 
收藏 
举报