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

2021-07-05 08:02:13 阅读：224 来源： 互联网

标签：jQuery jquery 插件 require required element validate newsletter Makes

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
    });
});

标签：jQuery,jquery,插件,require,required,element,validate,newsletter,Makes
来源： https://www.cnblogs.com/nayitian/p/14970658.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

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