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 [苏若年博客]

实例效果：

前端登录样式效果

 
<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());
    }

}

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