欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

后台管理系统之用bootstrap-validator做表单验证

程序员文章站 2022-07-02 09:00:24
介绍和代码上一篇博客介绍了用JQuery-validate做表单验证,这只是多种表单验证方法中的一种,今天学习到的是bootstrap-validator来做表单验证。显然他需要依赖bootstrap的js和css,他是依赖于jquery的插件,所以也需要JQuery的js文件,当然还有他自己特有的bootstra-vaildator的css。他比JQuery-validate更为美观,交互友好性也更强,他有图标给到用户提示。第一步引用对应的文件。以及需要验证的表单,为了对比使用和上一篇博客一样的表...

介绍和代码

上一篇博客介绍了用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("提交")
	})

效果

后台管理系统之用bootstrap-validator做表单验证
后台管理系统之用bootstrap-validator做表单验证
关于表单验证至此学习了三种办法。看似简单的需求其中肯定还有很多可以继续研究的地方,今后遇到了再一并记录学习。

本文地址:https://blog.csdn.net/qq_42285889/article/details/107547719