jquery表单校验插件

表单校验插件

这只是针对一些规则进行校验，若要访问数据库进行数据校验，必须使用ajax，点击跳转到ajax教程

导入插件的步骤：
(1) 将jquery的原始文件和插件文件jquery.validate.js导入到工程中
(2) 编写js代码对表单进行验证

表单验证的格式：
$("form表单的选择器").validate(json数据格式);  //键值对  键：值（{}）
json数据格式：
"{
      rules:{
            表单项name值:校验规则，
            表单项name值:校验规则... ...
      },
      messages:{
            表单项name值:错误提示信息，
            表单项name值:错误提示信息... ...
      }
}"
其中：校验规则，可以是一个也可以是多个，如果是多个使用json格式
常用校验规则如下：



注意：当错误提示信息不按照我们预想的位置显示时，我们可以按照如下方式进行设置
"自定义错误显示标签放在我们需要显示的位置，当此表单项验证不通过时会将此
信息自动显示出来，jquery验证插件会自动帮助我们控制它的显示与隐藏"
<lable for="html元素name值" class="error" style="display:none">错误信息</lable>
如果设置了错误lable标签就不必在messages中设置此表单项错误提示信息了

如果预定义的校验规则尚不能满足需求的话可以进行自定义校验规则：

自定义校验规则步骤如下：
(1) 使用$.validator.addMethod("校验规则名称",function(value,element,params)){}
(2) 在rules中通过校验规则名称使用校验规则
(3) 在messages中定义该规则对应的错误提示信息
其中： value是校验组件的value值
element是校验组件的节点对象

params是校验规则的参数

自定义校验器return false，对应的信息才会显示，最需要注意的是若自定义校验使用ajax异步提交，则下面的红色区域ajax会在return语句后执行则ajax校验失去了作用，

<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>