后台管理系统之用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,表单中提交按钮的函数。直接可以使用。将来用来提交表单的具体代码可以放进去。
值得注意的是:
默认的一些校验规则,可以根据具体需求修改编写。
本文地址:https://blog.csdn.net/qq_42285889/article/details/107498678