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

介绍和代码

表单验证无论是前后端都有着比较明显的需求，在用户填写表单的时候，需要给到用户提示，当用户输入的数据满足预期时给到用户反馈。之前在学习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属性，可以自定义提示信息

具体用法也很简单，不再赘述。值得注意的是他有一个内置的函数submitHandler，表单中提交按钮的函数。直接可以使用。将来用来提交表单的具体代码可以放进去。

值得注意的是：

默认的一些校验规则，可以根据具体需求修改编写。