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类和继承 constructor属性
Mar 04 Javascript
Ext 今日学习总结
Sep 19 Javascript
jQuery代码优化 选择符篇
Nov 01 Javascript
电子商务网站上的常用的js放大镜效果
Dec 08 Javascript
javaScript让文本框内的最后一个文字的后面获得焦点实现代码
Jan 06 Javascript
jQuery学习笔记之 Ajax操作篇(二) - 数据传递
Jun 23 Javascript
基于JavaScript实现百叶窗动画效果不只单纯flas可以实现
Feb 29 Javascript
javascript实现下雪效果【实例代码】
May 03 Javascript
JS中使用FormData上传文件、图片的方法
Aug 07 Javascript
angularjs实现首页轮播图效果
Apr 14 Javascript
基于jQuery和CSS3实现APPLE TV海报视差效果
Jun 16 jQuery
Vue-CLI 3 scp2自动部署项目至服务器的方法
Jul 24 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
elgg 获取文件图标地址的方法
2010/03/20 PHP
BOOM vs RR BO3 第二场2.13
2021/03/10 DOTA
获取css样式表内样式的js函数currentStyle(IE),defaultView(FF)
2011/02/14 Javascript
javascript对象的使用和属性操作示例详解
2014/03/02 Javascript
button没写type=button会导致点击时提交
2014/03/06 Javascript
JavaScript中的DSL元编程介绍
2015/03/15 Javascript
jQuery实现仿路边灯箱广告图片轮播效果
2015/04/15 Javascript
javascript精确统计网站访问量实例代码
2015/12/19 Javascript
BootStrap iCheck插件全选与获取value值的解决方法
2016/08/24 Javascript
简单的js表格操作
2016/09/24 Javascript
javascript判断回文数详解及实现代码
2017/02/03 Javascript
Base64(二进制)图片编码解析及在各种浏览器的兼容性处理
2017/02/09 Javascript
vue.js的提示组件
2017/03/02 Javascript
Windows下快速搭建NodeJS本地服务器的步骤
2017/08/09 NodeJs
three.js 入门案例详解
2018/01/23 Javascript
基于elementUI使用v-model实现经纬度输入的vue组件
2019/05/12 Javascript
使用jQuery实现购物车
2020/10/29 jQuery
Python基于PycURL实现POST的方法
2015/07/25 Python
理解生产者消费者模型及在Python编程中的运用实例
2016/06/26 Python
Python利用pandas计算多个CSV文件数据值的实例
2018/04/19 Python
Python生成器generator用法示例
2018/08/10 Python
Python数据分析:手把手教你用Pandas生成可视化图表的教程
2018/12/15 Python
Python数据类型之Set集合实例详解
2019/05/07 Python
django框架中ajax的使用及避开CSRF 验证的方式详解
2019/12/11 Python
使用python 将图片复制到系统剪贴中
2019/12/13 Python
python继承threading.Thread实现有返回值的子类实例
2020/05/02 Python
python openssl模块安装及用法
2020/12/06 Python
Python基于opencv的简单图像轮廓形状识别(全网最简单最少代码)
2021/01/28 Python
师范大学音乐表演专业求职信
2013/10/23 职场文书
社区敬老月活动实施方案
2014/02/17 职场文书
人事任命书怎么写
2014/06/05 职场文书
交通事故协议书范文
2014/10/23 职场文书
2015年度环卫处工作总结
2015/07/24 职场文书
五年级语文教学反思
2016/03/03 职场文书
实习报告范文之电话客服岗位
2019/07/26 职场文书
聊聊配置 Nginx 访问与错误日志的问题
2022/05/25 Servers