jQuery Validation Plugin验证插件手动验证


Posted in Javascript onJanuary 26, 2016

jquery.validate是jquery旗下的一个验证框架,借助jquery的优势,我们可以迅速验证一些常见的输入,并且可以自己扩充自己的验证方法,并且对国际化也有很好的支持。

正常的验证模式如下:

<form id="ff" action="xxx"> 
... 
<input type="submit" value="提交"> 
</form> 
[java] view plaincopy在CODE上查看代码片派生到我的代码片
$('#ff').validate()

这样只要点击提交按钮,插件会自动进行验证.

但是有时候我们想要点击其它按钮来验证一下表单,接着根据表单的验证结果来做剩下的事情.

查看源码发现有个form()方法,这个方法就是进行验证操作,虽然方法字面意思不太相符.

然后我们就可以这样操作:

var validator;// 申明一个全局变量 
$(function(){ 
validator = $('#ff').validate();// 这句话会返回一个对象 
}) 
function add() { 
var b = validator.form();// 返回一个布尔值 
if(b){ // 验证成功 
// do add... 
} 
} 
<button onclick="add()">保存</button>

如果验证出错了,会显示错误信息,如果要清除错误信息可以调用validator.resetForm();方法

这样有了validator.form()和validator.resetForm()两个方法我们就可以灵活使用验证插件了.

验证字段

required ?必填字段

remote ? 远程验证

minlength ? 最小长度验证

maxlength ? 最大长度验证

rangelength ? 长度范围验证

min ? 最小值验证

max ? 最大值验证

range ? 范围值验证

email ? 邮件地址验证

url ? URL地址验证

date ?日期验证

dateISO ?ISO 日期格式验证

number ?十进制数验证

digits ?数字验证

creditcard ? 信用卡号验证

equalTo ?和另外一个文本框的值相等验证

Javascript 相关文章推荐
javascript的trim,ltrim,rtrim自定义函数
Sep 21 Javascript
javascript parseInt() 函数的进制转换注意细节
Jan 08 Javascript
jquery 按钮状态效果 正常、移上、按下
Aug 12 Javascript
jquery图片轮播插件仿支付宝2013版全屏图片幻灯片
Apr 03 Javascript
Jquery异步提交表单代码分享
Mar 26 Javascript
在JavaScript中处理数组之reverse()方法的使用
Jun 09 Javascript
jQuery.Form上传文件操作
Feb 05 Javascript
Vue.js中extend选项和delimiters选项的比较
Jul 17 Javascript
详解Vue.js Mixins 混入使用
Sep 15 Javascript
利用Decorator如何控制Koa路由详解
Jun 26 Javascript
解决VUE双向绑定失效的问题
Oct 29 Javascript
解决vue动态下拉菜单 有数据未反应的问题
Aug 06 Javascript
一篇文章掌握RequireJS常用知识
Jan 26 #Javascript
JS正则表达式比较常见用法
Jan 26 #Javascript
WebGL利用FBO完成立方体贴图效果完整实例(附demo源码下载)
Jan 26 #Javascript
JS组件中bootstrap multiselect两大组件较量
Jan 26 #Javascript
JS组件Form表单验证神器BootstrapValidator
Jan 26 #Javascript
jQuery实现的指纹扫描效果实例(附演示与demo源码下载)
Jan 26 #Javascript
Bootstrap树形组件jqTree的简单封装
Jan 25 #Javascript
You might like
VB中的RasEnumConnections函数返回632错误解决方法
2014/07/29 PHP
php使用pdo连接mssql server数据库实例
2014/12/25 PHP
php连接oracle数据库的核心步骤
2016/05/26 PHP
php实现基于pdo的事务处理方法示例
2017/07/21 PHP
JQUERY对单选框(radio)操作的小例子
2013/04/25 Javascript
利用js的Node遍历找到repeater的一个字段实例介绍
2013/04/25 Javascript
浅析XMLHttpRequest的缓存问题
2013/12/13 Javascript
上传文件返回的json数据会被提示下载问题解决方案
2014/12/03 Javascript
JavaScript继承学习笔记【新手必看】
2016/05/10 Javascript
jQuery插件jqGrid动态获取列和列字段的方法
2017/03/03 Javascript
JS实现的简单拖拽功能示例
2017/03/13 Javascript
JavaScript生成图形验证码
2020/08/24 Javascript
angular4模块中给标签添加背景图的实现方法
2017/09/15 Javascript
Vue $mount实战之实现消息弹窗组件
2019/04/22 Javascript
详解vue 在移动端体验上的优化解决方案
2019/05/20 Javascript
Vue 设置axios请求格式为form-data的操作步骤
2019/10/29 Javascript
解决$store.getters调用不执行的问题
2019/11/08 Javascript
Python基础教程之正则表达式基本语法以及re模块
2016/03/25 Python
python中文编码与json中文输出问题详解
2018/08/24 Python
用python-webdriver实现自动填表的示例代码
2021/01/13 Python
css3的transform中scale缩放详解
2014/12/08 HTML / CSS
HTML5所有标签汇总及标签意义解释
2015/03/12 HTML / CSS
英国演唱会订票网站:Ticket Selection
2018/03/27 全球购物
意大利领先的奢侈品在线时装零售商:MCLABELS
2020/10/13 全球购物
TCP/IP中的TCP和IP分别承担什么责任
2012/04/21 面试题
开工庆典邀请函范文
2014/01/16 职场文书
有多年工作经验的自我评价
2014/03/02 职场文书
经济职业学院毕业生自荐书
2014/03/17 职场文书
同意迁入证明模板
2014/10/26 职场文书
师范生见习报告范文
2014/11/03 职场文书
公务员考察材料范文
2014/12/23 职场文书
严以律己专题学习研讨会发言材料
2015/11/09 职场文书
初中物理教学反思
2016/02/19 职场文书
Prometheus 监控MySQL使用grafana展示
2021/08/30 MySQL
使用HttpSessionListener监听器实战
2022/03/17 Java/Android
MySQL中IO问题的深入分析与优化
2022/04/02 MySQL