表单验证插件及一些属性的用法 validate
注:必须配合jq使用。
基本语法 例如有如下:
<form action="" method="post" id="demoForm">
<p>
<label name="email">email:</label>
<input type="text" id="email" value="" name="email1"/>
</p>
<p>
<label name="pasword1">password:</label>
<input type="text" id="password1" value="" name="pass1"/>
</p>
<p>
<label name="pasword2">confirm-password:</label>
<input type="text" id="password2" value="" name="pass2"/>
</p>
<p>
<input type="submit" id="btn" name="" />
</p>
</form>
基本类型:
$(function(){
$("#demoForm").validate({
rules:{
//指定元素对应的规则
},
messages:{
//如果不符合要求时要提示的信息
}, })
})
属性:
require :true 必填 布尔类型
rangelength:[,] 长度范围
equalTo 保证两次密码一致
email: true 布尔类型
submitHandler:function(){ //校验通过时可执行的东西
} invalidHander:function(){
校验通不过时可执行
} focusInvalid : true 布尔
提交表单后,未通过验证的表单(第一个或提交之 前获得焦点的未通过验证的表单)会获得焦点 focusCleanup : false 默认
当未通过验证的元素获得焦点时,并移除错误提示 (避免和 focusInvalid.一起使用) errorElement:'div'将错误信息放在什么地方 errorClass:'worng' 可给错误信息添加一个类名 通过类名可给错误信息修饰样式
highlight:function(element,erroeClass){
$(element).addClass(errorClass);
$(element).fadeOut().fadeIn();
}
出错时的样式设置
minlength : num 最小值
maxlength: num 最大值
digits:true 年龄必须为正整数
range:[]范围
date:true 日期格式要求较宽泛
dateISO:true; 日期规范较严格
jq 表单验证插件不仅可以在数据获取之前在前端做首要的的判断,还通过submintHandler:这个属性通过ajax获取数据
ajax获取数据的同时结合php接口对数据进行添加至数据库
表单验证插件及一些属性的用法 validate的更多相关文章
- jQuery Validate 表单验证插件----通过name属性来关联字段来验证,改变默认的提示信息,将校验规则写到 js 代码中
一.下载依赖包 网盘下载:https://yunpan.cn/cryvgGGAQ3DSW 访问密码 f224 二. 添加一个另外一个插件jquery.validate.messages_cn.js. ...
- jQuery Validate 表单验证插件----在class属性中添加校验规则进行简单的校验
一.下载插件包. 网盘下载:https://yunpan.cn/cryvgGGAQ3DSW 访问密码 f224 二.jQuery表单验证插件----添加class属性形式的校验 <!DOCTY ...
- jquery validate强大的jquery表单验证插件
jquery validate的官方演示和文档地址: 官方网站:http://jqueryvalidation.org/ 官方演示:http://jqueryvalidation.org/files/ ...
- jQuery Validate 表单验证插件----利用jquery.metadata.js将校验规则直接写在class属性里面并定义错误信息的提示
一.下载依赖包 网盘下载:https://yunpan.cn/cryvgGGAQ3DSW 访问密码 f224 二. 添加一个另外一个插件jquery.metadata.js 并把校验规则写在控件里面 ...
- jQuery学习之路(8)- 表单验证插件-Validation
▓▓▓▓▓▓ 大致介绍 jQuery Validate 插件为表单提供了强大的验证功能,让客户端表单验证变得更简单,同时提供了大量的定制选项,满足应用程序各种需求.该插件捆绑了一套有用的验证方法,包括 ...
- jquery validate表单验证插件-推荐
1 表单验证的准备工作 在开启长篇大论之前,首先将表单验证的效果展示给大家. 1.点击表单项,显示帮助提示 2.鼠标离开表单项时,开始校验元素 3.鼠标离开后的正确.错误提示及鼠标移入时的帮 ...
- 表单验证插件之jquery.validate.js
提到表单验证的插件,第一个想到的就是jquery.validate.js,所以小生想在这里稍微详细地说一下这款插件的具体使用方法,便于理解,我直接附上整段demo的代码(没怎么调样式,主要是看js): ...
- jQuery学习之:Validation表单验证插件
http://polaris.blog.51cto.com/1146394/258781/ 最近由于公司决定使用AJAX + Struts2来重构项目,让我仔细研究一下这两个,然后集中给同事讲讲,让每 ...
- jquery validate表单验证插件
1 表单验证的准备工作 在开启长篇大论之前,首先将表单验证的效果展示给大家. 1.点击表单项,显示帮助提示 2.鼠标离开表单项时,开始校验元素 3.鼠标离开后的正确.错误提示及鼠标移入时的帮 ...
随机推荐
- 《C++标准程序库》-1
explicit关键字 这个关键字原则上只对构造函数起作用,抑制阴性转换,例如: class String{ String(int size); //本意是要申请size大小的字符串 }; 如果此时调 ...
- js计算每个月的总天数
js中相关日期的计算 var year = new Date().getFullYear(),//计算当前年份 month = new Date().getMonth()+1,//计算当前月份 dat ...
- 树状数组 二维偏序【洛谷P3431】 [POI2005]AUT-The Bus
P3431 [POI2005]AUT-The Bus Byte City 的街道形成了一个标准的棋盘网络 – 他们要么是北南走向要么就是西东走向. 北南走向的路口从 1 到 n编号, 西东走向的路从1 ...
- vue.js路由学习笔记二
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...
- SQL case when then end根据某列数据内容在新列显示自定义内容
') then '实习' ' ) then '赤脚医生' ' ) then '村卫生员' ' ) then '乡卫生员' ' ) then '镇卫生员' ' ) then '医师' ' ) then ...
- SprimgMVC学习笔记(三)—— 参数绑定
一.默认支持的参数类型 1.1 需求 打开商品编辑页面,展示商品信息. 1.2 需求分析 编辑商品信息,首先要显示商品详情 需要根据商品id查询商品信息,然后展示到页面. 请求的url:/itemEd ...
- 1972 HH的项链
传送门 主席树解法设las[ i ]表示数列中第 i 个数的值 上一次出现的位置,num[ i ]为原数列中第 i 个数的值1. 把 从第 1 到第 i 个数的 las 的值 的出现次数 建立一个线 ...
- hdu-4513吉哥系列故事——完美队形II--最长回文
吉哥系列故事——完美队形II Time Limit: 3000/1000 MS (Java/Others) Memory Limit: 65535/32768 K (Java/Others)To ...
- python--selectors模块
它的功能与linux的epoll,还是select模块,poll等类似:实现高效的I/O multiplexing, 常用于非阻塞的socket的编程中: 简单介绍一下这个模块,更多内容查看 pyt ...
- WEB视频播放器插件,总结
WEB视频播放器插件,总结 2018年07月29日 20:42:11 流光忆莲 阅读数:572更多 个人分类: 推荐文章收藏 以下是关于网页中嵌入视频播放插件的各种资料的总结 基于H5的Vedio ...