html文件内容（springboot项目，使用了thymeleaf模板引擎）
<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>使用 jQuery validate 表单验证</title>
<script th:src="@{/scripts/jquery-1.7.2.min..js}"></script>
<script th:src="@{/scripts/jquery.validate.min.js}"></script>
<script th:src="@{/scripts/messages_zh.min.js}"></script>
<script>
$(document).ready(function () {
$("#form1").validate({
rules:{ //校验规则
userName:{
required: true,
minlength: 2,
remote:{
url: "userLogin", //后台处理程序
type: "post", //数据发送方式
dataType: "json", //接受数据格式
data: { //要传递的数据
userName: function() {
return $("#userName").val();
}
}
}
},
email:{
required:true
},
password:{
required: true,
minlength: 5
}
} ,
messages:{ //提示
userName:{
required: "请输入用户名",
minlength: "用户名必需由两个字母组成",
remote:"用户不存在"
},
email:{
required:"请输入邮箱地址"
},
password:{
required: "请输入密码",
minlength: "密码长度不能小于 5 个字母"
}
}
});
});
</script>
</head>
<body>
<form id="form1" action="/userLogin">
<input type="text" id="userName" class="userName" name="userName"><br>
<input type="email" id="email" name="email"><br>
<input type="password" id="password" class="password" name="password"><br>
<input type="submit" value="login">
</form>
</body>
</html>
后台验证程序代码（省去了从数据库中查找数据这一操作，该项目是springboot项目）
package com.njxz.demo.controller;
import org.apache.ibatis.annotations.Param;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;
@RestController
public class UserController {
//对应前端的remote中的URL地址
//远程地址只能输出 "true" 或 "false"，不能有其他输出
@RequestMapping("/userLogin")
public String userLogin(@Param("userName") String userName){//验证用户是否存在
if(userName.equals("yxc")){
return "true";
}
return "false";
}
}
即在userName输入框中只有当输入"yxc"时该用户才存在，输入其他值用户不存在。
效果图
6164
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
