jQuery插件Validation表单验证详解

表单验证是Web开发中非常重要的一环，jQuery插件Validation就是基于jQuery实现的一款表单验证插件，非常方便实用。本篇文章将会详细讲解jQuery插件Validation的使用方法，以及常见的验证规则和自定义验证规则。

页面引入jQuery和jQuery Validation插件

首先，将jQuery和jQuery Validation插件引入到页面中：

<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/jquery-validate/1.19.0/jquery.validate.min.js"></script>

基本使用方法

HTML表单

要使用jQuery Validation插件，首先需要有一个HTML表单：

<form id="myForm">
  <label for="username">Username:</label>
  <input type="text" name="username" id="username">
  <br><br>
  <label for="password">Password:</label>
  <input type="password" name="password" id="password">
  <br><br>
  <input type="submit" value="Submit">
</form>

基本验证规则

接下来是基本验证规则，调用validate()方法即可：

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

调用validate()方法后，就会自动对表单中的input元素进行验证。默认情况下，用户名和密码不能为空。

自定义验证规则

如果需要自定义验证规则，可以使用rules()方法，这里以验证密码强度为例：

$.validator.addMethod("strongPassword", function(value, element) {
    return this.optional(element) || /^(?=.*[A-Za-z])(?=.*\d)[A-Za-z\d]{8,}$/.test(value);
}, "Your password must be at least 8 characters long and contain at least one letter and one number.");

$("#myForm").validate({
    rules: {
        password: {
            required: true,
            strongPassword: true
        }
    }
});

首先使用addMethod()方法添加自定义规则，这里的规则是密码长度不能少于8，且必须包含至少一个字母和一个数字。

然后在validate()方法中，使用rules()方法指定验证规则。

错误提示信息定制

如果默认的错误提示信息不能满足需求，可以使用messages()方法自定义错误提示信息：

$("#myForm").validate({
    messages: {
        username: {
            required: "Username is required."
        },
        password: {
            required: "Password is required.",
            strongPassword: "Your password must be at least 8 characters long and contain at least one letter and one number."
        }
    }
});

在messages()方法中，使用对象指定每个表单项对应的错误提示信息。

示例1：带有“验证码”的表单验证

下面是一个带有验证码的表单验证：

<form id="myForm2">
  <div>
    <label for="username">Username:</label>
    <input type="text" name="username" id="username">
  </div>
  <div>
    <label for="password">Password:</label>
    <input type="password" name="password" id="password">
  </div>
  <div>
    <label for="confirm_password">Confirm Password:</label>
    <input type="password" name="confirm_password" id="confirm_password">
  </div>
  <div>
    <label for="email">Email:</label>
    <input type="email" name="email" id="email">
  </div>
  <div>
    <label for="phone">Phone:</label>
    <input type="tel" name="phone" id="phone">
  </div>
  <div>
    <label for="captcha">Captcha:</label>
    <input type="text" name="captcha" id="captcha">
    <img src="captcha.php" id="captcha_img">
    <a href="#" id="new_captcha">New Captcha</a>
  </div>
  <div>
    <input type="submit" value="Submit">
  </div>
</form>

这里的验证码是一个图片，需要重新生成。下面是Javascript代码：

$.validator.addMethod("strongPassword", function(value, element) {
    return this.optional(element) || /^(?=.*[A-Za-z])(?=.*\d)[A-Za-z\d]{8,}$/.test(value);
}, "Your password must be at least 8 characters long and contain at least one letter and one number.");

$("#myForm2").validate({
    rules: {
        username: "required",
        password: {
            required: true,
            strongPassword: true
        },
        confirm_password: {
            equalTo: "#password"
        },
        email: {
            required: true,
            email: true
        },
        phone: {
            required: true,
            number: true
        },
        captcha: {
            required: true,
            remote: "check-captcha.php" // 远程验证验证码是否正确
        }
    },
    messages: {
        captcha: {
            remote: "Wrong captcha."
        }
    }
});

$("#new_captcha").click(function() {
    // 重新生成验证码
    $("#captcha_img").attr('src', 'captcha.php');
    return false;
});

在验证规则中，使用了remote规则实现远程验证。当验证验证码输入是否正确时，会向服务器发送Ajax请求，再返回验证结果。这里的check-captcha.php代码类似于下面这样：

<?php
session_start();
if (strtolower($_POST["captcha"]) == strtolower($_SESSION["captcha"])) {
    echo "true";
} else {
    echo "false";
    exit;
}
?>

示例2：动态添加表单项

下面是一个动态添加表单项的例子，点击Add按钮，可以添加任意多个input输入框：

<form id="myForm3">
  <div>
    <label for="name1">Name1:</label>
    <input type="text" name="name1" id="name1">
  </div>
  <div id="dynamicForm">
  </div>
  <button type="button" id="btnAdd">Add</button>
  <input type="submit" value="Submit">
</form>

点击Add按钮后，动态添加表单项：

$("#btnAdd").click(function() {
    var div = $("<div />");
    div.html(getTemplateHtml());
    $("#dynamicForm").append(div);
});

function getTemplateHtml() {
    var count = jQuery("#dynamicForm > div").length + 1;
    var html = '<div><label for="name' + count + '">Name' + count + ':</label>' +
               '  <input type="text" name="name' + count + '" id="name' + count + '">' +
               '</div>';
    return html;
}

在这里只验证了动态添加的input是否为空：

$("#myForm3").validate({
    rules: {
        name1: "required"
    },
    messages: {
        name1: "Required"
    }
});

总结

以上是jQuery插件Validation表单验证的详细攻略，后续使用中会遇到很多其他的验证规则，可以在官方文档中查询相关信息。不仅如此，我们还可以通过自定义方法来增强Validation的功能，使其在实际使用中更加灵活、方便。