bootstrap-validator验证表单
本文需求是:点击自定义按钮后触发验证表单格式。使用验证方式是bootstrap-validator插件进行格式验证。下面代码放入对应地方可看见效果
首先需要引入资源
由于有用到bootstrap的一些样式说以也要引用一下bootstrap
<link href="./bootstrap/bootstrap-validator/css/bootstrapValidator.css" rel="stylesheet" />
<script src="./bootstrap/bootstrap-validator/css/bootstrapValidator.js"></script>
<link href="./bootstrap/bootstrap/js/bootstrap.css" rel="stylesheet" />
<script src="./bootstrap/bootstrap/js/bootstrap.min.js"></script>
html代码,结构说明:
- 最外层div为整个验证的范围,后面验证就是绑定在这个元素上,可以是div可以是form不影响
- 第二层div是必须的,嵌套需要验证的控件
- input控件的name属性是验证规则的名字,验证规则在js代码中定义
<div id="form">
<div class="form-group col-lg-4">
<input class="form-control" type="text" name="appendant_name">
</div>
</div>
<button type="button" id="addAppendant" class="btn btn-default">确认</button>
js代码,结构说明
- formValidator()函数是自己定义的,此处表示直接调用,里面就是绑定验证的代码。基本不用修改,修改
$("#form").bootstrapValidator
自己定义绑定的id - 函数中
fields:
表示规则定义,appendant_name这个对象表示是一个控件的验证,调用直接将这个key给到input的name属性。 fields
里面主要定义message
提示信息和validators
,message
是默认提示,validators
是该控件需要同时进行多种验证后返回的,其返回的message可以替换默认。validators
有许多封装好的,可以直接调用(后面罗列几个常用),或者自己写,自定义参考网上其他,我目前用网上的基本够用。或者可以直接写正则,基本一条正则就能解决所有你要的验证。添加正则格式在最下面有。
//初始化表单验证
formValidator()
/*手动验证表单,当是普通按钮时。*/
$('#addAppendant').click(function (){
$('#form').data('bootstrapValidator').validate();//启用验证
let flag = $('#form').data('bootstrapValidator').isValid()
console.log(flag)
})
//form验证规则
function formValidator() {
$("#form").bootstrapValidator({ //formid
message: 'This value is not valid', //默认提示信息
feedbackIcons: { //提示图标
valid: 'glyphicon glyphicon-ok',
invalid: 'glyphicon glyphicon-remove',
validating: 'glyphicon glyphicon-refresh'
},
fields: {
appendant_name: {
message: '名称验证失败',
validators: {
notEmpty: {
message: '附属品名称不能为空'
},
stringLength: {
min: 1,
max: 30,
message: '附属品名称不能超过30个字'
}
}
},
//...其他控件验证
},
})
}
validators中的常见验证
notEmpty: {
message: '帅哥不能为空'
},
digits: {
message: '该值只能包含数字。'
},
date: {
format: 'YYYY/MM/DD',
message: '日期无效'
},
emailAddress: {
message: '邮箱地址格式有误'
},
regexp: {
regexp: /^[A-Z\s]+$/i,
message: '名字只能由字母字符和空格组成。'
},
stringLength: {
min: 6,
max: 30,
message: '用户名长度不能小于6位或超过30位'
},