validate表单校验插件笔记
2024-08-20 11:56:15
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标签。如果有错误信息要显示的时候会自动将显示属性改为显示。
最新文章
- C#发送邮箱
- Django 1.10 中文文档------3.2.1 模型Models
- rpc使用JUnit模块测试设计的方法及常见问题
- 一张图告诉你，只会jQuery还不够！
- 在Win7 环境使用Java API 上传文件到 Hadoop2.x HDFS 问题统计
- Queue 应用——拓扑排序
- JS 黑客帝国文字下落效果
- 如何在DJANGO里获取?带数据的东东，基于CBV
- Ppthon基础学习之Dict
- 在mac中导入hadoop2.6.0源代码至eclipse
- JSTL学习笔记(核心标签)
- 行内元素有哪些?块级元素有哪些?CSS的盒模型?转载
- 浅谈 js 正则之 test 方法
- RPC服务的发布订阅实现Thrift
- 《JavaScript高级程序设计》读书笔记 ---Object 类型
- 将undefault和null的数据转换成bool类型的数据 使用!!
- java课程设计(团队)-五子棋
- bzoj3156 防御准备 - 斜率优化
- 使用angular4和asp.net core 2 web api做个练习项目(二), 这部分都是angular
- vue 2.0 scopedSlots和slots在render函数中的应用示例