jquery.validate:
jqueryValidation: jquery-UI 小组组长;
https://jqueryvalidation.org/; 从页面性能的角度来说:
最好是把js的引入放在结束的body标签上面; 基本功能:
validate:插件的核心方法;
rules:对那些元素规定规则:
required:必须填写,值为true,false digits:正整数; range:取值范围;[18,100] min:最小值;取值数字 max:最大值,取值数字 messages:自定义提示信息; debug:true,不会向远程发送请求,方便本地调试,节约资源; minlength:最小长度;取值数字 maxlength:最大长度;取值数字 rangelength:[2,10]:长度2-10之间; email:邮箱格式,取值true、false url: 校验网址,取值true、false,网址格式:必须http:// dateISO:YYYY-MM-DD校验比较严格 date:校验规则比较宽泛; number:数字,取值true,false equalTo:'#pass':值必须和#pass的值相等; remote:'url',把数据发送到远程进行校验;默认GET 进阶功能:
valid():此方法返回true或者false;代表表单校验是否通过;
rules():获取表单元素的校验规则;比如$('#username').rules();获取到的是验
证规则;
rules('add',rules):
向表单元素增加校验规则;比如:
$('#user').rules('add',{minlength:10,maxlength:20});第一个参数必须是add,第二个参数是规
则配置项;
rules('remove',rules):删除表单元素校验规则;
删除表单元素的校验规则,比如:
$('#user').rules('remove','minlength maxlength ···');第一个参数必须是remove,第二个参数
是删除的规则,多个规则之间以空格隔开; ignore:'#user':忽略#user的校验; submitHandler:验证通过后执行的函数,验证通过后会触发;
invalidHandler:function(event,validator){ }//验证不通过执行的函数;
validator.numberOfInvalids():错误数量; groups:{//规定把哪些元素的错误信息一起显示;
login:'user pass'
},
errorPlacement:function(error,element){//规定把错误信息统一显示在什么位置;
error.insertBefore('#info');//错误信息统一显示在#info的前面;
} onsubmit:是否在提交时验证,取值true,false;
onfocusout:是否在获取焦点是验证
onkeyup:是否在敲击键盘是验证
onclick:是否在鼠标点击时验证,一般用于checkbox或者radio
focusInvalid:提交表单后,未通过验证的表单是否获得焦点;取值true,false
focusCleanup:当未通过验证的元素获得焦点的时候,是否移出错误信息;取值true,false errorClass:指定错误提示的css类名,可以自定义错误提示的样式;
errorClass:'wrong':定义错误信息class名字为wrong validClass:指定验证通过的css类名
validClass:'right':定义正确信息class名字为right; errorElement:使用什么标签标记错误;
errorElement:'div' wrapper:使用什么标签把上边的errorElement包起来
errorLabelContainer:把错误信息统一放在一个容器里面; highlight:可以给未通过的元素加效果; ****unhiglight:取出未通过验证的元素的效果,一般和highlight同时使用; $.validator.addMethod(name,method,message);
name:自定义规则的方法名称
method:function(value,element){}
//方法逻辑;
//value:元素的value值;
//element:当前的元素
message:提示信息;
jquery.validate:的更多相关文章
- jQuery Validate 表单验证 — 用户注册简单应用
相信很多coder在表单验证这块都是自己写验证规则的,今天我们用jQuery Validate这款前端验证利器来写一个简单的应用. 可以先把我写的这个小demo运行试下,先睹为快.猛戳链接--> ...
- jquery validate表单验证插件-推荐
1 表单验证的准备工作 在开启长篇大论之前,首先将表单验证的效果展示给大家. 1.点击表单项,显示帮助提示 2.鼠标离开表单项时,开始校验元素 3.鼠标离开后的正确.错误提示及鼠标移入时的帮 ...
- 修改 jquery.validate.js 支持非form标签
尝试使用markdown来写一篇blog,啦啦啦 源代码传送门:github 在特殊情况下我们使用jquery.validate.js对用户输入的内容做验证的时候,表单并不是一定包含在form之中,有 ...
- 表单验证插件之jquery.validate.js
提到表单验证的插件,第一个想到的就是jquery.validate.js,所以小生想在这里稍微详细地说一下这款插件的具体使用方法,便于理解,我直接附上整段demo的代码(没怎么调样式,主要是看js): ...
- Jquery客户端校验——jquery.validate.js
jQuery Validate 插件为表单提供了强大的验证功能,让客户端表单验证变得更简单,同时提供了大量的定制选项,满足应用程序各种需求.该插件捆绑了一套有用的验证方法,包括 URL 和电子邮件验证 ...
- jquery.validate不用submit而用js提交的例子
$("#form").validate(); $("#btn).click(function(){ if($("#form").valid()){ $ ...
- ASP.NET MVC 5 Jquery Validate
ClientValidationEnabled 在asp.net mvc 5中ClientValidationEnabled默认为TRUE,所以也不需要刻意去设置 应用ValidationAttrib ...
- jQuery Validate验证框架详解
转自:http://www.cnblogs.com/linjiqin/p/3431835.html jQuery校验官网地址:http://bassistance.de/jquery-plugins/ ...
- JS验证控件jQuery Validate
jQuery Validate 插件为表单提供了强大的验证功能,让客户端表单验证变得更简单,同时提供了大量的定制选项,满足应用程序各种需求.该插件捆绑了一套有用的验证方法,包括 URL 和电子邮件验证 ...
- 利用jquery.validate以及bootstrap的tooltip开发气泡式的表单校验组件
表单校验是页面开发中非常常见的一类需求,相信每个前端开发人员都有这方面的经验.网上有很多成熟的表单校验框架,虽然按照它们默认的设计,用起来没有多大的问题,但是在实际工作中,表单校验有可能有比较复杂的个 ...
随机推荐
- iOS中如何隐藏启动图片的状态栏
只隐藏启动图片顶部的状态栏,而不影响程序运行起来控制器的状态栏显示?在info.plist文件中添加一个Statis bar is...... 默认是NO改为YES即可
- 我理解的webservice是这样的
本文来自 --迹忆:http://www.onmpw.com/tm/xwzj/network_45.html 最近在工作中遇到这样的一个项目(暂且定为项目A),项目A本身是用PHP开发的,但是其数据是 ...
- MySql.Data.dll 不支持输出参数
insert INTO stu(name) VALUES('maimai'); set @ReturnValue=@@IDENTITY; string sql="insert INTO st ...
- 【Java】模板方法模式
今天介绍的是模板方法模式~ 模板方法模式,由父类定制总体的框架,具体的细节由子类实现. 一般来说,模板方法中有3类方法: 抽象方法,父类声明方法待子类具体实现.比如例子的validate.save.u ...
- 复旦大学2015--2016学年第二学期高等代数II期末考试情况分析
一.期末考试成绩班级前几名 胡晓波(90).杨彦婷(88).宋卓卿(85).唐指朝(84).陈建兵(83).宋沛颖(82).王昊越(81).白睿(80).韩沅伯(80).王艺楷(80).张漠林(80) ...
- LINUX下编译源码时所需提前安装的常用依赖包列表
yum -y install gcc gcc-c++ autoconf libjpeg libjpeg-devel libpng libpng-devel freetype freetype-deve ...
- CodeUI Test:UIMap录制文件分析一
UIMap文件是Coded UI Test的核心文件,它分为三个文件. 1.UIMap.uitest 这是xml文件,里面描述了所有需要操作的目标控件以及进行操作的动作等. 2.UIMap.Desig ...
- Less环境搭建
1.在页面中加入 .less 样式表的链接,并将 rel 属性设置为 "stylesheet/less": <link rel="stylesheet/less&q ...
- td在relative模式下,IE9不显示border
方法一 .thisTd { background-clip: padding-box; position:relative; } 方法二 .thisTd { z-index=-1; ...
- [bzoj1122][POI2008]账本BBB
1122: [POI2008]账本BBB Time Limit: 10 Sec Memory Limit: 162 MBSubmit: 402 Solved: 202[Submit][Status ...