JS组件Form表单验证神器BootstrapValidator是一款强大的前端表单验证插件,可以有效地提高表单的验证效率和用户的交互体验。以下是BootstrapValidator的完整攻略。
简介
BootstrapValidator是一款轻量级的jQuery表单验证插件,支持20多种表单验证规则,允许自定义规则和错误提示信息,还支持实时验证、提交时验证和消息提示等功能,非常适合于前端表单验证场景。
安装
可以通过npm或者手动下载的方式安装BootstrapValidator。具体步骤如下:
通过npm安装
npm install bootstrap-validator
手动下载
从BootstrapValidator的官方网站中下载最新版本的压缩包,并解压到代码库中。
<!-- 在<head>标签中引入css文件 -->
<link href="/path/to/bootstrap-validator.min.css" rel="stylesheet"/>
<!-- 在<body>标签最低部引入js文件 -->
<script src="/path/to/bootstrap-validator.min.js"></script>
基本配置
$(document).ready(function() {
$('form').bootstrapValidator({
// 配置参数
});
});
验证规则
BootstrapValidator支持20多种表单验证规则,包括非空、长度、整数、邮箱、URL、电话号码、身份证号码等等,可以满足大部分的验证需求。
例如,以下是一个验证身份证号码的规则配置:
idCard: {
validator: function(value) {
var re = /^\d{17}[\d|X]$/;
return re.test(value);
},
message: '请输入正确的身份证号码'
}
自定义验证规则
在BootstrapValidator中,可以通过addValidator方法来自定义表单验证规则。
例如,以下是一个自定义验证手机号码的规则配置:
$.fn.bootstrapValidator.validators.phone = {
validate: function(validator, $field, options) {
var value = $field.val();
if (value.length === 0) {
return true;
}
var re = /^1\d{10}$/;
return re.test(value);
},
message: '请输入正确的手机号码'
}
错误提示信息
BootstrapValidator默认提供了一些错误提示信息,例如字段不能为空、长度不能少于、邮箱格式错误等等。如果需要自定义错误提示信息,可以通过配置message属性来实现。
例如,以下是一个自定义错误提示信息的规则配置:
username: {
validators: {
notEmpty: {
message: '用户名不能为空'
},
stringLength: {
min: 6,
max: 18,
message: '用户名长度必须在6-18个字符之间'
}
}
}
实时验证
BootstrapValidator支持实时验证,在用户对表单进行输入时进行验证,可以提高用户的交互体验。
例如,以下是一个实时验证的规则配置:
email: {
validators: {
notEmpty: {
message: '请输入邮箱'
},
emailAddress: {
message: '请输入正确的邮箱'
}
}
}
提交时验证
BootstrapValidator还支持提交时验证,在用户点击提交按钮时进行验证,可以避免无效的提交操作。
例如,以下是一个提交时验证的规则配置:
$('form').bootstrapValidator({
submitButtons: '#submitButton',
message: '提交失败,请检查表单内容',
fields: {
username: {
validators: {
notEmpty: {
message: '用户名不能为空'
},
stringLength: {
min: 6,
max: 18,
message: '用户名长度必须在6-18个字符之间'
}
}
},
password: {
validators: {
notEmpty: {
message: '密码不能为空'
},
stringLength: {
min: 8,
max: 16,
message: '密码长度必须在8-16个字符之间'
},
identical: {
field: 'confirm_password',
message: '两次输入的密码不一致'
}
}
}
},
submitHandler: function(validator, form, submitButton) {
alert('提交成功');
}
});
示例说明
以下是两个示例,分别为实时验证和提交时验证的演示。
实时验证
<!DOCTYPE html>
<html>
<head>
<title>实时验证</title>
<link rel="stylesheet" href="//cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" href="//cdn.bootcss.com/bootstrap-validator/0.5.3/css/bootstrapValidator.min.css">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-12">
<form id="myForm" method="post">
<div class="form-group">
<label>用户名</label>
<input type="text" class="form-control" name="username">
</div>
<div class="form-group">
<label>邮箱</label>
<input type="text" class="form-control" name="email">
</div>
<div class="form-group">
<label>密码</label>
<input type="password" class="form-control" name="password">
</div>
<button type="submit" class="btn btn-primary">提交</button>
</form>
</div>
</div>
</div>
<script src="//cdn.bootcss.com/jquery/2.1.4/jquery.min.js"></script>
<script src="//cdn.bootcss.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="//cdn.bootcss.com/bootstrap-validator/0.5.3/js/bootstrapValidator.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#myForm').bootstrapValidator({
fields: {
username: {
message: '用户名验证失败',
validators: {
notEmpty: {
message: '用户名不能为空'
},
stringLength: {
min: 6,
max: 18,
message: '用户名长度必须在6-18个字符之间'
}
}
},
email: {
validators: {
notEmpty: {
message: '邮箱不能为空'
},
emailAddress: {
message: '邮箱格式不正确'
}
}
},
password: {
validators: {
notEmpty: {
message: '密码不能为空'
},
stringLength: {
min: 6,
max: 18,
message: '密码长度必须在6-18个字符之间'
}
}
}
}
});
});
</script>
</body>
</html>
提交时验证
<!DOCTYPE html>
<html>
<head>
<title>提交时验证</title>
<link rel="stylesheet" href="//cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" href="//cdn.bootcss.com/bootstrap-validator/0.5.3/css/bootstrapValidator.min.css">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-12">
<form id="myForm" method="post">
<div class="form-group">
<label>用户名</label>
<input type="text" class="form-control" name="username">
</div>
<div class="form-group">
<label>密码</label>
<input type="password" class="form-control" name="password">
</div>
<div class="form-group">
<label>确认密码</label>
<input type="password" class="form-control" name="confirm_password">
</div>
<button type="submit" class="btn btn-primary" id="submitButton">提交</button>
</form>
</div>
</div>
</div>
<script src="//cdn.bootcss.com/jquery/2.1.4/jquery.min.js"></script>
<script src="//cdn.bootcss.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="//cdn.bootcss.com/bootstrap-validator/0.5.3/js/bootstrapValidator.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#myForm').bootstrapValidator({
submitButtons: '#submitButton',
message: '提交失败,请检查表单内容',
fields: {
username: {
validators: {
notEmpty: {
message: '用户名不能为空'
},
stringLength: {
min: 6,
max: 18,
message: '用户名长度必须在6-18个字符之间'
}
}
},
password: {
validators: {
notEmpty: {
message: '密码不能为空'
},
identical: {
field: 'confirm_password',
message: '两次输入的密码不一致'
}
}
}
},
submitHandler: function(validator, form, submitButton) {
alert('提交成功');
}
});
});
</script>
</body>
</html>
通过以上步骤,我们可以成功地安装、配置和使用BootstrapValidator插件。在实际生产项目中,可以根据具体的需求进行定制和扩展,以满足更为复杂的表单验证场景。
本站文章如无特殊说明,均为本站原创,如若转载,请注明出处:JS组件Form表单验证神器BootstrapValidator - Python技术站