bootstrapvalidator 使用bootstrap validator的remote验证代码经验分享(推荐)-JavaScript教程
当前位置：&>&&>& &
使用bootstrap validator的remote验证代码经验分享(推荐)
bootstrapvalidator 使用bootstrap validator的remote验证代码经验分享(推荐)
|　来源:网络 | 关键字：
这里需要说一下，bootstrapvalidator的帮助文档写的比较简单，对于remote验证器的说明更是如此，在经历多方测试之后才明白如何使用这个验证器。一个典型的ajax验证代码如下:服务端验证
这里需要说一下，bootstrapvalidator的帮助文档写的比较简单，对于remote验证器的说明更是如此，在经历多方测试之后才明白如何使用这个验证器。一个典型的ajax验证代码如下:服务端验证代码(使用spring mvc)如下:/** 返回String类型的结果* 检查用户名的合法性,如果用户已经存在，返回false，否则返回true(返回json数据，格式为{"valid",true})*/@RequestMapping(value = "/checkNameExistsMethod1", produces = "application/charset=UTF-8")public @ResponseBodyString checkNameValidMethod1(@RequestParam String name) {boolean result =List&Employee& lstEmployees = employeeService.getAllEmployees();for (Employee employee : lstEmployees) {if (employee.getName().equals(name)) {result =}}Map&String, Boolean& map = new HashMap&&();map.put("valid", result);ObjectMapper mapper = new ObjectMapper();String resultString = "";try {resultString = mapper.writeValueAsString(map);} catch (JsonProcessingException e) {e.printStackTrace();}return resultS}这里需要说明的是bootstrap的remote验证器需要的返回结果一定是json格式的数据 :{"valid":false} //表示不合法，验证不通过{"valid":true} //表示合法，验证通过如果返回任何其他的值，页面验证将获取不到验证结果导致无法验证。附一段完整的远程remote验证的代码加说明：$(function(){/* 文档加载，执行一个函数*/$('#defaultForm').bootstrapValidator({message: 'This value is not valid',feedbackIcons: {/*input状态样式图片*/valid: 'glyphicon glyphicon-ok',invalid: 'glyphicon glyphicon-remove',validating: 'glyphicon glyphicon-refresh'},fields: {/*验证：规则*/username: {//验证input项：验证规则message: 'The username is not valid',validators: {notEmpty: {//非空验证：提示消息message: '用户名不能为空'},stringLength: {min: 6,max: 30,message: '用户名长度必须在6到30之间'},threshold : 6 , //有6字符以上才发送ajax请求，（input中输入一个字符，插件会向服务器发送一次，设置限制，6字符以上才开始）remote: {//ajax验证。server result:{"valid",true or false} 向服务发送当前input name值，获得一个json数据。例表示正确：{"valid",true} url: 'exist2.do',//验证地址message: '用户已存在',//提示消息delay : 2000,//每输入一个字符，就发ajax请求，服务器压力还是太大，设置2秒发送一次ajax（默认输入一个字符，提交一次，服务器压力太大）type: 'POST'//请求方式/**自定义提交数据，默认值提交当前input value* data: function(validator) {return {password: $('[name="passwordNameAttributeInYourForm"]').val(),whatever: $('[name="whateverNameAttributeInYourForm"]').val()};}*/},regexp: {regexp: /^[a-zA-Z0-9_.]+$/,message: '用户名由数字字母下划线和.组成'}}},password: {message:'密码无效',validators: {notEmpty: {message: '密码不能为空'},stringLength: {min: 6,max: 30,message: '用户名长度必须在6到30之间'},identical: {//相同field: 'password', //需要进行比较的input name值message: '两次密码不一致'},different: {//不能和用户名相同field: 'username',//需要进行比较的input name值message: '不能和用户名相同'},regexp: {regexp: /^[a-zA-Z0-9_.]+$/,message: 'The username can only consist of alphabetical, number, dot and underscore'}}},repassword: {message: '密码无效',validators: {notEmpty: {message: '用户名不能为空'},stringLength: {min: 6,max: 30,message: '用户名长度必须在6到30之间'},identical: {//相同field: 'password',message: '两次密码不一致'},different: {//不能和用户名相同field: 'username',message: '不能和用户名相同'},.cnregexp: {//匹配规则regexp: /^[a-zA-Z0-9_.]+$/,message: 'The username can only consist of alphabetical, number, dot and underscore'}}},email: {validators: {notEmpty: {message: '邮件不能为空'},emailAddress: {message: '请输入正确的邮件地址如：'}}},phone: {message: 'The phone is not valid',validators: {notEmpty: {message: '手机号码不能为空'},stringLength: {min: 11,max: 11,message: '请输入11位手机号码'},regexp: {regexp: /^1[3|5|8]{1}[0-9]{9}$/,message: '请输入正确的手机号码'}}},invite: {message: '邀请码',validators: {notEmpty: {message: '邀请码不能为空'},stringLength: {min: 8,max: 8,message: '请输入正确长度的邀请码'},regexp: {regexp: /^[w]{8}$/,message: '请输入正确的邀请码(包含数字字母)'}}},}}).on('success.form.bv', function(e) {//点击提交之后// Prevent form submissione.preventDefault();// Get the form instancevar $form = $(e.target);// Get the BootstrapValidator instancevar bv = $form.data('bootstrapValidator');// Use Ajax to submit form data 提交至form标签中的action，result自定义$.post($form.attr('action'), $form.serialize(), function(result) {//do something...});});});以上所述是小编给大家介绍的使用bootstrap validator的remote验证经验分享(推荐)，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！
网友评论仅供其表达个人看法，并不表明网易立场。导致的原因：
1、未正确引入bootstrapValidator所需要的文件，避免css、js的引入顺序错误
2、提示图标不显示是因为需要引入glyphicons字体，在资源文件创建fonts文件，并引入相关字体文件，或者使用fontAwesome
3、全部都引入还是出现错误，则检查表单的设计是否合理，需要使用form-group、form-control，按照bootstrapValidator的表单格式进行设置
参考知识库
* 以上用户言论只代表其个人观点，不代表CSDN网站的观点或立场
访问：362次
排名：千里之外你的浏览器禁用了JavaScript, 请开启后刷新浏览器获得更好的体验!
代码如下：
$('#form1')
.bootstrapValidator({
message: 'This value is not valid',
feedbackIcons: {
valid: 'glyphicon glyphicon-ok',
invalid: 'glyphicon glyphicon-remove',
validating: 'glyphicon glyphicon-refresh'
message: 'The username is not valid',
validators: {
notEmpty: {
message: 'The username is required and can\'t be empty'
stringLength: {
message: 'The username must be more than 6 and less than 30 characters long'
/remote: {
url: 'remote.php',
message: 'The username is not available'
regexp: /^[a-zA-Z0-9_.]+$/,
message: 'The username can only consist of alphabetical, number, dot and underscore'
ame: 这样写貌似不行啊，但是input的name属性确实又是ame，大家有没有碰到过这种问题，点解。。
在线等啊，求大神
给字段名加上双引号
message:&'The&username&is&not&valid',
validators:&{
notEmpty:&{
message:&'The&username&is&required&and&can\'t&be&empty'
要回复问题请先或
浏览: 4442
关注: 2 人bootstrap动态添加验证项和取消验证项【bootstrapvalidator校验、校验清除重置】
bootstrapvalidator校验、校验清除重置：
$('#form1').data('bootstrapValidator').enableFieldValidators('file',
下面的是实验的代码都不好使 ↓，上面的是正确的校验重置 ↑：
&&$('#form1').bootstrapValidator({
message: 'This value is not valid',
excluded: [':disabled'],
&&$('#form1').data('bootstrapValidator')
.updateStatus('file', 'NOT_VALIDATED', null)
.validateField('file');&
&&//$('#form1').data('bootstrapValidator').validateField('file');
$('#form1').data('bootstrapValidator')
.updateStatus('file', 'NOT_VALIDATED', null)
.validateField('file');&
&&//$("#form1").data('bootstrapValidator').destroy();
//$('#form1').data('bootstrapValidator', null);
//$('#form1').bootstrapValidator();
enableFieldValidators
enableFieldValidators(field, enabled) —
Enable/disable all validators to given field
Description
The field name
If true, enable field validators. If
false, disable field validators
已投稿到：
以上网友发言只代表其个人观点，不代表新浪网的观点或立场。