📌  相关文章
📜  使用 jbvalidator 插件进行表单验证(1)

📅  最后修改于: 2023-12-03 15:36:30.285000             🧑  作者: Mango

使用 jbvalidator 插件进行表单验证

简介

jbvalidator 是一个基于 jQuery 的表单验证插件，可以在表单提交前对表单元素进行验证，从而保证输入数据的合法性。它支持多种验证方式，包括必填、最小长度、最大长度、邮箱、手机号、身份证号等。

特点
  • 使用简单、配置灵活
  • 支持多种验证方式
  • 提供自定义验证方法
安装
1. 下载插件

你可以从 jbvalidator 的官网 下载插件，也可以从 GitHub 上获取源码。

2. 引入插件

在 HTML 文件中引入插件的 js 和 css 文件。

<head>
  <link rel="stylesheet" href="path/to/jbvalidator.min.css">
</head>
<body>
  <form>
    <!-- form elements -->
  </form>

  <script src="path/to/jquery.min.js"></script>
  <script src="path/to/jbvalidator.min.js"></script>
</body>
3. 编写验证规则

在 JS 文件中定义表单验证规则，并将其应用到对应的 form 对象上。

<form id="my-form">
  <input type="text" name="username" data-validate="required">
  <input type="password" name="password" data-validate="required&minLength[6]">
  <input type="email" name="email" data-validate="required&email">
  <input type="tel" name="phone" data-validate="required&phone">
  <input type="text" name="idcard" data-validate="idcard">
  <button type="submit">提交</button>
</form>

<script>
  $('#my-form').jbvalidator({
    errorMessageHandler: function ($input, message) {
      // customize error message display
    },
    success: function () {
      // form validation passed
    },
    fail: function () {
      // form validation failed
    }
  });
</script>

在上面的例子中，我们给表单中的各个元素添加了不同的验证规则：

  • required 表示必填项；
  • minLength[6] 表示最小长度为 6；
  • email 表示邮箱地址；
  • phone 表示电话号码；
  • idcard 表示身份证号。

还可以通过 errorMessageHandler 自定义错误信息的显示方式，通过 success 和 fail 分别设置验证通过和验证失败的回调函数。

验证方法
必填项（required）
<input type="text" name="username" data-validate="required">
最小长度（minLength）
<input type="text" name="password" data-validate="minLength[6]">
最大长度（maxLength）
<input type="text" name="password" data-validate="maxLength[12]">
邮箱地址（email）
<input type="email" name="email" data-validate="email">
电话号码（phone）
<input type="tel" name="phone" data-validate="phone">
身份证号（idcard）
<input type="text" name="idcard" data-validate="idcard">
自定义正则表达式（regex）
<input type="text" name="password" data-validate="regex[/^[a-z]+$/]">
自定义验证方法

除了内置的验证方法，你还可以自定义验证方法：

<form id="my-form">
  <input type="password" name="password" data-validate="required&checkPassword">
  <button type="submit">提交</button>
</form>

<script>
  $.validator.addMethod('checkPassword', function (value, element, param) {
    return value === param;
  }, '两次密码不一致');

  $('#my-form').jbvalidator();
</script>

在上面的例子中，我们自定义了一个名为 checkPassword 的验证方法，用于验证两次密码是否一致。在表单元素的 data-validate 属性中调用该方法。