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);
}