您所在的位置:小祥子 » 编程 » JavaScript » 正文

简单地使用jquery的validate

时间:2015-05-18 编辑:梁WP 来源:本站整理

简单地使用jquery的validate

                                     ——@梁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"  value="提交">
        </div>
    </form>
</body>

</html>

二、结果截图

  1、required的校验,截图如下:

    

  2、email和lwp的校验,截图如下:

    

  3、校验通过之后的提交,截图如下:

    

关键词:使用 li date