之前用JQuery都是手写表单验证,现在已经熟练使用JQuery表单框架,表单验证变得异常简单,下面给出使用步骤
步骤1:JSP/HTML页面导入JQuery验证框架的JS
insert.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JQuery验证框架</title>
<!-- 导入JQuery验证框架支持 -->
<script type="text/javascript" src="jquery/jquery-1.11.2.min.js"></script>
<script type="text/javascript" src="jquery/jquery.metadata.js"></script>
<script type="text/javascript" src="jquery/additional-methods.min.js"></script>
<script type="text/javascript" src="jquery/jquery.validate.min.js"></script>
<script type="text/javascript" src="js/insert.js"></script>
<script type="text/javascript" src="js/Message_zh_CN.js"></script>
<!-- 导入CSS -->
<link href="css/info.css" rel="stylesheet" type="text/css"/>
<link >
</head>
<body>
<div id="formDiv">
<form action="index.jsp" method="post" id="memberForm">
<table border="1">
<tr>
<td colspan="3">用户注册</td>
</tr>
<tr>
<td>用户名</td>
<td>
<input type="text" name="member.mid" id="member.mid" class="init">
</td>
<td>
<span id="member.midMsg"></span>
</td>
</tr>
<tr>
<td>密码</td>
<td>
<input type="password" name="member.password" id="member.password" class="init">
</td>
<td>
<span id="member.passwordMsg"></span>
</td>
</tr>
<tr>
<td>确认密码</td>
<td>
<input type="password" name="member.confPassword" id="member.confPassword" class="init">
</td>
<td>
<span id="member.confPasswordMsg"></span>
</td>
</tr>
<tr>
<td>年龄</td>
<td>
<input type="text" name="member.age" id="member.age" class="init">
</td>
<td>
<span id="member.ageMsg"></span>
</td>
</tr>
<tr>
<td>邮箱</td>
<td>
<input type="text" name="member.email" id="member.email" class="init">
</td>
<td>
<span id="member.emailMsg"></span>
</td>
</tr>
<tr>
<td>生日</td>
<td>
<input type="text" name="member.birthday" id="member.birthday" class="init">
</td>
<td>
<span id="member.birthdayMsg"></span>
</td>
</tr>
<tr>
<td>性别</td>
<td>
<input type="radio" name="member.sex" id="member.sex" class="init" value="男">男
<input type="radio" name="member.sex" id="member.sex" class="init" value="女">女
</td>
<td>
<span id="member.sexMsg"></span>
</td>
</tr>
<tr>
<td>爱好</td>
<td>
<input type="checkbox" name="member.inst" id="member.inst" class="init" value="唱歌">唱歌
<input type="checkbox" name="member.inst" id="member.inst" class="init" value="跳舞">跳舞
<input type="checkbox" name="member.inst" id="member.inst" class="init" value="跳舞">游泳
</td>
<td>
<span id="member.instMsg"></span>
</td>
</tr>
<tr>
<td>城市</td>
<td>
<select name="member.city" id="member.city" >
<option>====请选择城市=====</option>
<option value="BJ">北京</option>
<option value="SH">上海</option>
<option value="GZ">广州</option>
</select>
</td>
<td>
<span id="member.cityMsg"></span>
</td>
</tr>
<tr>
<td>个人主页</td>
<td>
<input type="text" name="member.homePage" id="member.homePage" class="init">
</td>
<td>
<span id="member.homePageMsg"></span>
</td>
</tr>
<tr>
<td>验证码</td>
<td>
<input type="text" name="code" id="code" class="init" maxlength="4" size="4">
<img src="image.jsp">
</td>
<td>
<span id="codeMsg"></span>
</td>
</tr>
<tr>
<td colspan="3">
<input type="submit" value="注册">
<input type="reset" value="重置">
</td>
</tr>
</table>
</form>
</div>
</body>
</html>步骤二:导入编写中文资源文件,其实我更建议针对每个表单编写独立的Message
Message_zh_CN.js
$.extend($.validator.messages, {
required: "该字段不允许为空!",
remote: "数据输入错误,请重新输入!",
email: "请输入正确格式的电子邮件!",
url: "请输入合法的网址!",
date: "请输入合法的日期!",
dateISO: "请输入合法的日期(例如yyyy/mm/dd或yyyy-mm-dd)!",
number: "请输入合法的数字(整数或小数)!",
digits: "请输入整型数据!",
creditcard: "请输入合法的信用卡号!",
equalTo: "两次输入的内容不一致!",
accept: "文件后缀不符合要求!",
maxlength: $.validator.format("输入内容长度不能大于{0}!"),
minlength: $.validator.format("输入内容长度不能小于{0}!"),
rangelength: $.validator.format("输入的数据长度应该为{0}-{1}之间"),
range: $.validator.format("请输入一个介于 {0} 和 {1} 之间的值!"),
max: $.validator.format("可以输入的最大值为 {0} !"),
min: $.validator.format("可以输入的最小值为 {0} !")
});步骤三:编写表单验证JS文件
insert.js
$(function(){
$("#memberForm").validate({ //定义验证规则
debug : true , //采用调试模式,表单不会自动提交
errorPlacement : function(error,element){ //error表示自动生成的错误信息文字,element表示触发的元素(JQuery对象)
//调试专用语句 console.log("#"+element.attr("id")+"Msg");
var objName=element.attr("id")+"Msg" ;
if(objName.indexOf(".") != -1) { //现在名字里包含.
objName=objName.replace(".","\\.") ; //修改对象名字
}
$("#"+objName).append(error) ;
} ,
highlight :function(element,errorClass) { //高亮显示,element:DOM对象
$(element).attr("class","wrong") ;
} ,
unhighlight : function(element,errorClass){
$(element).attr("class","right") ;
} ,
// errorClass : "wrong" , //错误样式
// validClass : "right" , //正确样式
rules :{ //为每一个表单编写验证规则
"member.mid" :{
required : true , //此字段不允许为空
rangelength: [3,15] ,
remote : {
url : "mid.jsp" ,
type : "post" ,
dataType : "text" ,
data : { //要发送的数据
"member.mid" : function(){
return $("#member\\.mid").val() ;
}
} ,
dataFilter :function(data,type){ //处理完成执行的函数
var flag=false ;
if(data.trim()=="true"){
flag=true ;
}
return flag ;
}
}
},
"member.age" :{
required : true ,
digits : true ,
range : [0,300]
} ,
"member.email" : {
required : true ,
email : true
} ,
"member.birthday" : {
required : true ,
dateISO : true
},
"member.sex":{
required : true
} ,
"member.inst" :{
required: true
} ,
"member.city":{
required : true
},
"member.homePage" :{
required: true ,
url : true
},
"member.password" :{
required: true
} ,
"member.confPassword" :{
required: true ,
equalTo : "#member\\.password" //注意,两次验证,这里稍微有点区别!
},
"code":{
required : true ,
maxlength : 4 ,
remote :{
url: "code.jsp" ,
type : "post" ,
dataType : "text" ,
data : {
"code" : function (){
return $("#code").val() ;
}
},
dataFilter : function (data,type){
var flag=false ;
if(data.trim()=="true"){
flag=true ;
}
return flag ;
}
}
}
}
});
}) ;验证码相关代码
image.jsp
<%-- 郑州大学软件学院(www.ZZU.edu.cn) --%>
<%@ page contentType="image/jpeg" import="java.awt.*,java.awt.image.*,java.util.*,javax.imageio.*" pageEncoding="GBK"%>
<%!
Color getRandColor(int fc,int bc){//给定范围获得随机颜色
Random random = new Random();
if(fc>255) fc=255;
if(bc>255) bc=255;
int r=fc+random.nextInt(bc-fc);
int g=fc+random.nextInt(bc-fc);
int b=fc+random.nextInt(bc-fc);
return new Color(r,g,b);
}
%>
<%
//设置页面不缓存
response.setHeader("Pragma","No-cache");
response.setHeader("Cache-Control","no-cache");
response.setDateHeader("Expires", 0);
// 在内存中创建图象
// 通过这里可以修改图片大小
int width=80, height=25;
BufferedImage image = new BufferedImage(width, height, BufferedImage.TYPE_INT_RGB);
// 获取图形上下文
// g相当于笔
Graphics g = image.getGraphics();
//生成随机类
Random random = new Random();
// 设定背景色
g.setColor(getRandColor(200,250));
// 画一个实心的长方，作为北京
g.fillRect(0, 0, width, height);
//设定字体
g.setFont(new Font("宋体",Font.PLAIN,18));
//画边框
//g.setColor(new Color());
//g.drawRect(0,0,width-1,height-1);
// 随机产生155条干扰线，使图象中的认证码不易被其它程序探测到
g.setColor(getRandColor(160,200));
for (int i=0;i<155;i++)
{
int x = random.nextInt(width);
int y = random.nextInt(height);
int xl = random.nextInt(12);
int yl = random.nextInt(12);
g.drawLine(x,y,x+xl,y+yl);
}
// 取随机产生的认证码(4位数字)
//String rand = request.getParameter("rand");
//rand = rand.substring(0,rand.indexOf("."));
String sRand="";
// 如果要使用中文，必须定义字库，可以使用数组进行定义
// 这里直接写中文会出乱码，必须将中文转换为unicode编码
String[] str = {"A","B","C","D","E","F","G","H","J","K","L","M","N","P","Q","R","S","T","U","V","W","X","Y","Z","a","b","c","d","e","f","g","h","i","j","k","m","n","p","s","t","u","v","w","x","y","z","1","2","3","4","5","6","7","8","9"} ;
for (int i=0;i<4;i++){
String rand=str[random.nextInt(str.length)];
sRand+=rand;
// 将认证码显示到图象中
g.setColor(new Color(20+random.nextInt(110),20+random.nextInt(110),20+random.nextInt(110)));//调用函数出来的颜色相同，可能是因为种子太接近，所以只能直接生成
g.drawString(rand,16*i+6,19);
}
// 将认证码存入SESSION
session.setAttribute("rand",sRand);
// 图象生效
g.dispose();
// 输出图象到页面
ImageIO.write(image, "JPEG", response.getOutputStream());
out.clear();
out = pageContext.pushBody();
%> code.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%=session.getAttribute("rand").toString().equalsIgnoreCase(request.getParameter("code"))%>**1.具体的验证需要再详细设计,下次用的时候直接贴代码就行了;
2.其实不建议使用资源文件Message_zh_CN.js,虽然会冗余,但是更好控制错误信息的显示;
3.对于下拉列表,提示信息我真不知道怎么处理,后期会好好研究一下;
4.结合Bootstrap做的表单验证会非常炫酷;**
