学习 表单验证插件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.鼠标离开后的正确.错误提示及鼠标移入时的帮 ...
随机推荐
- tomcat修改默认主页, 前段项目放到tomcat下,浏览器输入ip加端口后,直接到项目主页
1,将 项目 放到 tomcat 的webapps 文件夹下 2, 修改conf 下的 server.xml , 找到 <Host name="localhost" appB ...
- pycharm clion rider 注册
JetBrains 公司出品的pycharm clion rider 专业版本都需要注册才能运行,这里有个免费注册方法: JetBrains授权服务器2017.10.7授权方法:激活时选择Licens ...
- centos7安装mongodb3.6
1. 安装一下centos(6.5) + 虚拟机,在VMware中安装mongodb 2. 下载mongodb最新版本:mongodb-linux-x86_64-3.6.4.tgz,传到centos ...
- Python知识点进阶——生成器
生成器 为什么要将列表转化为迭代器? 因为列表太大的话用内存太大,做成迭代器可以节省空间,用的时候再拿出部分. 生成器是不会把结果保存在一个系列中,而是保存生成器的状态,在每次进行迭代时返回一个值,知 ...
- 用描述符实现缓存功能和property实现原理
class Lazyproperty: def __init__(self, func): self.func = func def __get__(self, instance, owner): p ...
- A * B Problem Plus HDU - 1402 （FFT）
A * B Problem Plus HDU - 1402 (FFT) Calculate A * B. InputEach line will contain two integers A and ...
- Android 多线程 打地鼠游戏
前言:最近比较喜欢多线程了,看到了一些线程案例,这里总结一下打地鼠游戏的整个过程. 1.首先是主活动要加载的布局,我一般就喜欢早点把这个写上,这样就好在主活动中玩弄这些控件了.闲话不多说,一个Fram ...
- datagrid的增加功能的实现
一.增加 1.行编辑状态所需的条件 (1)在columns中添加editor,注意type的设置 (2)调用beginEdit方法,开启行编辑 添加到第一行: 添加到最后一行: (2)如果有一行开启了 ...
- laravel5.2总结--文件上传
1 配置 文件系统的配置文件在 config/filesystems.php 文件中,此处我们新建一个uploads本地磁盘空间用于存储上传的文件,具体配置项及说明如下: <?php retur ...
- 【Unique Paths】cpp
题目: A robot is located at the top-left corner of a m x n grid (marked 'Start' in the diagram below). ...