后台管理系统之用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