基于Bootstrap 3 JQuery及RegExp的表单验证功能

2023年6月10日下午7:18 • JavaScript

针对“基于Bootstrap 3 JQuery及RegExp的表单验证功能”的完整攻略，下面我们分步骤进行讲解。

1. 引入依赖

首先，我们需要在网页中引入所需的相关依赖，包括Bootstrap 3、JQuery和RegExp，可以通过CDN或者本地文件进行引入。

<head>
  <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  <script src="https://cdn.bootcss.com/jquery-form-validator/2.3.26/jquery.form-validator.min.js"></script>
</head>

其中，jquery.form-validator.min.js是用于表单验证的插件，我们需要下载并引入。

2. 编写表单

接下来，我们需要在网页中添加需要验证的表单。

<form>
  <div class="form-group">
    <label for="name">姓名</label>
    <input type="text" class="form-control" name="name" id="name" data-validation="length" data-validation-length="min2">
  </div>
  <div class="form-group">
    <label for="email">邮箱</label>
    <input type="email" class="form-control" name="email" id="email" data-validation="email">
  </div>
  <div class="form-group">
    <label for="phone">手机号</label>
    <input type="tel" class="form-control" name="phone" id="phone" data-validation="custom" data-validation-regexp="^(13|14|15|17|18)[0-9]{9}$">
  </div>
  <button type="submit" class="btn btn-primary">提交</button>
</form>

这里我们只添加了三个需要验证的表单项：姓名、邮箱和手机号，其中data-validation属性用于指定验证类型，data-validation-length和data-validation-regexp用于指定验证规则。

3. 初始化插件

在网页加载完成后，我们需要通过JavaScript代码对表单进行初始化。

$(document).ready(function() {
  $.validate({
    form: 'form',
    onSuccess: function() {
      alert('表单验证通过，准备提交！');
      return true;
    }
  });
});

这里我们调用了插件内置的$.validate()函数，指定需要验证的表单为form，并定义了一个回调函数onSuccess，在表单验证通过后将会触发该函数，我们这里简单地弹出一个提示框。

4. 测试验证

最后，我们可以在网页中输入一些测试数据，进行验证。

例如，我们测试一个包含错误数据的表单：

<form>
  <div class="form-group">
    <label for="name">姓名</label>
    <input type="text" class="form-control" name="name" id="name" data-validation="length" data-validation-length="min2" value="a">
  </div>
  <div class="form-group">
    <label for="email">邮箱</label>
    <input type="email" class="form-control" name="email" id="email" data-validation="email" value="not_email">
  </div>
  <div class="form-group">
    <label for="phone">手机号</label>
    <input type="tel" class="form-control" name="phone" id="phone" data-validation="custom" data-validation-regexp="^(13|14|15|17|18)[0-9]{9}$" value="12345678901">
  </div>
  <button type="submit" class="btn btn-primary">提交</button>
</form>

在填入测试数据后，当我们点击提交按钮时，系统将会提示表单验证失败的原因，并停止提交。

至此，我们就完成了基于Bootstrap 3、JQuery及RegExp的表单验证功能。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：基于Bootstrap 3 JQuery及RegExp的表单验证功能 - Python技术站