简单地使用jquery的validate

浏览数：24 / 时间：2015年06月09日

——@梁WP

摘要：本文通过一个很简单的例子，讲解了jquery validate的最基础使用方式。

一、源代码

　　注意事项都写在代码的注释里了，哈哈。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>lwp</title>

<!-- jquery，必须 -->
<script type="text/javascript" src="jquery-1.11.2.js"></script>
<!-- jquery的校验，必须 -->
<script type="text/javascript" src="jquery.validate.js"></script>

<!-- 额外下载的校验规则大全，可选 -->
<script type="text/javascript" src="additional-methods.js"></script>

<script>
    $(function() {
        /* 让表单使用jquery-validate的校验，必须 */
        $("form").validate();

        /* 用中文覆盖jquery-validate原有的英文提示，可选 */
        jQuery.extend(jQuery.validator.messages, {
            required : "不能为空",
            email : "请输入正式的邮箱"
        });

        /* 自定义校验规则，可选 */
        jQuery.validator.addMethod("lwp", function(value, element) {
            if (value == "" || value == "liang") {
                return true;
            }
            else {
                return false;
            }
        }, "只能输入liang");
    });
    
    function check(){
        /* 检查表单 */
        if($("form").valid()) {
            alert("提交成功");
        }
        else {
            return false;
        }
    }
</script>

<style>
/* 自定义的错误提示样式，覆盖jquery-validate自带的错误提示样式，可选 */
label.error {
    color: #F00;
    font-size: 12px;
}
</style>
</head>

<body>
    <form>
        <div>
            <label for="email">邮箱</label>
            <!-- required和email是jquery-validate自带的校验规则 -->
            <input type="text" autocomplete="off" name="email" required="true" email="true">
        </div>

        <div>
            <label for="author">作者</label>
            <!-- lwp是自己定义的校验规则 -->
            <input type="text" autocomplete="off" name="author" required="true" lwp="true">
        </div>

        <div>
            <input type="button" onclick="check();" value="提交">
        </div>
    </form>
</body>

</html>