针对“基于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技术站
微信扫一扫 
支付宝扫一扫 