您的位置：首页 > Web前端 > JQuery

使用jquery.validate.min.js插件进行表单验证并自定义校验规则

2017-11-21 17:06 1226 查看

以前使用原生的js或者jQuery写表单验证真的好麻烦，使用上面的jQuery插件配合着ajax真的节省好多代码量

直接上代码

<%@page contentType="text/html"%>
<%@page pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>页面层</title>
<link rel="stylesheet" href="css/layout.css" />

<script type="text/javascript">
function formReset(){
document.getElementById("SubmitForm").reset();
}

function showTips(id,info){
document.getElementById(id+"span").innerHTML="<font color='grey' size='2'>"+info+"</font>";
}

function check(id,info){
//获取用户输入的值
var uVlaue=document.getElementById(id).value;
//进行校验
if(uVlaue==""){
document.getElementById(id+"span").innerHTML="<font color='red' size='2'>"+info+"</font>";
}else{
document.getElementById(id+"span").innerHTML=" ";
}
}
</script>

</head>
<body>

<div  class="head">
<h1>注册</h1>

</div>
<form action="${pageContext.request.contextPath }/login" method="post" class="SubmitForm" id="SubmitForm">

学      号 <input type="text" name="number" size="35px" id="number" onfocus="showTips('number','学号必填!')" onblur="check('number','学号不能为空！')"/> <span id="numberspan"></span><br />
姓      名 <input type="text" name="username" size="35px" id="username" onfocus="showTips('username','用户名必填!')" onblur="check('username','用户名不能为空！')"/> <span id="userspan"></span><br />
<span style="margin-right: 150px; text-align: left;">性      别</span><input  type="radio" name="sex" />男      <input type="radio" name="sex" />女 <br />
所在学院 <input type="text" name="xueyuan" id="xueyuan" size="35px" onfocus="showTips('xueyuan','学院名必填！')" onblur="check('xueyuan','学院名不能为空！')" /><span id="xueyuanspan"></span><br />
密      码 <input type="password" size="35px" name="password" id="password" onfocus="showTips('password','密码必填！')" onblur="check('password','密码不能为空！')" placeholder="请输入密码"/><span id="passwordspan"></span><br />
确认密码 <input type="password" name="repassword" id="repassword" size="35px" onfocus="showTips('repassword','确认密码')" onblur="check('repassword','确认密码不能为空！')" placeholder="请确认密码"/><span id="repasswordspan"></span><br />
<input type="submit" value="确认" class="button"/>            <input type="button" onclick="formReset()" value="重置">

</form>

</body>
</html>

真的好麻烦。。。。。。jQuery和js也不是很会用。所以还是学会上面的表单校验在使用下面的插件吧，路有一步步走！

好了，大招来了直接上代码

jQuery引入jquery.validate.min.js

$(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
},
"name":{
"required":true
},
"birthday":{
"required":true,
"dateISO":true
}

},

messages:{
"username":{
"required":"用户名不能为空",
"checkUsername":"该用户已存在"
},
"password":{
"required":"密码不能为空",
"rangelength":"密码长度6-12位"
},
"repassword":{
"required":"确认密码不能为空",
"rangelength":"密码长度6-12位",
"equalTo":"两次密码不一致"
},
"email":{
"required":"邮箱不能为空",
"email":"邮箱格式不正确"
},
"sex":{
"required":"没有第三个选项"
},
"name":{
"required":"姓名不能为空"
},
"birthday":{
"required":"日期不能为空",
"dateISO":"日期格式不正确"
}

}

});
});

格式就是json的格式键值对 key：value

$(function(){

$("表单的id").validate({

rules:{}, //规则

message:{}
//错误提示信息

});

});

规则如下：

有些规则上面没有就需要自己定义，比如身份证号码，这个插件是国外的人写的，他们的身份证号跟我们不一样啊；还可以自定义用json检验用户名是否存在

直接上代码

//自定义校验规则
$.validator.addMethod(
//规则的名称
"checkUsername",

//校验的函数
function (value,element,params){

//定义一个标志符true或者false都没有关系只是定义
var flag=true;

//value:输入的内容
//element:被校验的元素对象
//params:规则对应的参数值
$.ajax({
"async":false ,//是否异步
"url":"${pageContext.request.contextPath}/checkUsername",
"data":{"username":value},
"type":"POST",
"dataType":"json",
"success":function(data){
flag=data.isExist;
//alert(flag);

}

});
//返回false表示校验器不通过

return !flag;
}

);

语法就是

//自定义检验规则

$.validator.addMethod(

//规则的名称

"checkUsername",

//检验的函数

function(vlaue,element,params){

//需要自定义的函数

}

);

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： jquery 表单 jquery插件 ajax

相关文章推荐

新的分享

章节导航