formValidator输入验证、异步验证实例 + licenseImage验证码插件实例应用
实例技术:springmvc
实现功能:完整用户登录流程、输入信息规则校验、验证码异步校验.
功能清单：
1.springmvc控制器处理get请求(/member/login.html),进行静态页面跳转到用户登录页
2.Springmvc控制器处理post请求(/member/login.html),进行登录实际业务处理
3.验证实例包含常规输入验证 + 异步验证，使用验证插件formValidator
插件下载:
验证插件下载：http://www.cnblogs.com/wzmaodong/archive/2012/10/15/2724005.html [猫冬博客]
验证码插件下载: http://www.cnblogs.com/dennisit/p/3325871.html [苏若年博客]
实例效果：
前端登录样式效果
View Code
<div class="content-wp">
<!--登录开始-->
<div class="login-form">
<form action="" method="post" name="formLogin" id="formLogin">
<dl>
<dt>帐户基本信息</dt>
<dd>
<span class="title">登录邮箱：</span>
<input class="login_input" name="email" type="text" id="email"/>
<span id="emailTip" class="onshow"></span>
</dd>
<dd>
<span class="title">登录密码：</span>
<input class="login_input" id="password" name="password" type="password"/>
<span id="passwordTip" class="onshow"></span>
</dd>
<dd style="heigth:50px;">
<span class="title">验证码：</span>
<img class="img" id="licenImg" src="${ctx }/licenseImg/loadImage.html?type=5" width="115" height="40" />
<span class="chimgbox">
<a href="javascript:void(0);" id="changeImg">看不清?换一张</a>
</span>
</dd>
<dd>
<span class="title">输入验证码：</span>
<input type="text" id="checkcode" class="login_input" name="checkcode" maxlength="4" />
<span id="checkcodeTip" class="onshow">请输入验证码</span>
</dd>
</dl>
<div class="login_btn_box">
<input id="button" name="button" type="submit" value="免费注册" class="login_btn"/>
<span class="clew_txt">如果您已有帐号，可<a href="javascript:void(0);">直接登录</a></span>
</div>
</form>
</div>
<!--登录结束-->
</div>
这里验证码使用自己搞得一个验证码插件.
<img class="img" id="licenImg" src="${ctx }/licenseImg/loadImage.html?type=5" width="115" height="40" />
里边的type用来指定内置的验证码样式
使用formValidator实现前端验证
1.常规验证
//登录邮箱验证
jQuery("#email").formValidator({
onshow:"6-100个字符",
onfocus:"6-100个字符",
oncorrect:"恭喜你,你输对了",
defaultvalue:"@"
}).inputValidator({
min:6,
max:100,
onerror:"长度非法"
}).regexValidator({
regexp:"^([\w-.]+)@(([[0-9]{1,3}.[0-9]{1,3}.[0-9]{1,3}.)|(([\w-]+.)+))([a-zA-Z]{2,4}|[0-9]{1,3})(]?)$",
onerror:"格式不正确"
});
参数说明:
onshow：表示页面加载上来先是的内容
onfocus:表示输入框获取得焦点之后的内容
oncorrect：表示输入正确后的信息
defaultvalue：表示输入框默认值
Onerror：表示验证不通过的错误提示.
2.异步验证
//验证码验证相关
jQuery("#checkcode").formValidator({
onshow:"请输入验证码",
onfocus:"验证码为4个字符",
oncorrect:"恭喜你,你输对了"
}).ajaxValidator({
//请求方式post
type: "post",
//请求处理执行方法,这里采用相对路径
datatype: "json",
oncorrect:"验证码正确",
url: "${ctx}/licenseImg/validImage.html?tm=" + new Date().getTime(),
//请求携带的参数值
success: function(result) { //返回的josn串
if(result==1){
return true; //值不是1表示验证码输入错误
}else{
return false; //表示验证码输入正确
}
},
oncorrect:"恭喜你,你输对了",
onerror: "验证码错误,请重新输入",
onwait : "正在检测验证码，请稍候..."
});
说明:ajaxValidator({...});里边执行异步验证,需要说明的是这里验证传递参数,url中无需带入要验证的内容参数,因为带了也不起作用.比如我这里验证码的输入框Id值为checkcode,而这里url:"${ctx}/licenseImg/validImage.html?validimgvalue=" + jQuery("#checkcode").val(),这种写法,然后再服务端我们用request.getParameter("validimgvalue")获取参数的话获取的是页面初始加载的值,而不是我们输入的值.所以这里的异步验证只要保证request.getParameter("输入框name值")一致,然后使用时间戳保证不缓存就可以在服务端获取到每次输入的值了.
前端验证完整实例
<link rel="stylesheet" type="text/css" href="${ctx }/styles/common/common.css">
<link rel="stylesheet" type="text/css" href="${ctx }/styles/member/member_login.css">
<script src="${ctx }/scripts/jquery-1.2.6.min.js" type="text/javascript" charset="UTF-8"></script>
<script src="${ctx }/scripts/form-validator_min.js" type="text/javascript" charset="UTF-8"></script>
<script src="${ctx }/scripts/member/member_login.js" type="text/javascript" charset="UTF-8"></script>
<script type="text/javascript">
jQuery.noConflict();
</script>
<script type="text/javascript">
jQuery(document).ready(function(){
jQuery.formValidator.initConfig({
formid:"formLogin",
debug:false,
submitonce:true,
onerror:function(msg,obj,errorlist){
alert(msg);
}
});
//登录邮箱验证
jQuery("#email").formValidator({
onshow:"6-100个字符",
onfocus:"6-100个字符",
oncorrect:"恭喜你,你输对了",
defaultvalue:"@"
}).inputValidator({
min:6,
max:100,
onerror:"长度非法"
}).regexValidator({
regexp:"^([\w-.]+)@(([[0-9]{1,3}.[0-9]{1,3}.[0-9]{1,3}.)|(([\w-]+.)+))([a-zA-Z]{2,4}|[0-9]{1,3})(]?)$",
onerror:"格式不正确"
});
//登录密码验证
jQuery("#password").formValidator({onshow:"至少6个字符",onfocus:"至少6个字符",oncorrect:"密码合法"}).inputValidator({min:6,empty:{leftempty:false,rightempty:false,emptyerror:"输入有误"},onerror:"输入有误"});
//验证码验证相关
jQuery("#checkcode").formValidator({
onshow:"请输入验证码",
onfocus:"验证码为4个字符",
oncorrect:"恭喜你,你输对了"
}).ajaxValidator({
//请求方式post
type: "post",
//请求处理执行方法,这里采用相对路径
datatype: "json",
oncorrect:"验证码正确",
url: "${ctx}/licenseImg/validImage.html?tm=" + new Date().getTime(),
//请求携带的参数值
success: function(result) { //返回的josn串
if(result==1){
return true; //值不是1表示验证码输入错误
}else{
return false; //表示验证码输入正确
}
},
oncorrect:"恭喜你,你输对了",
onerror: "验证码错误,请重新输入",
onwait : "正在检测验证码，请稍候..."
});
/*点击更换验证码的方法*/
jQuery("#changeImg").click(function(){
var path = "${ctx}";
var url = path + "/licenseImg/loadImage.html?type=5&tm=" + new Date().getTime();
jQuery("#licenImg").attr("src",url);
});
});
</script>
3.验证码插件将样式交给前段控制实现
@Controller
@RequestMapping("/licenseImg")
public class LicenseImageController extends BaseMultiController{
/**
* 生成验证码
*
* @author <a href='mailto:dennisit@163.com'>Cn.pudp(En.dennisit)</a> Copy Right since 2013-11-5 下午03:45:51
*
* @param request
* @param response
* @throws ControllerException
* @throws IOException
*/
@RequestMapping(value={"/loadImage","/loadImage.html"},method={RequestMethod.GET})
public void licenseImage(HttpServletRequest request, HttpServletResponse response)throws ControllerException,IOException{
String type = request.getParameter("type");
response.setHeader("Pragma", "no-cache");
response.setHeader("Cache-Control", "no-cache");
response.setDateHeader("Expires", 0);
response.setContentType("image/jpeg");
LicenseImage licenseImage = new LicenseImage();
Map<String, BufferedImage> licenseImg = licenseImage.createImage("org/pudp/util/license/resources/yzm" + type +".png");
String key = (String) licenseImg.keySet().iterator().next();
SessionUtil.getSession(request).setAttribute(CommonConstant.LicenseImageKey,key);
System.out.println("session中的验证码值为:" + key);
BufferedImage buffImg = licenseImg.get(key);
ServletOutputStream out = response.getOutputStream();
ImageIO.write(buffImg, "jpeg", out);
out.close();
}
/**
* 验证验证码是否输入正确
*
* @author <a href='mailto:dennisit@163.com'>Cn.pudp(En.dennisit)</a> Copy Right since 2013-11-5 下午04:09:47
*
* @param request
* @param response
* @throws ControllerException
*/
@RequestMapping(value={"/validImage","/validImage.html"},method={RequestMethod.GET,RequestMethod.POST})
public void validateLicenseImage(HttpServletRequest request, HttpServletResponse response)throws ControllerException{
int status = -1;
String imageVal = StringUtil.getString(request, "checkcode");
String imageSessionVal = (String) SessionUtil.getSession(request).getAttribute(CommonConstant.LicenseImageKey);
System.out.println("用户输入的值:" + imageVal + ",session中存放的值:" + imageSessionVal);
if(imageSessionVal.equalsIgnoreCase(imageVal)){
//如果相等,表示验证码输入正确
status = 1;
}
JsonUtil.str2Json(status+"", response);
}
@Override
public Logger getLogger() {
return Logger.getLogger(this.getClass());
}
}