博客

使用jbvalidator插件进行表单验证

  • Post category:jquery

请看下面的详细讲解：

使用jbvalidator插件进行表单验证的完整攻略

1. 简介

jbvalidator 是一个基于 jQuery 的表单验证插件，通过配置简单的选项即可实现表单验证功能。它支持多种类型的验证，如不能为空、必须为数字、必须为-email 格式等。

2. 安装方法

  1. 下载 jbvalidator 插件，可以从官网 https://miozv.org/jbvalidator/ 上下载最新版本。
  2. 解压下载的文件，在 HTML 文件中引入 jquery.js 和 jbvalidator.js，并在需要验证的表单上添加 class="jbvalidate" 属性。

“`html


“`

注意：表单内的每个元素都应包含一个 name 属性，否则会出现错误。

3. 常用功能及示例

3.1 必填项验证

要求表单内必须填写所有的必填项，可以使用 required 属性进行验证。同时，我们可以使用 data-rep-msg 属性自定义提示信息。

<input type="text" name="username" required data-rep-msg="请输入用户名" />

3.2 最小长度验证

我们可以使用 data-minlength 属性指定文本框输入最小长度，同时也可以自定义提示信息。

<input type="text" name="password" data-minlength="6" data-rep-msg="密码长度不能少于6个字符" />

3.3 最大长度验证

使用 data-maxlength 属性指定表单输入最大长度，同样也可以自定义提示信息。

<input type="text" name="email" data-maxlength="50" data-rep-msg="邮箱长度不能大于50个字符" />

3.4 正则表达式验证

使用 data-type 属性指定一个正则表达式进行验证，同时也可以自定义提示信息。

<input type="text" name="phone" data-type="/^1[3|4|5|7|8][0-9]{9}$/" data-rep-msg="请输入有效手机号" />

4. 完整的示例代码

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>jbvalidator demo</title>
    <script src="jquery.js"></script>
    <script src="jbvalidator.js"></script>
  </head>
  <body>
    <form class="jbvalidate">
      <div>
        <label>用户名：</label>
        <input type="text" name="username" required data-rep-msg="请输入用户名" />
      </div>
      <div>
        <label>密码：</label>
        <input type="text" name="password" data-minlength="6" data-rep-msg="密码长度不能少于6个字符" />
      </div>
      <div>
        <label>邮箱：</label>
        <input type="text" name="email" data-maxlength="50" data-rep-msg="邮箱长度不能大于50个字符" />
      </div>
      <div>
        <label>手机号：</label>
        <input type="text" name="phone" data-type="/^1[3|4|5|7|8][0-9]{9}$/" data-rep-msg="请输入有效手机号" />
      </div>
      <button type="submit">提交</button>
    </form>
  </body>
</html>

以上就是使用 jbvalidator 插件进行表单验证的完整攻略。需要注意，使用表单验证插件时我们不仅仅是为了提示用户输入错误，更主要的是为了防止不合法的数据提交到后台，因此在后台也需进行一定的数据验证。

Tags: