使用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;
   }
}

这样就完成了表单的校验