SSH2 AJAX LoginDemo 项目增添验证体系-AJAX教程-爱易网页

SSH2 AJAX LoginDemo 项目增添验证体系

日期：2014-05-16　浏览次数：20734 次

SSH2 AJAX LoginDemo 项目添加验证体系

Struts2 框架的验证体系主要分为：

action 中重写 validate() 进行 action类全局校验
action 中添加 validateXxx() 为 Xxx() 方法专门做的前置校验。(Strut2 利用反射自动映射)
使用Struts2 验证框架进行校验

我们在 LoginDemo 中对这几种方法都会有举例：

Struts2 数据提交的步骤是:

校验框架
validate()
validateXxx()
action()

index.jsp

<%@page contentType="text/html" pageEncoding="UTF-8"%>
<%@taglib prefix="s" uri="/struts-tags" %>
<%@taglib prefix="sj" uri="/struts-jquery-tags" %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
   "http://www.w3.org/TR/html4/loose.dtd">
 
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <sj:head locale="zh_CN" jqueryui="true" />
        <!-- AJAX 方式登录 callback 函数响应 login.js -->
        <script type="text/javascript" src="js/login/login.js"></script>
        <!-- 载入样式表 -->
        <link rel="stylesheet" type="text/css" href="css/style.css" />
        <title><s:text name="index.title" /></title>
    </head>
    <body>
        <div id="login_div">
            <form action="login-ajax/loginAjax.action" method="post" id="login_form">
                <fieldset class="login-fieldset">
                    <legend><s:text name="form.ajax.title" /></legend>
                    <label for="input_username" class="login-label">
                        <s:text name="text.label.username" />
                        <span id="user_username_error" class="error-message"></span>
                    </label>
                    <span class="input-span-block">
                        <input type="text" id="input_username" name="user.userName" />
                    </span>
                    <label for="input_userpass" class="login-label">
                        <s:text name="text.label.userpass" />
                        <span id="user_userpass_error" class="error-message"></span>
                    </label>
                    <span class="input-span-block">
                        <input type="password" id="input_userpass" name="user.userPass" />
                    </span>
                    <span class="button-span-block">
                        <sj:submit id="login_submit"
                                targets="result_message"
                                validate="true"
                                validateFunction="customLoginValidate"
                                onBeforeTopics="clearFieldErrors"
                                onSuccessTopics="success"
                                dataType="json"
                                value="%{getText('button.label.loginbyajax')}" />
                    </span>
                </fieldset>
            </form>
        </div>
        <div id="result_message" class="error-message"></div>
    </body>
</html>

//JSON 格式错误返回值中，KEY 中保存的是 input name的值，自定义函数进行同输出错误信息元素的映射
//本例中将 "user.userName" 转化为 "#user_username_error"
function formatErrorElementId(value) {
    var elem = value.toLowerCase();
    elem = elem.replace(/\./g , "_");
    elem += "_error"
    elem = "#"+elem;
    return elem;
}
 
//处理 JSON 格式的 validate 失败返回值
function customLoginValidate(form , errors) {
    if (errors.fieldErrors) {
        $.each(errors.fieldErrors , function(key,value) {
            var elem = formatErrorElementId(key);
            if (elem) {
                $(elem).html(value[0]);
            }
        });
    }
}
 
//清除前次留下的错误信息
$.subscribe("clearFieldErrors", function() {
    $("#user_username_error").html("");
    $("#user_userpass_error").html("");
}

免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。

SSH2 AJAX LoginDemo 项目增添验证体系

相关资料更多>

推荐阅读更多>