您的位置：首页 > 其它

validate表单校验插件笔记

2018-02-01 20:29 323 查看

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>

如果使用国际化库提示信息可以是中文，但是不引入国际化库，直接写死的话，也可以是中文。上面就是直接写死了