jquery.validate 基础 

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script type="text/javascript" src="js/jquery-1.11.1.js"></script>
    <script type="text/javascript" src="js/jquery.validate-1.14.0.js"></script>
    <script type="text/javascript">
    $().ready(function() {
        var validate= $("#signupForm").validate({
                rules: {
                   firstname: "required",
                   email: {
                    required: true,
                    email: true
                   },
                   password: {
                    required: true,
                    minlength: 5
                   },
                   confirm_password: {
                    required: true,
                    minlength: 5,
                    equalTo: "#password"
                   }
                },
                messages: {
                   firstname: "请输入姓名",
                   email: {
                    required: "请输入Email地址",
                    email: "请输入正确的email地址"
                   },
                   password: {
                    required: "请输入密码",
                    minlength: "密码不能小于{0}个字 符"
                   },
                       confirm_password: {
                    required: "确认密码",
                    minlength: "确认密码不能小于5个字符",
                    equalTo: "两次输入密码不一致不一致"
                }
            },
            //把错误信息放到一处处理与 errorPlacement 函数连用
            groups:{
                login:"firstname email password confirm_password"
            },
            errorPlacement:function(error,element){
                error.insertBefore("#error_info");    
            },
            //提交表单后焦点在第一个错误表单内
            focusInvalid:true,
            //指定错误提示的css类名
            errorClass:"error_info",
            //指定验证通过的css类名
            validClass:"success_info",
            //验证通过提交表单
            submitHandler:function(form){
                console.info("提交表单"+$(form).serialize());
            },
            invalidHandler:function(event,validator){
                console.info("表单错误"+validate.numberOfInvalids());
            },
            // 取消某个元素的校验
            ignore:"#firstname",
            onfocusout:function(){
                return false;
            }
        });
        $("#check").click(function(){
            var flag1=$("#signupForm").valid();//检查表单是否有效
            var flag2=$("#firstname").rules();//查询元素的校验规则
            var flag3=$("#firstname").rules("add",{minlength:2,maxlength:10});//添加元素的校验规则
            var flag4=$("#firstname").rules("remove","minlength");//删除元素的校验规则
            var flag5=validate.form();//验证表单是否有效
            var flag6=validate.element("#firstname");//验证表单某个元素是否有效
            validate.resetForm();//恢复表单原来的状态
            var flag7=validate.numberOfInvalids();//获得错误元素个数
            console.info(flag7);
        });
        //针对某个元素显示特定的提示信息
        validate.showErrors({
            firstname:"ERROR"
        });        
});
    </script>
</head>
<body>
    <form id="signupForm" method="get" action="">
        <p id="error_info">
            <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>
            <input class="submit" type="submit" value="Submit"/>
        </p>
        <p>
            <input class="c" type="button" value="检查表单是否有效" id="check"/>
        </p>
</form>
</body>
</html>

 

posted @ 2015-10-28 22:32  小禾点点  阅读(406)  评论(0)  编辑  收藏  举报