JavaScript部分：

$(function() {    //表單驗證
$("#addUserInfo").validate({rules: {
            username: {
                required: true,
minlength: 2,
//非同步驗證 開始
remote: {
                    url: "userManage/username.validate",//傳送請求的url地址
type: "post", //請求方式
dataType: "json",//接收的資料型別
data: {
                        username
 
: function () {
                            return $("#username").val();}
                    },
dataFilter: function (data, type) { //過濾返回結果
if (data == "true")
                            return true;  //true代表使用者名稱還未存在
else
                          return false; //false代表使用者名稱已經存在
}
                }
                //非同步驗證 結束
 
},
password: {
                required: true,
minlength: 5
},
confirmpassword: {
                required: true,
minlength: 5,
equalTo:"#password"
},
mobile: {
                required: true,
minlength: 5,
},
},
messages: {
            username: {
                required: "請輸入使用者名稱",
minlength: "使用者名稱必需由兩個字母組成"
 
,
remote:"輸入的使用者名稱已經存在"
},
password: {
                required: "請輸入密碼",
minlength: "密碼長度不能小於 5 個字母"
},
confirmpassword: {
                required: "請輸入密碼",
minlength: "密碼長度不能小於 5 個字母",
equalTo:"兩次輸入密碼不一致"
},
mobile: {
                required: "請輸入手機號",
minlength: "手機號長度不能小於 5 個字母"
},
}
    });
} );
/**
 * 新增使用者資訊
 */
function addUser(){
    var flag = $("#addUserInfo").valid();
if(!flag){
        //沒有通過驗證
return;
}
    var data = $("#addUserInfo").serializeObject();
$.ajax({
        secureuri : false, //是否需要安全協議，一般設定為false
fileElementId : 'file_path',
type:"post",
dataType:'json',
data:data,
url:"userManage/adduser.do",
success:function(json){
            alert(json.message);
$("#addUserInfo input[name='username']").val("");
$("#addUserInfo input[name='password']").val("");
$("#addUserInfo input[name='confirmpassword']").val("");
$("#addUserInfo input[name='mobile']").val("");
if(json.success){
                dataTable1.draw();
}
        }
    });
}

<div class="box box-primary" style="width:30%;">
    <div class="box-header with-border">
        <h3 class="box-title">新增使用者資訊</h3>
    </div>
    <form role="form" id="addUserInfo">
        <div class="box-body">
            <div class="form-group">
                <label for="username">姓名</label>
                <input type="text" class="form-control" id="username"  name="username" placeholder="Enter username" />
            </div>
            <div class="form-group">
                <label for="password">密碼</label>
                <input type="password" class="form-control" id="password" name="password" placeholder="Password" />
            </div>
            <div class="form-group">
                <label for="confirmpassword">再次輸入密碼</label>
                <input type="password" class="form-control" id="confirmpassword" name="confirmpassword" placeholder="Confirm Password" />
            </div>
            <div class="form-group">
                <label for="mobile">電話</label>
                <input type="text" class="form-control" id="mobile" name="mobile" placeholder="Mobile" />
            </div>
        </div>
        <div class="box-footer">
            <button type="button" onclick="addUser()" class="btn btn-primary">新增</button>
            <button type="reset" class="btn btn-primary">重置</button>
        </div>
    </form></div>