后台管理系统之用bootstrap-validator做表单验证
介绍和代码
上一篇博客介绍了用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