jquery.validate.js的简单示例

一、官方资料

二、html

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>Examples</title>
    <link href="" rel="stylesheet">
</head>
<style type="text/css">
    #myform input.error {background: rgb(251, 227, 228);border: 1px solid #fbc2c4;color: #8a1f11;}
</style>
<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" />
        </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>
            <input class="submit" type="submit" value="立即注册" />
        </p>
    </form>
    <script type="text/javascript" src="js/jquery.min.js"></script>
    <script type="text/javascript" src="js/jquery.validate.min.js"></script>
    <script type="text/javascript" src="js/test.js"></script>
</body>

</html>

三、js

两种方式

1）利用submitHandler处理验证成功后的事件

var validate = $("#myform").validate({
    debug: true, //调试模式取消submit的默认提交功能   
    //errorClass: "label.error", //默认为错误的样式类为：error   
    focusInvalid: false, //当为false时，验证无效时，没有焦点响应  
    onkeyup: false,
    submitHandler: function(form) {
        alert("submitted");
       //写提交表单操作
    },

    rules: {
        myname: {
            required: true
        },
        email: {
            required: true,
            email: true
        },
        password: {
            required: true,
            rangelength: [3, 10]
        },
        confirm_password: {
            equalTo: "#password"
        }
    },
    messages: {
        myname: "请输入姓名",
        email: {
            required: "请输入Email地址",
            email: "请输入正确的email地址"
        },
        password: {
            required: "请输入密码"
        },
        confirm_password: {
            required: "请输入确认密码",
            equalTo: "两次输入密码不一致不一致"
        }
    }

});

2）利用valid（是否为true来控制提交表单）

var validate = $("#myform").validate({
    debug: true, //调试模式取消submit的默认提交功能   
    //errorClass: "label.error", //默认为错误的样式类为：error   
    focusInvalid: false, //当为false时，验证无效时，没有焦点响应  
    onkeyup: false,

    rules: {
        myname: {
            required: true
        },
        email: {
            required: true,
            email: true
        },
        password: {
            required: true,
            rangelength: [3, 10]
        },
        confirm_password: {
            equalTo: "#password"
        }
    },
    messages: {
        myname: "请输入姓名",
        email: {
            required: "请输入Email地址",
            email: "请输入正确的email地址"
        },
        password: {
            required: "请输入密码"
        },
        confirm_password: {
            required: "请输入确认密码",
            equalTo: "两次输入密码不一致不一致"
        }
    }

});


$(function() {
    $('.submit').click(function() {
        if ($("#myform").valid()) {
            alert("准备提交表单")
            //表单提交  

        } else {
            alert("信息不完善")
        }
    });

})

四、效果