上一篇博客介绍了用JQuery-validate做表单验证，这只是多种表单验证方法中的一种，今天学习到的是bootstrap-validator来做表单验证。
显然他需要依赖bootstrap的js和css，他是依赖于jquery的插件，所以也需要JQuery的js文件，当然还有他自己特有的bootstra-vaildator的css。
他比JQuery-validate更为美观，交互友好性也更强，他有图标给到用户提示。
第一步引用对应的文件。以及需要验证的表单,为了对比使用和上一篇博客一样的表单
我要评论<div class="container" v-show="showEdit">
<div class="row">
<form class="form-horizontal" v-model="user" id="form-user">
<div class="form-group">
<label class="col-sm-3 control-label" >登录名称：</label>
<div class="col-sm-9">
<input type="text" name="loginName" v-model="user.loginName" class="form-control" placeholder="请输入登录名称">
</div>
</div>
</form>
</div>
</div>
第二步编写js
handleSubmit:function(){
//bootstrap 带提示图标的表单验证
$("#form-user").bootstrapValidator({
message: 'This value is not valid',
//live: 'submitted',
feedbackIcons: {
valid: 'glyphicon glyphicon-ok',
invalid: 'glyphicon glyphicon-remove',
validating: 'glyphicon glyphicon-refresh'
},
fields:{
loginName:{
validators:{//验证区（器）里面的属性可以去官网查
notEmpty:"用户名不能为空",
stringLength:{
min:5,
max:10,
message:"用户名的长度只能在5~10之间"
}
},
}
}
}) .on('success.form.bv', function(e){
alert("提交")
})
}
他的使用方式和jquery-validate大同小异。挑重点的介绍并记录。
1.首先用美元符号通过id值找到对应的表单，调用方法bootstrapValidator，其中feedbackIcons对象就是图标的显示，valid验证通过的时候使用的图标，invalid验证不通过的图标还有正在验证的图标。
2.field属性，可以理解为一个容器，把所有需要验证的数据放进来，loginName的数据就是前端html页面中name为loginName的input框里的数据。
3.validators属性，他是最重要的属性，规则都放在这个地方，他是每个要验证数据必须有的属性，这个属性里面的属性就是制定规则的属性了。例如notEmpty，就是该input不能为空，他里面有一个message值，用来自定义提示信息。
4.提交按钮，表单一般都有一个提交按钮，和JQuery-validate不同的是jq-validate的函数也是在他调用的方法里面，而bootstrap-validator的则是使用JQuery的on方法
on方法（jQuery中的),on()方法绑定事件处理程序到当前选定的jQuery对象中的元素。在jQuery 1.7中，.on()方法提供绑定事件处理程序所需的所有功能。(动态绑定事件处理函数)
于是调用.on方法来编写，传值给后端也应在这里完成或是在这调用其他的方法完成。
.on('success.form.bv', function(e){
alert("提交")
})
关于表单验证至此学习了三种办法。看似简单的需求其中肯定还有很多可以继续研究的地方，今后遇到了再一并记录学习。
本文地址：https://blog.csdn.net/qq_42285889/article/details/107547719
如对本文有疑问， 点击进行留言回复！！
JavaScript 好题汇总分享（持续更新，看到好题就写）
XMLHttpRequest 2级 &&进度事件&&JSONP
使用递归原生实现拷贝&&最简单的方法实现深拷贝
网友评论