使用SSM架構、jqury來校驗系統資料庫單

使用jqury來校驗表單

定義函數來檢驗表單項是否合法。使用spring-security來保證系統安全，是以要在配置檔案裡配置

<security:http parttern="資源路徑">security="none"></security:http>

,放行所有跟注冊功能有關的資源，否則系統無法通路到資源

以下是表單：

form action="user/register" method="post">
    <div class="form-group has-feedback">
        <input required="required" id="username" name="username" type="text" class="form-control" placeholder="使用者名" onchange="checkoutUsername()">
        <span class="glyphicon glyphicon-user form-control-feedback" ></span>
        <span id="usernameSpan" class="text-center" style="color: red"></span>
    </div>
    <div class="form-group has-feedback">
        <input required="required" type="email" class="form-control" placeholder="Email" name="email" id="email" onchange="checkoutEmail()">
        <span class="glyphicon glyphicon-envelope form-control-feedback" ></span>
        <span id="emailSpan" class="text-center" style="color: red"></span>
    </div>
    <div class="form-group has-feedback">
        <input required="required" type="password" class="form-control" placeholder="密碼" name="password" id="password">
        <span class="glyphicon glyphicon-lock form-control-feedback" ></span>
    </div>
    <div class="form-group has-feedback">
        <input required="required" type="password" class="form-control" placeholder="确認密碼" id="repassword" onchange="checkoutRepassword()">
        <span class="glyphicon glyphicon-log-in form-control-feedback" ></span>
        <span id="repasswordSpan" class="text-center" style="color: red"></span>
    </div>
    <div class="row">
         <!-- /.col -->
        <div class="col-xs-4">
            <button type="submit" class="btn btn-primary btn-block btn-flat" onclick="return checkoutAll()">注冊</button>
        </div>
        <!-- /.col -->
    </div>
</form>
           

1、使用Ajax來請求資料庫，判斷使用者名是否已經存在，注意：span不能使用val()方法，隻能使用text()方法來設定内容

function checkoutUsername(){
    var username = $('#username').val();
    $.get("${pageContext.request.contextPath}/user/findUserByUsername?username="+username,function (data) {
        if (null != data && "" != data){
            $("#usernameSpan").text("使用者名已存在");
            return false;
        }else {
            $("#usernameSpan").text("");
            return true;
        }
    });
}
           

注意：使用的是SpringMVC架構是以要導入jackson的依賴，并且在通路的controller方法加上@ResponseBody注解，這樣才可以用json的形式将資料傳回到前端。

2、校驗郵箱：使用正規表達式來測試郵箱格式

function checkoutEmail(){
    var email = $("#email").val();
    var reg = /^([a-z0-9_\.-]+)@([\da-z\.-]+)\.([a-z\.]{2,6})$/;
    if (reg.test(email) ){
        $("#emailSpan").text("");
        return true;
    }else {
        $("#emailSpan").text("郵箱格式錯誤");
        return false;
    }
}
           

3、校驗兩次密碼是否正确

function checkoutRepassword(){
    var password = $("#password").val();
    var repassword = $("#repassword").val();
    if(repassword != password && repassword != ""){
        $("#repasswordSpan").text("兩次密碼不一緻");
        return false;
    }else {
        $("#repasswordSpan").text("");
        return true;
    }
}
           

最後在submit按鈕上綁定單擊事件，注意要return 函數() 否則函數傳回false也會送出表單。最後送出時應當校驗所有表單項；

function checkoutAll(){
   if(checkoutRepassword()&&checkoutEmail()&&checkoutEmail()){
       return true;
   }else {
       return false;
   }
}
           

這樣就完成了表單的校驗