1,添加相关js和css
<script src="~/js/jquery/jquery.min.js"></script>
<script src="~/js/bootstrap/bootstrap.min.js"></script>
<link href="~/css/bootstrap.min.css" rel="stylesheet" />
<script src="~/js/bootstrapvalidator/bootstrapValidator.min.js"></script>
<script src="~/js/bootstrapvalidator/zh_CN.js"></script>
<link href="~/css/bootstrapValidator.min.css" rel="stylesheet" />
2,初始化验证规则
$("#formAppointment").bootstrapValidator({
message: '输入值不合法',
excluded: [":disabled"],
feedbackIcons: {
valid: 'glyphicon glyphicon-ok',
invalid: 'glyphicon glyphicon-remove',
validating: 'glyphicon glyphicon-refresh'
},
fields: {
appointmentName: {
message: '主访人不合法',
validators: {
notEmpty: {
message: '主访人不能为空'
},
stringLength: {
min: 3,
max: 30,
message: '请输入3到30个字符'
},
regexp: {
regexp: /^[a-zA-Z0-9_\. \u4e00-\u9fa5 ]+$/,
message: '用户名只能由字母、数字、点、下划线和汉字组成 '
}
}
}, sid: {
validators: {
notEmpty: {
message: '身份证不能为空'
}, 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位身份证号码!'
}
}
}, phone: {
validators: {
notEmpty: {
message: '手机号不能为空'
},
regexp: {
regexp: /^1[34578]\d{9}$/,
message: '请输入完整手机号码!'
}
}
}, Img: {
trigger:"change",
validators: {
notEmpty: {
message: '请拍摄照片'
}
}
}, content: {
validators: {
notEmpty: {
message: '访问内容不能为空'
},
stringLength: {
min: 6,
max: 500,
message: '请输入6到500个字符'
}
}
}
, department: {
validators: {
notEmpty: {
message: '受访部门不能为空'
},
callback: {
message: '请选择受访部门',
callback: function (value, validator) {
if (value == -1) {
return false;
} else {
return true;
}
}
}
}
}
}
});
3,提交时触发验证
$("#okBtn").on('click',function () {
$("#formAppointment").bootstrapValidator('validate');//提交验证,手动对表单进行校检
if ($("#formAppointment").data('bootstrapValidator').isValid()) {
//判断校检是否通过
}
});