以前使用原生的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){
//需要自定义的函数
}
);