jQuery学习笔记（jquery.validate插件）

2024-01-15 13:08:34

jquery.validate官网地址：http://jqueryvalidation.org/

1. 导入JavaScript库

<script src="../js/jquery.js"></script>
<script src="../js/jquery.validate.js"></script>
<script src="../js/messages_zh.js"></script>

jquery.js文件不用说了，jquery.validate.js文件为验证脚本程序，messages_zh.js文件为消息本地化代码。

2. 默认检验规则

required – Makes the element required.
remote – Requests a resource to check the element for validity.
minlength – Makes the element require a given minimum length.
maxlength – Makes the element require a given maxmimum length.
rangelength – Makes the element require a given value range.
min – Makes the element require a given minimum.
max – Makes the element require a given maximum.
range – Makes the element require a given value range.
email – Makes the element require a valid email
url – Makes the element require a valid url
date – Makes the element require a date.
dateISO – Makes the element require an ISO date.
number – Makes the element require a decimal number.
digits – Makes the element require digits only.
creditcard – Makes the element require a credit card number.
equalTo – Requires the element to be the same as another one

懒得翻译了，应该很好懂吧

3. 方式一，将检验规则写到控件中

<script src="../js/jquery.js"></script>
<script src="../js/jquery.validate.js"></script>
<script src="../js/messages_zh.js"></script>

<script>
$.validator.setDefaults({
    submitHandler: function() { alert("submitted!"); }
});

$().ready(function() {
    // validate the comment form when it is submitted
    $("#commentForm").validate();
});
</script>

<form class="cmxform" id="commentForm" method="get" action="" style="width: 500px;">
    <fieldset>
        <legend>请输入信息...</legend>
        <p>
            <label for="cname">姓名</label>
            <input id="cname" name="name" minlength="2" type="text" required />
        <p>
            <label for="cemail">E-Mail</label>
            <input id="cemail" type="email" name="email" required />
        </p>
        <p>
            <label for="curl">URL</label>
            <input id="curl" type="url" name="url" />
        </p>
        <p>
            <label for="ccomment">评价</label>
            <textarea id="ccomment" name="comment" required></textarea>
        </p>
        <p>
            <input class="submit" type="submit" value="Submit"/>
        </p>
    </fieldset>
</form>

验证结果如下图所示：

4. 方式二，在JavaScript脚本中写规则

<script src="../js/jquery.js"></script>
<script src="../js/jquery.validate.js"></script>
<script src="../js/messages_zh.js"></script>

<script>
$.validator.setDefaults({
    submitHandler: function() { alert("submitted!"); }
});

$().ready(function() {
    // validate signup form on keyup and submit
    $("#signupForm").validate({
        rules: {
            firstname: "required",
            lastname: "required",
            username: {
                required: true,
                minlength: 2
            },
            password: {
                required: true,
                minlength: 5
            },
            confirm_password: {
                required: true,
                minlength: 5,
                equalTo: "#password"
            },
            email: {
                required: true,
                email: true
            },
            topic: {
                required: "#newsletter:checked",
                minlength: 2
            },
            agree: "required"
        },
        messages: {
            firstname: "留下大名",
            lastname: "请问你姓啥？",
            username: {
                required: "写个用户名哦",
                minlength: "用户名最少2个字符"
            },
            password: {
                required: "请输入密码",
                minlength: "密码至少5个字符哦"
            },
            confirm_password: {
                required: "请输入密码",
                minlength: "密码至少5个字符哦",
                equalTo: "两次输入的密码要一致哦"
            },
            email: "请输入一个有效的电子邮件地址",
            agree: "请选择同意协议"
        }
    });

    // propose username by combining first- and lastname
    $("#username").focus(function() {
        var firstname = $("#firstname").val();
        var lastname = $("#lastname").val();
        if(firstname && lastname && !this.value) {
            this.value = firstname + "." + lastname;
        }
    });

    //code to hide topic selection, disable for demo
    var newsletter = $("#newsletter");
    // newsletter topics are optional, hide at first
    var inital = newsletter.is(":checked");
    var topics = $("#newsletter_topics")[inital ? "removeClass" : "addClass"]("gray");
    var topicInputs = topics.find("input").attr("disabled", !inital);
    // show when newsletter is checked
    newsletter.click(function() {
        topics[this.checked ? "removeClass" : "addClass"]("gray");
        topicInputs.attr("disabled", !this.checked);
    });
});
</script>

<form class="cmxform" id="signupForm" method="get" action="">
    <fieldset>
        <legend>Validating a complete form</legend>
        <p>
            <label for="firstname">Firstname</label>
            <input id="firstname" name="firstname" type="text" />
        </p>
        <p>
            <label for="lastname">Lastname</label>
            <input id="lastname" name="lastname" type="text" />
        </p>
        <p>
            <label for="username">Username</label>
            <input id="username" name="username" type="text" />
        </p>
        <p>
            <label for="password">Password</label>
            <input id="password" name="password" type="password" />
        </p>
        <p>
            <label for="confirm_password">Confirm password</label>
            <input id="confirm_password" name="confirm_password" type="password" />
        </p>
        <p>
            <label for="email">Email</label>
            <input id="email" name="email" type="email" />
        </p>
        <p>
            <label for="agree">Please agree to our policy</label>
            <input type="checkbox" class="checkbox" id="agree" name="agree" />
        </p>
        <p>
            <label for="newsletter">I'd like to receive the newsletter</label>
            <input type="checkbox" class="checkbox" id="newsletter" name="newsletter" />
        </p>
        <fieldset id="newsletter_topics">
            <legend>Topics (select at least two) - note: would be hidden when newsletter isn't selected, but is visible here for the demo</legend>
            <label for="topic_marketflash">
                <input type="checkbox" id="topic_marketflash" value="marketflash" name="topic" />
                Marketflash
            </label>
            <label for="topic_fuzz">
                <input type="checkbox" id="topic_fuzz" value="fuzz" name="topic" />
                Latest fuzz
            </label>
            <label for="topic_digester">
                <input type="checkbox" id="topic_digester" value="digester" name="topic" />
                Mailing list digester
            </label>
            <label for="topic" class="error">Please select at least two topics you'd like to receive.</label>
        </fieldset>
        <p>
            <input class="submit" type="submit" value="Submit"/>
        </p>
    </fieldset>
</form>

注意：

在rules标签下面的以下用法：required: true/agree: "required"；email: true；minlength: 5等等。
在messages标签下面可以自定义对应于任一元素所对应的任意条件不满足时的提示消息，这点非常实用。
可以设置validate的默认值，写法如下（需要使用form.submit()而不要使用$(form).submit()）：

$.validator.setDefaults({
    submitHandler: function(form) { alert("submitted!"); form.submit(); }
});

验证效果图：

5. 其它技巧

5.1 用其他方式替代默认的SUBMIT

$().ready(function() {
 $("#signupForm").validate({
        submitHandler:function(form){
            alert("submitted");   
            form.submit();
        }    
    });
});

5.2 只验证不提交表单

$().ready(function() {
 $("#signupForm").validate({
        debug:true
    });
});

码农公寓

相关文章