HTML5 data 属性规则使用jQuery Validate 插件

jQuery Validation 是一个非常非常好用的插件, 和 ASP.NET MVC 使用插件进行客户端验证一样好用! 有一个非常好用的 JavaScript API，对于编写验证规则或使用 HTML5 data 属性来定义验证规则都非常有用。

此插件允许您通过在HTML元素中设置 HTML5 data 属性或使用 JavaScript API 来定义验证规则。然后使用jQuery() 来激活它。

插件提供了一套验证方法，包括 required、email、url、date、number、digits、creditcard、minlength、maxlength、rangelength、min、max、range、equalTo、remote 等。

验证规则

首先，在你的HTML中使用 HTML5 data 属性来定义验证规则，例如：

<form id="myform">
    <input type="text" name="username" required data-rule-rangelength="[3,10]">
    <input type="email" name="email" required data-rule-email="true">
    <input type="url" name="website" required data-rule-url="true">
    <input type="date" name="birthdate" required data-rule-date="true">
    <input type="number" name="age" required data-rule-number="true">
    <input type="digits" name="digits" required data-rule-digits="true">
    <input type="creditcard" name="creditcard" required data-rule-creditcard="true">
    <input type="text" name="password" required data-rule-minlength="6">
    <input type="text" name="repassword" required data-rule-maxlength="10">
    <input type="text" name="username" required data-rule-rangelength="[3,10]">
    <input type="text" name="username" required data-rule-min="10">
    <input type="text" name="username" required data-rule-max="10">
    <input type="text" name="username" required data-rule-range="[10,20]">
    <input type="text" name="username" required data-rule-equalTo="#password">
    <input type="text" name="username" required data-rule-remote="server.php">
</form>

初始化插件

$("#myform").validate();

验证规则提示

<script>
$(document).ready(function() {
    $("#myform").validate({
        rules: {
            username: {
                required: true,
                rangelength: [3, 10]
            },
            email: {
                required: true,
                email: true
            },
            website: {
                required: true,
                url: true
            },
            birthdate: {
                required: true,
                date: true
            },
            age: {
                required: true,
                number: true
            },
            digits: {
                required: true,
                digits: true
            },
            creditcard: {
                required: true,
                creditcard: true
            },
            password: {
                required: true,
                minlength: 6
            },
            repassword: {
                required: true,
                maxlength: 10
            },
            username: {
                required: true,
                rangelength: [3, 10]
            },
            username: {
                required: true,
                min: 10
            },
            username: {
                required: true,
                max: 10
            },
            username: {
                required: true,
                range: [10, 20]
            },
            username: {
                required: true,
                equalTo: "#password"
            },
            username: {
                required: true,
                remote: "server.php"
            }
        },
        messages: {
            username: {
                required: "必填项",
                rangelength: "长度必须在3到10个字符之间"
            },
            email: {
                required: "必填项",
                email: "请输入一个有效的电子邮件地址"
            },
            website: {
                required: "必填项",
                url: "请输入一个有效的网址"
            },
            birthdate: {
                required: "必填项",
                date: "请输入一个有效的日期"
            },
            age: {
                required: "必填项",
                number: "请输入一个有效的数字"
            },
            digits: {
                required: "必填项",
                digits: "请输入一个有效的数字"
            },
            creditcard: {
                required: "必填项",
                creditcard: "请输入一个有效的信用卡号"
            },
            password: {
                required: "必填项",
                minlength: "长度必须至少为6个字符"
            },
            repassword: {
                required: "必填项",
                maxlength: "长度不能超过10个字符"
            },
            username: {
                required: "必填项",
                rangelength: "长度必须在3到10个字符之间"
            },
            username: {
                required: "必填项",
                min: "长度必须至少为10个字符"
            },
            username: {
                required: "必填项",
                max: "长度不能超过10个字符"
            },
            username: {
                required: "必填项",
                range: "长度必须在10到20个字符之间"
            },
            username: {
                required: "必填项",
                equalTo: "两次输入的密码不一致"
            },
            username: {
                required: "必填项",
                remote: "用户名已存在"