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开发气泡式的表单校验组件
表单校验是页面开发中非常常见的一类需求,相信每个前端开发人员都有这方面的经验.网上有很多成熟的表单校验框架,虽然按照它们默认的设计,用起来没有多大的问题,但是在实际工作中,表单校验有可能有比较复杂的个 ...
随机推荐
- a
#region DataTable转Json /// <summary> /// 将DataTable中的数据转换为JSON字符串,只返回[{...},{... ...
- JSON总结
JSON: 关于JSON,最重要的是要理解它是一种数据格式,不是一种编程语言.虽然JSON与JavaScript具有相同的语法形式与JSON具有相同的语法形式,但JSON并不从属于JavaScrip ...
- C#调用RAR压缩与解压
public void RARsave(string rarPatch, string rarFiles,string patch,string rarName) { ...
- angular的路由
AngularJS 路由允许我们通过不同的 URL 访问不同的内容. 通过 AngularJS 可以实现多视图的单页Web应用(single page web application,SPA). 下面 ...
- php编译安装报错:make: *** [sapi/cli/php] Error 1 解决办法
ext/iconv/.libs/iconv.o: In function `php_iconv_stream_filter_ctor':/ext/iconv/iconv.c:2491: undefin ...
- 使用rsync和scp远程同步文件
rsync1. rsync可以通过ssh隧道的方式传输文件夹: rsync -arv --progress clone user@host:remotedir loaldir . rsync通过ssh ...
- android shortcut &livefoulder
android shortcut(实现步骤) 1.建立activity 2.minifest 里面注册并加上intent-filter,name为:android.intent.action.CREA ...
- 新版微信h5视频自动播放
微信最近升级了新版本,直播视频不能自动播放,经过了一番探索,发现下列方法可以实现自动播放. if (typeof WeixinJSBridge == "undefined") { ...
- 关于leetcode中链表中两数据相加的程序说明
* Definition for singly-linked list. * struct ListNode { * int val; * struct ListNode *next; * }; */ ...
- Strus2学习记录整理【持续更新】
Strus2学习记录 以后的Strus2学习记录地址都会集合在这里,希望大家可以一起愉快学习,相互学习! Exception: 地址:http://www.cnblogs.com/gcs1995/p/ ...