validate表单校验插件笔记
1validation知识点
1 validation基础
validation插件下载http://bassistance.de/jquery-plugins/jquery-plugin-validation/
帮助文档位置：http://jqueryvalidation.org/documentation/
目录结构：
2 导入
3 使用前提
4 检验方式-js代码方式
5 html代码
默认显示的错误信息在第一个满足条件的表单组件后面，如果自己写了label标签，优先找自己写的。
6 代码演示
<head>
<meta charset="UTF-8">
<title>网站注册页面</title>
<style>
label.error{
background:url(../img/unchecked.gif) no-repeat 10px 3px;
padding-left: 30px;
font-family:georgia;
font-size: 15px;
font-style: normal;
color: red;
} label.success{
background:url(../img/checked.gif) no-repeat 10px 3px;
padding-left: 30px;
} #father{
border: 0px solid white;
padding-left: 307px;
} #form2{
border: 5px solid gray;
width: 660px;
height: 450px;
} </style>
<script type="text/javascript" src="../js/jquery-1.8.3.js" ></script>
<!--引入validate插件js文件-->
<script type="text/javascript" src="../js/jquery.validate.min.js" ></script>
<!--引入国际化js文件-->
<script type="text/javascript" src="../js/messages_zh.js" ></script>
<script>
$(function(){
$("#registForm").validate({
rules:{
user:{
required:true,
minlength:3
},
password:{
required:true,
digits:true,
minlength:6
},
repassword:{
required:true,
equalTo:"[name='password']"
},
email:{
required:true,
email:true
},
username:{
required:true,
maxlength:5
},
sex:{
required:true
}
},
messages:{
user:{
required:"用户名不能为空!",
minlength:"用户名不得少于3位!"
},
password:{
required:"密码不能为空!",
digits:"密码必须是整数!",
minlength:"密码不得少于6位!"
},
repassword:{
required:"确认密码不能为空!",
equalTo:"两次输入密码不一致!"
},
email:{
required:"邮箱不能为空!",
email:"邮箱格式不正确!"
},
username:{
required:"姓名不能为空!",
maxlength:"姓名不得多于5位!"
},
sex:{
required:"性别必须勾选!"
}
},
errorElement: "label", //用来创建错误提示信息标签,validate插件默认的就是label
success: function(label) { //验证成功后的执行的回调函数
//label指向上面那个错误提示信息标签label
label.text(" ") //清空错误提示消息
.addClass("success"); //加上自定义的success类
}
});
});
</script>
</head>
7 自定义校验器
<script type="text/javascript">
//自定义校验规则
$.validator.addMethod(
//规则的名称
"checkUsername",
//校验的函数
function(value,element,params){
//定义一个标志
var flag = false;
//value:输入的内容
//element:被校验的元素对象
//params：规则对应的参数值
//目的：对输入的username进行ajax校验
$.ajax({
"async":false,
"url":"${pageContext.request.contextPath}/checkUsername",
"data":{"username":value},
"type":"POST",
"dataType":"json",
"success":function(data){
flag = data.isExist;
}
});
//返回false代表该校验器不通过
return !flag;
}
);
$(function(){
$("#myform").validate({
rules:{
"username":{
"required":true,
"checkUsername":true
},
"password":{
"required":true,
"rangelength":[6,12]
},
"repassword":{
"required":true,
"rangelength":[6,12],
"equalTo":"#password"
},
"email":{
"required":true,
"email":true
},
"sex":{
"required":true
}
},
messages:{
"username":{
"required":"用户名不能为空",
"checkUsername":"用户名已存在"
},
"password":{
"required":"密码不能为空",
"rangelength":"密码长度6-12位"
},
"repassword":{
"required":"密码不能为空",
"rangelength":"密码长度6-12位",
"equalTo":"两次密码不一致"
},
"email":{
"required":"邮箱不能为空",
"email":"邮箱格式不正确"
}
}
});
});
</script>
8 常用的校验规则
9 错误信息显示位置的设置
10 表单验证格式补充
<script type="text/javascript">
$(function(){
$("#myform").validate({
rules:{
/*username取的input里面的name属性对应的 */
username:{
"required":true
}
},
messages:{
username:{
"required":"用户名不能为空"
}
}
});
}); </script>
如果使用国际化库提示信息可以是中文，但是不引入国际化库，直接写死的话，也可以是中文。上面就是直接写死了
11 其它补充
1 改变错误提示信息的颜色
.error{
color: red;
}
2 错误信息显示位置问题
错误信息默认显示在第一个匹配的元素的后面
自己写了label标签之后，就不需要这个错误提示信息了。会直接使用后面自己写的label标签。如果有错误信息要显示的时候会自动将显示属性改为显示。
validate表单校验插件笔记的更多相关文章
- 【JAVAWEB学习笔记】28_jqueryAjax：json数据结构、jquery的ajax操作和表单校验插件
Ajax-jqueryAjax 今天内容: 1.json数据结构(重点) 2.jquery的ajax操作(重点) 3.jquery的插件使用 一.json数据结构 1.什么是json JSON(J ...
- 2.12 学习总结 之 表单校验插件validate
一.说在前面 昨天 学习了ajax的相关知识 今天 学习表单校验插件validate, 并使用ajax 自定义校验规则 二.validate 插件 1.网络上有许多成熟的插件共使用者参考,插件就是将j ...
- bootstrap+jQuery.validate表单校验
谈谈表单校验 这大概是一种惯例,学习前台后台最开始接触的业务都是用户注册和登录.现在社会坚持以人为本的理念,在网站开发过程同样如此.User是我们面对较多的对象,也是较核心的对象.最开始的用户注册和登 ...
- jQuery.validate表单校验+bootstrap
谈谈表单校验 这大概是一种惯例,学习前台后台最开始接触的业务都是用户注册和登录.现在社会坚持以人为本的理念,在网站开发过程同样如此.User是我们面对较多的对象,也是较核心的对象.最开始的用户注册和登 ...
- 表单校验插件（bootstrap-validator）
表单校验插件(bootstrap-validator) 参考文档 http://blog.csdn.net/nazhidao/article/details/51542508 http://blog. ...
- jQuery Validate 表单验证插件----自定义校验结果样式
一.下载依赖包 网盘下载:https://yunpan.cn/cryvgGGAQ3DSW 访问密码 f224 二.引入依赖包 <script src="../../scripts/j ...
- jQuery Validate 表单验证插件----通过name属性来关联字段来验证，改变默认的提示信息，将校验规则写到 js 代码中
一.下载依赖包 网盘下载:https://yunpan.cn/cryvgGGAQ3DSW 访问密码 f224 二. 添加一个另外一个插件jquery.validate.messages_cn.js. ...
- jQuery Validate 表单验证插件----利用jquery.metadata.js将校验规则直接写在class属性里面并定义错误信息的提示
一.下载依赖包 网盘下载:https://yunpan.cn/cryvgGGAQ3DSW 访问密码 f224 二. 添加一个另外一个插件jquery.metadata.js 并把校验规则写在控件里面 ...
- jQuery Validate 表单验证插件----在class属性中添加校验规则进行简单的校验
一.下载插件包. 网盘下载:https://yunpan.cn/cryvgGGAQ3DSW 访问密码 f224 二.jQuery表单验证插件----添加class属性形式的校验 <!DOCTY ...
随机推荐
- ssh关于含有外键的传值中无法识别正确的action的原因和解决办法
在含有外键的表中,要保存一个值到这个外键时:逻辑思路:需要先将jsp页面的值传到相应的action中,在这个action中需要引入这个外键的实体层和DAO层(DAO层只需set方法),在执行函数中对于 ...
- 【微服务架构】SpringCloud之Ribbon(四)
一:Ribbon是什么? Ribbon是Netflix发布的开源项目,主要功能是提供客户端的软件负载均衡算法,将Netflix的中间层服务连接在一起.Ribbon客户端组件提供一系列完善的配置项如连接 ...
- 什么是 Java 内存模型，最初它是怎样被破坏的？（转载）
活跃了将近三年的 JSR 133,近期发布了关于如何修复 Java 内存模型(Java Memory Model, JMM)的公开建议.原始 JMM 中有几个严重缺陷,这导致了一些难度高得惊人的概念语 ...
- WC的基本功能实现.(Java)
我的GitHub地址:https://github.com/Yuetao1219/lessons WC 项目要求 wc.exe 是一个常见的工具,它能统计文本文件的字符数.单词数和行数.这个项目要求写 ...
- ibatis源码学习2_初始化和配置文件解析
问题在详细介绍ibatis初始化过程之前,让我们先来思考几个问题. 1. ibatis初始化的目标是什么?上文中提到过,ibatis初始化的核心目标是构造SqlMapClientImpl对象,主要是其 ...
- LightOJ 1094 - Farthest Nodes in a Tree
http://lightoj.com/volume_showproblem.php?problem=1094 树的直径是指树的最长简单路. 求法: 两遍BFS :先任选一个起点BFS找到最长路的终点, ...
- django LookUp
Custom Lookups 一个简单LookUp例子 Author.objects.filter(name__ne='Jack') # Translate SQL "author" ...
- Winfrom 桌面弹窗拦截 关闭进程简易程序 源代码下载
***********************2019 2.7更新 v 2.0*************************************************** 程序 源代码 交互 ...
- Python在Android系统上运行
下载 Scripting Layer for Android (SL4A) https://github.com/damonkohler/sl4a https://www.tutorialspoint ...
- java数据库学习
//编写db类/* a加载驱动 驱动类要全路径 包名+类名 suround with try/catch * b设置参数url user pwd * c.连接数据库(import 'Connectio ...