JQueryFormValidate

*.js file

---------------------------------------------------------------------------------

<%-- form validate --%>
<script src="validate/js/jquery_last.js" type="text/javascript"></script>
<link type="text/css" rel="stylesheet" href="validate/style/validator.css"></link>
<script src="validate/js/formValidator.js" type="text/javascript" charset="UTF-8"></script>
<script src="validate/js/formValidatorRegex.js" type="text/javascript" charset="UTF-8"></script>
<%-- form validate end --%>

 

<script type="text/javascript">
    $(document).ready(function(){
        $.formValidator.initConfig({
            formid:"regForm",
            onerror:function(msg){
                alert(msg);
            },
            onsuccess:function(){
                if(confirm("確認要提交嗎？")){
                    //alert("正在提交...");
                    doucment.getElementById("regForm").submit();
                    //return true;
                };
                return false;
            }
        });
        $("#loginName").formValidator({
            tipid:"loginNameTip",
            onshow:"請輸入用戶名",
            onfocus:"用戶名為6-20個字符",
            oncorrect:"恭喜你,你输对了"
        }).inputValidator({
            min:6,
            max:20,
            onerror:"請輸入6-20個字符的用戶"
        }).regexValidator({
            regexp:"username",
            datatype:"enum",
            onerror:"用户名格式不正确"
        }).ajaxValidator({
            type : "get",
            url : "user.do?op=do_isExistLoginName",
            datatype : "json",
            success : function(data){    
                if(data == "1")
                {
                    return true;
                }
                else
                {
                    return false;
                }
            },
            buttons: $("#button"),
            error: function(){alert("服务器没有返回数据，可能服务器忙，请重试");},
            onerror : "该用户名不可用，请更换用户名",
            onwait : "正在对用户名进行合法性校验，请稍候..."
        }); 
        //最後加上.defaultPassed() 就不正常，

        $("#fullName").formValidator({
            tipid:"fullNameTip",
            onshow:"請輸入姓名",
            onfocus:"姓名必須大于1個字符",
            oncorrect:"恭喜你,你输对了"
        }).inputValidator({
            min:2,
            max:10,
            onerror:"請輸入大于2個字符的姓名"
        });
        $("#loginPwd").formValidator({
            tipid:"loginPwdTip",
            onshow:"請輸入密碼",
            onfocus:"密碼為6-20個字符",
            oncorrect:"恭喜你,你输密碼長度正確！"
        }).inputValidator({
            min:6,
            max:20,
            onerror:"請輸入6-20個字符的密碼"});
        $("#loginPwdAgain").formValidator({
            tipid:"loginPwdAgainTip",
            onshow:"請輸入確認密碼",
            onfocus:"密碼為6-20個字符",
            oncorrect:"恭喜你,你输对了"
        }).inputValidator({
            min:6,
            max:20,
            onerror:"請輸入6-20個字符的密碼"
        }).compareValidator({
            desid:"loginPwd",
            operateor:"=",
            onerror:"2次密码不一致,请确认"
        });
        $("#email").formValidator({
            tipid:"emailTip",
            onshow:"請輸入郵箱地址",
            onfocus:"正確的郵箱格式",
            oncorrect:"恭喜你,你输对了"
        }).inputValidator({
            min:6,
            max:20,
            onerror:"正確的郵箱格式"
        }).regexValidator({
            regexp:"email",
            datatype:"enum",
            onerror:"郵箱格式不正確"
        });
    });

</script>

 

*.html file

---------------------------------------------------------------------------------

        <div id="divLogin" style="">
        <form id="regForm" action="" method="post">
        <table width="100%" style="" cellpadding="0px" border="0" cellspacing="0" bgcolor="#FFFFFF">
            <tr>
            <td align="right" width="120px">帳號：</td>
            <td width="210px"><input type="text" id="loginName"></td>
                <td width="320"><div id="loginNameTip"></div></td>
            </tr>
            <tr>
            <td align="right">密碼：</td>
            <td><input type="password" id="loginPwd"></td>
            <td><div id="loginPwdTip"></div></td>
            </tr>
            <tr>
            <td align="right">確認密碼：</td>
            <td><input type="password" id="loginPwdAgain"></td>
            <td><div id="loginPwdAgainTip"></div></td>
            </tr>
            <tr>
            <td align="right">郵箱：</td>
            <td><input type="text" id="email"></td>
            <td><div id="emailTip"></div></td>
            </tr>
            <tr>
                   <td colspan="3" align="center">
                       <input type="submit" class="btnForm" id="button" value="提交" />
                       <input type="reset" class="btnForm" value="重置" />
                   </td>
            </tr>
        </table>
        </form>
        </div>

 

java action code:

----------------------------------------------------------------------------------------

    public ActionForward do_isExistLoginName(ActionMapping mapping, ActionForm form,
            HttpServletRequest request, HttpServletResponse response)
    throws IOException, InterruptedException {
        response.setContentType("text/x-json;charset=UTF-8");
        PrintWriter out = response.getWriter();
        System.out.println("Test : " + request.getParameter("loginName"));
        String loginName = request.getParameter("loginName");
        if(null!=loginName && !"".equals(loginName)){
            if(userService.isExistEntity(loginName)){
                out.print("0");
                return null;
            }else{
                out.print("1");
                return null;
            }
        }else{
            request.setAttribute("errorMsg", "非法參數的請求！");
            return mapping.findForward("500");
        }
    }