BootstrapValidator的使用

说明

BootstrapValidator的使用方式有多种,这里示例了其中一种的完整使用流程,即当点击某个按钮的时候,开始校验,校验通过,则异步提交表单

使用步骤:

第一步:HTML页面上需要有一个表单

//需要提前引入JQuery和bootstrap,因为这个校验是基于bootstrap的
<form id="myForm">
   <div class="form-group">
      <input type="text" class="form-control" id="name" name="name" />
   </div>
   <div class="form-group">
       <div class="radio">
         <label class="radio-inline" style="margin-right:15px;">
          <input type="radio" name="status" id="status1" value="0">启用
         </label>
        <label class="radio-inline" style="margin-right:15px;">
          <input type="radio" name="status" id="status2" value="1">停用
        </label>
       </div>
   </div>
<button type="button" class="btn btn-success" id="mySubmit">提交</button>
</form>

第二步:定义一个对某个表单校验的校验器

<script>
$("#myForm").bootstrapValidator({
    message: 'This value is not valid',
    feedbackIcons: {
        valid: 'glyphicon glyphicon-ok',
        invalid: 'glyphicon glyphicon-remove',
        validating: 'glyphicon glyphicon-refresh'
    },
    fields: {
        //普通字段不为空校验
        name: {
            message: '名称验证失败',
            validators: {
                notEmpty: {
                    message: '名称不能为空'
                },
                //可以在callback里面写上自定义的一些校验规则
                callback: {
                    message: '自定义的校验失败',
                    callback: function(value, validator) {
                         if (value=="") {
                             return false;
                         } else {
                            return true;
                         }
                    }
                }
            }
        },
        //radio不为空校验
        status: {
            message: '状态验证失败',
            validators: {
                notEmpty: {
                    message: '状态必须选择'
                }
            }
        },
       },
});
</script>

第三步:当点击提交的时候,开始校验

 //定义一个校验器
 var bootstrapValidator = $("#myForm").data('bootstrapValidator');
 //执行校验
 bootstrapValidator.validate();
 //判断校验结果
 if(bootstrapValidator.isValid()){
    //校验成功,可以ajax提交表单到服务器
    var status="";                     //得到radio的值
    if($("#status1").is(":checked")){
        status=$("#status1").val();
    }else if($("#status2").is(":checked")){
         status=$("#status2").val();
    }
    var name=$("#name").val().trim();  //得到名称的值
     $.ajax({   
             type:'post',
             data:{
                 "name":name,
                 "status":status
             },
             dataType:'json', 
             url: "${root}/test.do",
             success: function(data) { 
                 if(data.code=="200"){
                      //提交成功
                 }else{
                      //提交失败
                 }
             },
             error:function(data){
                 //提交失败
             }
          });
 }else{
    //校验失败
 }

注意:页面的表单一定要有form-group,不然该校验插件用不了,会报以下的错误

在这里插入图片描述

关于手动校验的操作

对于某些联动的字段,或者得不到焦点的字段,可能有时候不会自动校验,我们需要手动的进行校验。

$("#myForm").data('bootstrapValidator').updateStatus('name', 'notEmpty').validateField('name'); 
  • 1
    点赞
  • 9
    收藏
    觉得还不错? 一键收藏
  • 2
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值