收藏的js表单验证控制代码大全

收藏的js表单验证控制代码大全是一个包含多种 JavaScript 表单验证控制代码的合集，我们可以根据需要在项目中选择合适的代码进行使用，并且这些代码可以用来验证常规的表单字段，如文本框，密码框，文本区域和下拉列表等。

以下是使用该合集的步骤：

1. 下载代码合集

首先，我们需要从网络上下载收藏的js表单验证控制代码大全合集，可以在 github 或其他开源代码库中搜索找到该项目并下载。下载完毕后，将代码解压缩并将其放在项目的相应目录中。

2. 引入相应的 JavaScript 文件

在 HTML 页面中引入需要使用的 JavaScript 文件，以便在表单提交时驱动验证程序：

<script src="/path/to/validator.js"></script>

3. 在表单中设置合适的 HTML 元素和验证规则

在 HTML 页面中设置表单元素，并为其设置相应的验证规则，例如：

<form>
  <label>
    Username:
    <input type="text" name="username" data-validation="length alphanumeric" data-validation-length="3-12">
  </label>
  <label>
    Password:
    <input type="password" name="password" data-validation="length" data-validation-length="min6">
  </label>
  <label>
    Email:
    <input type="email" name="email" data-validation="email">
  </label>
  <input type="submit" value="Submit">
</form>

在以上代码中，我们为用户名和密码设置了长度和字母数字组合的验证规则，为电子邮件地址设置了邮箱格式的验证规则。

4. 初始化验证程序并提交表单

在 JavaScript 文件中初始化验证程序并提交表单，例如：

$(document).ready(function() {
  $('form').submit(function() {
    if ($(this).is(':valid')) {
      alert('Form is successfully validated!');
    } else {
      alert('Validation failed.');
    }
  });
});

在以上代码中，我们使用 jQuery 框架来监听表单提交事件，并且在表单提交时使用 is(':valid') 方法来检查表单是否通过验证。如果表单通过验证，则会弹出“Form is successfully validated!”的提示框，否则会弹出“Validation failed.”的提示框。

示例1：

<form>
  <label>
    Username:
    <input type="text" name="username" data-validation="length alphanumeric" data-validation-length="3-12">
  </label>
  <label>
    Password:
    <input type="password" name="password" data-validation="length" data-validation-length="min6">
  </label>
  <input type="submit" value="Submit">
</form>

在上面的示例中，我们为用户名和密码设置了长度和字母数字组合的验证规则，并通过 $(':valid') 方法来检查表单是否通过验证。

示例2：

<form>
  <label>
    Email:
    <input type="email" name="email" data-validation="email">
  </label>
  <label>
    Phone:
    <input type="tel" name="phone" data-validation="phone">
  </label>
  <input type="submit" value="Submit">
</form>

在上面的示例中，我们为电子邮件地址和电话号码设置了相应的验证规则，并通过 $(':valid') 方法来检查表单是否通过验证。