木头人的gravatar头像
木头人2017-10-11 00:27:08
bootstrap表单校验插件bootstrapvalidator 4.x使用遇到的问题

对于bootstrap的表单校验,网上有很多插件,在使用了bootstrapvalidator 插件后,把遇到的问题记录下来。首先是对每一个字段写校验:

 $('#form').bootstrapValidator({
        message: 'This value is not valid',
        feedbackIcons: {
            valid: 'glyphicon glyphicon-ok',
            invalid: 'glyphicon glyphicon-remove',
            validating: 'glyphicon glyphicon-refresh'
        },
        fields: {
            firstName: {
                validators: {
                    notEmpty: {
                        message: 'The first name is required and cannot be empty'
                    }
                }
            },
            lastName: {
                validators: {
                    notEmpty: {
                        message: 'The last name is required and cannot be empty'
                    }
                }
            },
            username: {
                message: 'The username is not valid',
                validators: {
                    notEmpty: {
                        message: 'The username is required and cannot be empty'
                    },
                    stringLength: {
                        min: 6,
                        max: 30,
                        message: 'The username must be more than 6 and less than 30 characters long'
                    },
                    regexp: {
                        regexp: /^[a-zA-Z0-9_\.]+$/,
                        message: 'The username can only consist of alphabetical, number, dot and underscore'
                    },
                    remote: {
                        url: 'remote.php',
                        message: 'The username is not available'
                    },
                    different: {
                        field: 'password',
                        message: 'The username and password cannot be the same as each other'
                    }
                }
            },
            email: {
                validators: {
                    emailAddress: {
                        message: 'The input is not a valid email address'
                    }
                }
            },
            password: {
                validators: {
                    notEmpty: {
                        message: 'The password is required and cannot be empty'
                    },
                    identical: {
                        field: 'confirmPassword',
                        message: 'The password and its confirm are not the same'
                    },
                    different: {
                        field: 'username',
                        message: 'The password cannot be the same as username'
                    }
                }
            }
     }
});

然后开启校验:

//方式1:
$('#form').bootstrapValidator('validate');
//方式2:
$("#form").data("bootstrapValidator").validate();

判断校验是否通过:

$("#form").data("bootstrapValidator").isValid();

重置表单:

$('#form').data('bootstrapValidator').resetForm();

但是遇到一个问题要是实现一个radio组怎么办,当radio的值为0,校验生效,radio为1时校验不生效怎么办。网上找了很多方法:动态为字段添加校验

$('#form').bootstrapValidator('addField', 'field', {  
                validators: {  
                    notEmpty: {  
                        message: '内容不能为空'  
                    }  
                }  
 });  

怎样对字段移除校验呢?

//方式1:结果报错
$('#form').bootstrapValidator('removeField', "field");
//方式2:结果报错
$('#form').data('bootstrapValidator')
           .updateStatus('field', 'NOT_VALIDATED', null)
           .validateField('filed');
或
$('#form')
      .bootstrapValidator('updateStatus', $('#text'), 'NOT_VALIDATED')
      .bootstrapValidator('validateField', $('#text'));
  });
//方式3:这个方法可行
$('#form').data('bootstrapValidator').enableFieldValidators("field",false);//校验失效
$('#form').data('bootstrapValidator').enableFieldValidators("field",false);//校验生效

打赏

已有1人打赏

最代码官方的gravatar头像

分享到:

最近浏览
zdm12813611月24日
暂无贡献等级
weienqing11月17日
最代码贡献等级说明
zoainisman11月15日
暂无贡献等级
thisme11月3日
暂无贡献等级
javatwx11月2日
最代码贡献等级说明
49560549011月2日
暂无贡献等级
1823544733710月26日
暂无贡献等级
Luis虎子10月26日
最代码贡献等级说明
wg20020210月26日
暂无贡献等级
steve_201710月26日
最代码贡献等级说明
Evil_dong10月25日
最代码贡献等级说明
zhuangzifeng10月24日
暂无贡献等级
淡心伤10月18日
最代码贡献等级说明
ly055810月17日
最代码贡献等级说明
Allen梅川酷子 LV110月17日
最代码贡献等级说明
灬艾希10月17日
最代码贡献等级说明
小王wang10月16日
最代码贡献等级说明
36450298410月16日
最代码贡献等级说明
232430499710月15日
最代码贡献等级说明
lanhebe10月15日
暂无贡献等级
顶部客服微信二维码底部
>扫描二维码关注最代码为好友扫描二维码关注最代码为好友