js的validate插件異步效驗
阿新 • • 發佈：2018-10-31
gin action rules 插件 method 輸入 img checkbox red
js代碼
$(function () { $("#regForm").validate({ onsubmit:true,// 是否在提交是驗證 onkeyup: false, //失去焦點驗證 onfocusout:function(element){ $(element).valid();},// 是否在獲取焦點時驗證 rules: { username: { required: true, minlength:7, maxlength: 16 , remote: { type: "post", url: "/nameverify", data: { username: function() { return $("#username").val(); }// 如果直接寫“data: {username: $("#username").val();}”，這樣是獲取不到值的。 }, dataType: "json", dataFilter: function(data) { return data; } } }, password: { required:true, minlength: 7, maxlength: 16 }, secondPassword:{ required: true , equalTo: "#password" } }, messages:{ //驗證錯誤信息 username: { required: "請輸入用戶名" , minlength: "至少7位字符" , maxlength: "最多16位字符" , remote: "用戶名已存在" }, password: { required: "請輸入密碼", minlength: "至少7位字符" , maxlength: "最多16位字符" }, secondPassword:{ required: "請確認密碼" , equalTo: "密碼不一致" } }, }); });
html頁面
<body > <form class="form-signin text-center" id="regForm" th:action="@{/toregister}" method="post"> <img class="mb-4" src="/img/Pig_chivalrous_407px_505743_easyicon.net.svg" alt="" width="72" height="72"> <h1 class="h3 mb-3 font-weight-normal">註冊</h1> <label for="username" class="sr-only">用戶名</label> <input name="username" type="text" id="username" class="form-control" placeholder="用戶名" > <label for="password" class="sr-only">密碼</label> <input name="password" type="password" id="password" class="form-control" placeholder="密碼" > <label for="secondPassword" class="sr-only">確認密碼</label> <input name="secondPassword" type="password" id="secondPassword" class="form-control" placeholder="確認密碼" style="margin-bottom: 10px;" > <div class="checkbox mb-3"> <label> <input type="checkbox" value="remember-me"> 記住我 </label> </div> <button class="btn btn-lg btn-primary btn-block" type="submit">註冊</button> <a class="btn " th:href="@{/login}" >登陸</a> <p class="mt-5 mb-3 text-muted">© 校園二手交易</p> </form> </body>
js導入
<script type="text/javascript" src="js/jquery-3.2.1.min.js"></script> <script type="text/javascript" src="js/register.js"></script> <script type="text/javascript" src="js/jquery.validate.min.js"></script> <script type="text/javascript" src="js/messages_zh.js"></script>
springmvc後臺響應json
@ResponseBody
@RequestMapping("/nameverify")
public Boolean nameIsExists(String username){
return !localAuthService.isNameExists(username);
}
js的validate插件異步效驗