formValidator

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:[email protected]'>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:[email protected]'>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()); } }

转载请注明出处:[http://www.cnblogs.com/dennisit/p/3410147.html]