介绍和代码

表单验证无论是前后端都有着比较明显的需求，在用户填写表单的时候，需要给到用户提示，当用户输入的数据满足预期时给到用户反馈。之前在学习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，表单中提交按钮的函数。直接可以使用。将来用来提交表单的具体代码可以放进去。

值得注意的是：

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

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

bootstrap html5 表单验证,基于Bootstrap+jQuery.validate实现表单验证
这大概是一种惯例,学习前台后台最开始接触的业务都是用户注册和登录.现在社会坚持以人为本的理念,在网站开发过程同样如此.User是我们面对较多的对象,也是较核心的对象.最开始的用户注册和登陆这块,也就尤 ...
使用 jQuery Validate 进行表单验证
jQuery Validate简介 jQuery Validate 插件提供了强大的表单验证功能,能够让客户端表单验证变得更简单,同时它还提供了大量的可定制化选项,以满足应用程序的各种需求.该插件捆绑 ...
jQuery Validate 提交表单验证失败扩展方法
由于Validate没有提供表单提交过后,验证不通过触发方法.这里做一下扩展. 引用场景:每次提交表单元素验证不通过触发方法打开源代码找到focusInvalid 方法, 这里是提交表单时验证不通 ...
JQuery.validate.js 表单验证
官方网站:http://bassistance.de/jquery-plugins/jquery-plugin-validation/ API: http://jquery.bassistance.d ...
利用jQuery.validator来做表单验证，不要太轻松（全攻略）
1.介绍 jQuery.validator是给我们用来做表单验证提交时的一个插件,你可以直接去官网下载,也可以通过菜鸟教程学习和下载该插件菜鸟教程(jQuery.validator) 2.使用 2. ...
2013年jQuery Validation Engine 表单验证
目录(?)[-] options 参数说明可选使用方法载入 CSS 文件载入 JavaScript 文件给表单加上 ID 给控件加上 ID 及设置验证类型设置验证验证类型 API 方法 ...
自己编写jQuery插件之表单验证
自己编写jQuery插件之表单验证吐个嘈先:最近状态不咋滴,真是什么都不想干,不想上班,做什么都没动力,觉得没意思.不想这样,不想这样,快让这种情绪消失吧,忽忽.... 表单验证在项目中用的还是比较 ...
[vue-element] ElementUI是怎么做表单验证的？在循环里对每个input验证怎么做呢？
[vue] ElementUI是怎么做表单验证的?在循环里对每个input验证怎么做呢? model 绑定表单数据,通过prop取表单数值,通过编写ref进行后台API验证 ,根据rules进行表单内 ...
jquery validation Engine表单验证
jQuery Validation Engine 表单验证来源功能强大的 jQuery 表单验证插件,适用于日常的 E-mail.电话号码.网址等验证及 Ajax 验证,除自身拥有丰富的验证规则外, ...
jQuery Validation Engine 表单验证踩过的一个坑
jQuery Validation Engine表单验证是一个非常简单好用的前端验证插件,具体的使用手册可以参考: http://code.ciaoca.com/jquery/validation-e ...

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

介绍和代码

代码

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

最新文章

热门文章