学习 表单验证插件validate
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<link rel="stylesheet" href="style.css">
<body>
<form action="" id="demoForm">
<fieldset>
<legend>用户登陆</legend>
<p id="info"></p>
<p id="info2" style="display:none">输入错误</p>
<p>
<label for="usename">用户登录</label>
<input type="text" id="usename" name="usename">
</p>
<p>
<label for="parseword">密码</label>
<input type="password" id="parseword" name="parseword">
</p>
<p>
<label for="confirm-parseword">确认密码</label>
<input type="password" id="confirm-parseword" name="confirm-parseword">
</p>
<p>
<label for="dates">日期</label>
<input type="text" id="dates" name="dates">
</p>
<p>
<label for="emails">邮箱</label>
<input type="text" id="emails" name="emails">
</p>
<p>
<label for="loads">地址</label>
<input type="text" id="loads" name="loads">
</p>
<p>
<label for="numbers">数字</label>
<input type="text" id="numbers" name="numbers">
</p> <p>
<label for="postcodes">邮政编码</label>
<input type="text" id="postcodes" name="postcodes">
</p> <p>
<input type="submit" value="登录"/>
</p>
<p>
<button id="check">检测表单</button>
</p>
</fieldset>
</form>
</body>
<script src="http://cdn.bootcss.com/jquery/3.1.0/jquery.js"></script>
<script src="jquery.validate.js"></script>
<script>
var validator;
$(document).ready(function(){
validator = $("#demoForm").validate({
debug:true,//只进行检测不提交，调试很方便
rules:{//定义校验规则
usename:{//usename是input的name不是id
required:{
depends:function(element){
return $("#parseword").is(":filled");//密码是否填写 不填写密码不校验用户名
}
},
//url:true,//地址需要输入 http || https
//email:true,//验证邮箱
minlength:{
param:2,
depends:function(element){
return $("#parseword").is(":filled");//密码是否填写 不填写密码不校验用户名
}
},//最小长度
maxlength:10,//最大长度
//rangelength:[2,10],//长度范围
//remote:"remote.json" GET请求
/*remote:{
url:"remote.json",
type:"post",
data:{
loginTime:function(){
return + new Date;
}
}
}*/
},
parseword:{
required:true,
minlength:5,
maxlength:16
},
"confirm-parseword":{
equalTo:"#parseword"
}, dates:{
required:true,
//date:true//范围非常广
dateISO:true
},
emails:{
required:true,
email:true
},
loads:{
required:true,
url:true
},
numbers:{
required:true,
//number:true//整数数字、小数
digits:true//非负整数
},
postcodes:{
//required:true,
postcode:"中国"
},
},
messages:{//定义提示信息
usename:{
required:"必填",
minlength:"最少两位数",
maxlength:"最多十位数字",
remote:"用户名不存在",
rangelength:"2-10个字符",
email:"请输入正确的邮箱地址",
url:"请输入正确的地址"
},
parseword:{
required:"必填",
minlength:"最少五位数",
maxlength:"最多十六位数字"
},
"confirm-parseword":{
equalTo:"密码不一致"
},
dates:{
required:"必填",
date:"请输入正确的有效日期",
dateISO:"错误"
},
emails:{
required:"必填",
email:"错误"
},
loads:{
required:"必填",
url:"错误"
},
numbers:{
required:"必填",
number:"错误",
digits:"非负整数"
}
},
submitHandler:function(form){//表单验证成功之后执行的方法
console.log($(form).serialize());
}, //错误信息在一个地方显示
/*groups:{
login:"usename parseword confirm-parseword"
},
//错误信息显示在........
errorPlacement:function(error,element){
error.insertBefore("#info");
},*/ //onsubmit:false,//是否在登录时进行验证默认 true； focusInvalid:true,//提交表单后，未通过验证的表单是否获得焦点 //errorClass:"wrong",//验证错误定义的类名
//validClass:"right",//验证正确定义的类名
//errorContainer:"#info", //设置 info 显示还是隐藏
//errorContainer:"#info2",
//errorLabelContainer:"#info",// ul 再放入 info里面
//errorElement:"li", //错误信息使用的标签
//wapper:"ul",//包裹错误信息使用的标签 showErrors:function(errorMap,errorList){
console.log(errorMap);
console.log(errorList);
this.defaultShowErrors();//不调用默认不显示错误信息
}, //针对验证 元素 label
success:function(label){//验证成功之后给验证成功的元素添加类名
label.addClass("successright");
}, //针对表单元素 给未通过验证的元素添加效果
highlight:function(element, errorClass, validClass){
$(element).addClass(errorClass).removeClass(validClass);
$(element).fadeOut().fadeIn();
}, unhighlight:function(element, errorClass, validClass){
$(element).addClass(validClass).removeClass(errorClass);
}, /*invalidHandler:function(event,validator){//表单验证失败之后执行的方法
console.log("错误数" + validator.numberOfInvalids());
}*/
//ignore:"#usename"//对某些元素不进行校验
//ignore:"hidden" //默认不对影藏的元素校验 }); //自定义验证方法 邮政编码
$.validator.addMethod("postcode" ,function(value, element, params){
var postcode = /^[0-9]{6}$/; console.log(params);
return this.optional(element) || (postcode.test(value));
//this.optional(element) 去掉之后不填也会提示 请填写正确的邮政编码！！
//this.optional(element) 值为空的时候不去触发校验规则
}, $.validator.format("请填写正确的{0}邮政编码！！")); /*$("#demoForm").on("invalid-form", function(event,validator){//表单验证失败之后执行的方法
console.log("错误数" + validator.numberOfInvalids());
});*/ //检测
$("#check").click(function(){
alert($("#demoForm").valid() ? "填写正确" : "填写错误");
})
})
</script>
</html>
学习 表单验证插件validate的更多相关文章
- 表单验证插件——validate
表单验证插件——validate 该插件自带包含必填.数字.URL在内容的验证规则,即时显示异常信息,此外,还允许自定义验证规则,插件调用方法如下: $(form).validate({options ...
- jQuery Validate 表单验证插件----Validate简介，官方文档，官方下载地址
一. jQuery Validate 插件的介绍 jQuery Validate 插件为表单提供了强大的验证功能,让客户端表单验证变得更简单,同时提供了大量的定制选项,满足应用程序各种需求.该插件捆 ...
- Jquery表单验证插件validate
写在前面: 在做一些添加功能的时候,表单的提交前的验证是必不可少的,jquery的validate插件就还可以,对于基本的需求已经够了.这里记录下基本的用法. 还是写个简单的demo吧 <htm ...
- 表单验证插件validate
http://www.runoob.com/jquery/jquery-plugin-validate.html <!DOCTYPE html> <html lang="e ...
- 2.12 学习总结 之 表单校验插件validate
一.说在前面 昨天 学习了ajax的相关知识 今天 学习表单校验插件validate, 并使用ajax 自定义校验规则 二.validate 插件 1.网络上有许多成熟的插件共使用者参考,插件就是将j ...
- jQuery.validate.js表单验证插件
jQuery.validate.js表单验证插件的使用 效果: 代码: <!DOCTYPE html> <html lang="en"> <head& ...
- jQuery学习之：Validation表单验证插件
http://polaris.blog.51cto.com/1146394/258781/ 最近由于公司决定使用AJAX + Struts2来重构项目,让我仔细研究一下这两个,然后集中给同事讲讲,让每 ...
- Jquery.validate.js表单验证插件的使用
作为一个网站web开发人员,以前居然不知道还有表单验证这样好呀的插件,还在一行行写表单验证,真是后悔没能早点知道他们的存在. 最近公司不忙,自己学习一些东西的时候,发现了validation的一个实例 ...
- jquery validate表单验证插件-推荐
1 表单验证的准备工作 在开启长篇大论之前,首先将表单验证的效果展示给大家. 1.点击表单项,显示帮助提示 2.鼠标离开表单项时,开始校验元素 3.鼠标离开后的正确.错误提示及鼠标移入时的帮 ...
随机推荐
- （79）zabbix key总是not supported的解决方法
zabbix定义好key之后,总是会出现Not supported,看到这个问题,大家不用着急,问题其实很容易解决,首先鼠标点击当前key的大红叉上,会显示出报错内容. 常见的有: 1. zabbix ...
- C++ lambda 表达式 简介
自己根据对lambda表达式的理解,做了一套ppt简单介绍
- Java List 的深拷贝
老是会遇到深拷贝与浅拷贝的问题,这里进行了一些測试.代码例如以下: </pre><pre name="code" class="java"&g ...
- selenium中webdriver跳转新页面后定位置新页面的两种方式
刚刚在写Python爬虫的时候用到了selenium , 在跳转新页面时发现无法定位新页面 , 查找不到新页面的元素 一番查询后得到了解决方法 , 便记录下来备忘 , 也与大家分享 # 页面跳转代码. ...
- 洛谷P4231 三步必杀
题目描述: $N$ 个柱子排成一排,一开始每个柱子损伤度为0. 接下来勇仪会进行$M$ 次攻击,每次攻击可以用4个参数$l$ ,$r$ ,$s$ ,$e$ 来描述: 表示这次攻击作用范围为第$l$ 个 ...
- 51nod_1154 回文串的划分
说实话..最开始看这题感觉一定好难...好高大上...我的马拉车还不熟....这种..但是本着做不出来也要至少看看的心态,吧个题看完了..然后简单的想了想,好像是个挺直观的动态规划,因为看到数据几乎就 ...
- HOJ 13819 Height map
昨天校内比赛做了一个很有意思的题,体面如图: 题目大概意思是,给出一个俯视图矩阵,矩阵内元素表示当前位置有多少个方块,最后要求输出该立体图形中面的数量. 首先给出一组数据: 3 42 1 2 11 2 ...
- Android开发——用户在屏幕上的手势识别
个定点决定.四个属性分别为left(1),top(2),right(3),bottom(4). 数字为图上标出的距离.显然这四个属性是相对于父容器来定的,均可以通过get()方法获取. 因此很容易得出 ...
- Java并发——synchronized和ReentrantLock的联系与区别
0 前言 本文通过使用synchronized以及Lock分别完成"生产消费场景",再引出两种锁机制的关系和区别,以及一些关于锁的知识点. 本文原创,转载请注明出处:http:// ...
- Apache的安装与下载
PHP的运行必然少不了服务器的支持,何为服务器?通俗讲就是在一台计算机上,安装个服务器软件,这台计算机便可以称之为服务器,服务器软件和计算机本身的操作系统是两码事,计算机自身的操作系统可以为linux ...