bootstrap validator 验证

最新推荐文章于 2023-05-31 22:20:47 发布

user-ds

最新推荐文章于 2023-05-31 22:20:47 发布

阅读量984

点赞数

分类专栏： js-bootstrap组件

本文链接：https://blog.csdn.net/qq_42312459/article/details/85090337

版权

js-bootstrap组件专栏收录该内容

3 篇文章 0 订阅

订阅专栏

是否通过

var result = $(formid).data('bootstrapValidator').validate().isValid();

if(result){

//ajax

}

清楚除验

$(formId).data('bootstrapValidator').resetForm();

重置按钮清除表单加清楚除

 $('#resetBtn').click(function() {
        $('#defaultForm').data('bootstrapValidator').resetForm(true);
     });

密码验证:

function checkForm() {
    $('#menuForm').bootstrapValidator({
        //live: 'disabled',
        //通用提示信息
        message: '必填项',
        trigger: 'blur',
excluded:[":hidden",":disabled",":not(visible)"] ,//bootstrapValidator的默认配置
        //勾叉图标
        feedbackIcons: {
            valid: 'glyphicon glyphicon-ok',
            invalid: 'glyphicon glyphicon-remove',
            validating: 'glyphicon glyphicon-refresh'
        },
        //验证字段
        fields: {
            oldPassword: {
                validators: {
                    notEmpty: {
                        message: '请填写原密码'
                    },remote :{
                        message: '原密码不正确',
                        threshold :4,
                        url: '/checkPassword.do',
                        type :'post',
                        data:{yuanmima:function (){//请求传递参数
                              return  $("#oldPassword").val();
                            }},
                        delay :2000
                    }
                }

, different: {
                      field: 'username',
                        message: '用户名不能和密码相同'


            },
            newPassword: {
                validators: {
                    notEmpty: {
                        message: '请填写新密码'
                    },identical: {
                        field: 'confirmPassword',
                        message: '两次输入的密码不相符'
                    }
                }
            },
            confirmPassword: {
                validators: {
                    notEmpty: {
                        message: '请填写确认密码'
                    },identical: {
                        field: 'newPassword',
                        message: '两次输入的密码不相符'
                    }
                }
            }

        }
    });

    // Validate the form manually
    //给提交按钮绑定单击事件zhsihahfifhao
    $('#updatePasswordBtn').click(function () {
        //获取验证表单对象,验证
        var result = $('#menuForm').data('bootstrapValidator').validate().isValid();
        if (result) {//验证通过
            //ajax提交
      
        }
    });

---------------------------------后台返回---------------------------------------------------------------------

@ResponseBody
@RequestMapping(value = "/checkPassword.do", method = RequestMethod.POST)
public Map checkPassword(String yuanmima, HttpSession session) {
    Map<String, Boolean> map = new HashMap<String, Boolean>();
    SysPolice police = (SysPolice) session.getAttribute(ResourceKeys.ADMIN_LOGIN_KEY);
    String password1 = MD5Utils.md5(yuanmima);
    if (!password1.equals(police.getPassword())) {
        map.put("valid", false);
    } else {
        map.put("valid", true);
    }
    return map;
}

---------------------------------后台返回---------------------------------------------------------------------

验证只能是数字小数

classHour: {
    validators: {
        notEmpty: {
            message: '必填项！'
        },regexp: {
            regexp: /^[0-9]+([.]{1}[0-9]+){0,1}$/,
            message: '学时只能由数字,小数组成'
        }
    }
}

身份证号码

idCard: {
    validators: {
        notEmpty: {},
        regexp: {
            regexp: /^(^[1-9]\d{7}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}$)|(^[1-9]\d{5}[1-9]\d{3}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])((\d{4})|\d{3}[Xx])$)$/,
            message: '身份证号码格式不正确，为15位和18位身份证号码！'
        },
        callback: {
            /*自定义，可以在这里与其他输入项联动校验*/
            message: '身份证号码无效！',
            callback: function (value, validator, $field) {
                //15位和18位身份证号码的正则表达式
                var regIdCard = /^(^[1-9]\d{7}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}$)|(^[1-9]\d{5}[1-9]\d{3}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])((\d{4})|\d{3}[Xx])$)$/;
                //如果通过该验证，说明身份证格式正确，但准确性还需计算
                var idCard = value;
                if (regIdCard.test(idCard)) {
                    if (idCard.length == 18) {
                        var idCardWi = new Array(7, 9, 10, 5, 8, 4, 2, 1, 6, 3, 7, 9, 10, 5, 8, 4, 2); //将前17位加权因子保存在数组里
                        var idCardY = new Array(1, 0, 10, 9, 8, 7, 6, 5, 4, 3, 2); //这是除以11后，可能产生的11位余数、验证码，也保存成数组
                        var idCardWiSum = 0; //用来保存前17位各自乖以加权因子后的总和
                        for (var i = 0; i < 17; i++) {
                            idCardWiSum += idCard.substring(i, i + 1) * idCardWi[i];
                        }
                        var idCardMod = idCardWiSum % 11;//计算出校验码所在数组的位置
                        var idCardLast = idCard.substring(17);//得到最后一位身份证号码
                        //如果等于2，则说明校验码是10，身份证号码最后一位应该是X
                        if (idCardMod == 2) {
                            if (idCardLast == "X" || idCardLast == "x") {
                                return true;
                                //alert("恭喜通过验证啦！");
                            } else {
                                return false;
                                //alert("身份证号码错误！");
                            }
                        } else {
                            //用计算出的验证码与最后一位身份证号码匹配，如果一致，说明通过，否则是无效的身份证号码
                            if (idCardLast == idCardY[idCardMod]) {
                                //alert("恭喜通过验证啦！");
                                return true;
                            } else {
                                return false;
                                //alert("身份证号码错误！");
                            }
                        }
                    }
                } else {
                    //alert("身份证格式不正确!");
                    return false;
                }
            }
        }
    }
}

日期

birthday: {
    validators: {
        notEmpty: {
            message: '请填写出生日期！'
        },
        date: {
            format: 'YYYY/MM/DD',
            message: '出生日期格式错误'
        }
    }
}

长度

stringLength: {
    min: 10,
    max: 12,
    message: '注意长度！'
}

通过正则表达式进行验证

regexp: {
          regexp: /^[A-Z\s]+$/i,
          message: '名字只能由字母字符和空格组成。'
                    }

 regexp: {
                         regexp: /^1[3|5|8]{1}[0-9]{9}$/,
                         message: '请输入正确的手机号码'
                     }

$('#CusForm').bootstrapValidator({
fields : {
//验证手机
'customer.mobile' : { //input中的name 值
validators:{
regexp: {
regexp: /^1\d{10}$/ ,
message: '请输入正确的11位手机号'
}

}
},
//验证座机
'customer.phone' : {
validators:{
regexp: {
regexp: /^$|(0[0-9]{2,3}\-)?([2-9][0-9]{6,7})+(\-[0-9]{1,4})?$/ ,
message: '请输入正确座机电话'
}

}
},
//验证邮箱
'customer.email' : {
validators:{
regexp: {
regexp: /^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/ ,
message: '请输入正确的邮箱地址'
}

}
},


}
});

大小写验证

stringCase: {
          message: '姓氏必须只包含大写字符。',
          case: 'upper'//其他值或不填表示只能小写字符
                    },

.纯数字验证

 digits: {
         message: '该值只能包含数字。'
                    }

复选框验证

choice: {
min: 2,
max: 4,
message: '请选择2-4项'
}

判断输入数字是否符合大于18小于100

greaterThan: {
value: 18
},
lessThan: {
value: 100
}

email: {
                validators: {
emailAddress: {
                         message: 'The input is not a valid email address'
                   }
                 }
             },

 different: {//不能和用户名相同
                         field: 'username',//需要进行比较的input name值
                         message: '不能和用户名相同'
                     }

 emailAddress: {
                         message: '请输入正确的邮件地址如：123@qq.com'
                     }

解决使用remote验证需双击按钮才提交的问题

function save() {
    checkPolice_save();
    //校验结果
    var result = $('#mainform').data('bootstrapValidator').validate().isValid();
    //解决远程验证需双击按钮才提交的问题
    setTimeout(function () {
        var result2 = $('#mainform').data('bootstrapValidator').validate().isValid();
        if(result2){
            var zhize = $("#zhize").val();
            map['zhize'] = zhize;
            $.ajax({
                url: "/addpolice.do",
                type: "post",
                dataType: "json",
                contentType: 'application/json', // 这句不加出现415错误:Unsupported Media Type
                data: JSON.stringify(map), // 以json字符串方式传递
                success: function (data) {
                    if (data.result) {
                        Swal({
                            position: 'center',
                            type: 'success',
                            title: data.message,
                            showConfirmButton: false,
                            timer: 1500
                        });
                    } else {
                        Swal({
                            position: 'center',
                            type: 'error',
                            title: data.message,
                            showConfirmButton: false,
                            timer: 1500
                        });
                    }
                    ;
                    clearBootstrapValidator('#mainform');
                    clearForm('mainform');
                    $("#policeModal").modal("hide");
                    $("#PoliceTable").bootstrapTable('refresh', data);
                }, error: function (data) {
                    //window.location.href = "/error.do";
                }
            })
        }
    },500)

}

user-ds

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
bootstrap validator 验证

是否通过var result = $(formid).data('bootstrapValidator').validate().isValid();if(result){//ajax}清楚除验$(formId).data('bootstrapValidator').resetForm();重置按钮清除表单加清楚除 $('#resetBtn').click(f...
复制链接

扫一扫

专栏目录