BootstrapValidator是一款功能非常强大的基于Bootstrap的jQuery表单验证插件。因为插件本身依赖了bootstrap，所以在使用的过程中还必须引入不是很必要的bootstrap.js和bootstrap.css，这样就显得十分冗余，所以我把插件进行了大量的精简，去掉了bootstrap的依赖的同时也删除了大量的不常用的验证规则，同时把默认语言由英文改为中文。
该表单验证插件的可用验证器有：
callback：通过回调函数返回验证信息。digits：如果输入的值只包含数字返回true。emailAddress：验证电子邮件格式是否有效。phone：验证手机号码格式是否有效。identical：验证输入的值是否和指定字段的值相同。notEmpty：检测字段是否为空。regexp：检测输入值是否和指定的javascript正则表达式匹配。remote：通过AJAX请求来执行远程代码。stringLength：验证字符串的长度。uri：验证URL地址是否有效。
使用这个表单验证插件首先要引入必要的js和css文件。jQuery要求1.9.1+以上的版本。
CSS
.has-feedback {
position: relative
}
.has-success .help-block {
color: #3c763d
}
.has-success .focus input {
border-color: #3c763d;
-webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
box-shadow: inset 0 1px 1px rgba(0,0,0,.075)
}
.has-success .form-control-feedback {
color: #3c763d
}
.has-error .help-block {
color: #a94442
}
.has-error .focus input {
border-color: #a94442;
-webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
box-shadow: inset 0 1px 1px rgba(0,0,0,.075)
}JS
<script src="js/jquery.min.js"></script>
<script src="js/bootstrapValidator.js"></script>HTML结构
<form id="form1" method="post">
<div class="form-item">
<label class="form-label">用户名</label>
<div class="form-con">
<input type="text" class="form-control" name="username" />
</div>
</div>
<div class="form-item">
<label class="form-label">电子邮箱</label>
<div class="form-con">
<input type="text" class="form-control" name="email" />
</div>
</div>
<div class="form-item">
<label class="form-label">密码</label>
<div class="form-con">
<input type="password" class="form-control" name="password" />
</div>
</div>
<div class="form-item">
<label class="form-label">确认密码</label>
<div class="form-con">
<input type="password" class="form-control" name="confirmPassword" />
</div>
</div>
<div class="form-item">
<label class="form-label">验证码</label>
<div class="form-con">
<input type="text" class="form-control" name="captcha" />
</div>
</div>
<div class="form-item">
<div class="form-con">
<button type="submit" class="btn btn-primary">注册</button>
</div>
</div>
</form>在页面加载完毕之后，通过下面的方法来初始化该表单验证插件：
<script type="text/javascript">
$(document).ready(function() {
$('#form1').bootstrapValidator({
//关键配置：最小单元
group: ".form-item",
//关键配置：提交按钮
submitButtons: '[type="submit"]',
fields: {
username: {
message: '请输入一个有效值',
validators: {
notEmpty: {
message: '用户名不能为空'
},
stringLength: {
min: 6,
max: 30,
message: '用户名长度必须介于6至30个字符之间'
},
regexp: {
regexp: /^[a-zA-Z0-9_]+$/,
message: '用户名只能包含数字，字母和下划线'
}
}
},
email: {
validators: {
notEmpty: {
message: '电子邮箱不能为空'
},
emailAddress: {
message: '电子邮箱格式不正确'
}
}
},
password: {
validators: {
notEmpty: {
message: '密码不能为空'
}
}
},
confirmPassword: {
validators: {
notEmpty: {
message: '密码不能为空'
},
identical: {
field: 'password',
message: '前后密码必须一致'
}
}
},
captcha: {
validators: {
notEmpty: {
message: '验证码不能为空'
}
callback: {
message: '验证码不正确',
callback: function(value, validator) {
var value = $('#captcha').val(),
code = "abcd";
return value == code;
}
}
}
}
}
});
});
</script>
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent