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

后台管理系统之用JQuery-validate做表单验证

程序员文章站 2022-03-21 22:39:19
介绍和代码表单验证无论是前后端都有着比较明显的需求,在用户填写表单的时候,需要给到用户提示,当用户输入的数据满足预期时给到用户反馈。之前在学习JS的时候也学习过用正则表达式原生js写表单验证,无非是onblur时间发生时通过操作dom元素拿到用户输入的数据然后在用正则表达式进行规范,满足则怎么样,不满足则怎么样。jQuery Validate 插件为表单提供了强大的验证功能,让客户端表单验证变得更简单,同时提供了大量的定制选项,满足应用程序各种需求。该插件捆绑了一套有用的验证方法,包括 URL 和电子...

介绍和代码

表单验证无论是前后端都有着比较明显的需求,在用户填写表单的时候,需要给到用户提示,当用户输入的数据满足预期时给到用户反馈。之前在学习JS的时候也学习过用正则表达式原生js写表单验证,无非是onblur时间发生时通过操作dom元素拿到用户输入的数据然后在用正则表达式进行规范,满足则怎么样,不满足则怎么样。

jQuery Validate 插件为表单提供了强大的验证功能,让客户端表单验证变得更简单,同时提供了大量的定制选项,满足应用程序各种需求。该插件捆绑了一套有用的验证方法,包括 URL 和电子邮件验证,同时提供了一个用来编写用户自定义方法的 API。所有的捆绑方法默认使用英语作为错误信息,且已翻译成其他 37 种语言。
该插件是由 Jörn Zaefferer 编写和维护的,他是 jQuery 团队的一名成员,是 jQuery UI 团队的主要开发人员,是 QUnit 的维护人员。该插件在 2006 年 jQuery 早期的时候就已经开始出现,并一直更新至今。目前版本是 1.14.0

看了介绍就能清楚的知道,JQuery-validate依赖于jQuery,所以在使用的时候我们自然需要引入对应的css和js包,然后就是他自己特有的js和css,

代码

<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>

首先因为是表单验证,当然是要给form加一个id值作为标识。
接下来就是js部分,这个验证函数放在进入这个页面的点击事件中,也就是点击进入到页面就执行函数。

handleSubmit:function(){
	$("#form-user").validate({
		rules:{
		loginName:{
			required:true,//这是必填的
			//具体规则直接菜鸟查 也存在着许多默认规则直接用
			//remote:"check.php"//使用ajax方法调用check.php验证输入值 这就是可以连接到后端在后端做验证
			rangelength:[5,10]
		}	
		},
		messages:{
			loginName:{
				required:"用户名不能为空",//定制写法
				rangelength:"登录名长度只能在5~10之间"
			}
		},
		
		submitHandler:function(){
			alert("提交")
		},
		
	})
},

具体用法:先通过id找到表单,调用validate方法,方法里有一个重要的属性叫rules(规则),然后这个属性也是一个对象,对象里面装的是需要进行验证的属性,属性是控件的name,本例控件name是loginName,所以将其填上,他也是一个对象,对象里面是validate内置的属性,例如required:true。意思就是不能为空。而rangelength[5,10]则是长度在5~10之间。
下面还有一个messages属性,可以自定义提示信息
后台管理系统之用JQuery-validate做表单验证
具体用法也很简单,不再赘述。值得注意的是他有一个内置的函数submitHandler,表单中提交按钮的函数。直接可以使用。将来用来提交表单的具体代码可以放进去。

值得注意的是:
后台管理系统之用JQuery-validate做表单验证
默认的一些校验规则,可以根据具体需求修改编写。
后台管理系统之用JQuery-validate做表单验证
后台管理系统之用JQuery-validate做表单验证

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