thymeleaf模版
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>用户管理</title>
<link rel="stylesheet" th:href="@{/css/css.css}">
<!-- <script src="http://static.runoob.com/assets/jquery-validation-1.14.0/lib/jquery.js"></script>-->
<script th:src="@{/js/jquery-1.11.3.js}"></script>
<script src="http://static.runoob.com/assets/jquery-validation-1.14.0/dist/jquery.validate.min.js"></script>
<script th:src="@{/js/messages_zh.js}"></script>
</head>
<body>
用户管理
<a href="/userlist" target="_blank">用户列表</a>
<form method="post" id="myform" action="" >
用户名：<input type="text" name="userName" id="userName" placeholder="用户名" minlength="2" required/> <br />
密码：<input type="password" name="passWord" id="passWord" minlength="6" required/> <br />
邮箱：<input type="email" name="email" id="email" placeholder="邮箱" required/>
<input type="submit" value="提交" ></input>
</form>
</body>
</html>
<script>
$.validator.setDefaults({
submitHandler: function() {
//alert("提交事件!");
addUser();
}
});
$().ready(function() {
$("#myform").validate({
debug: true, //调试模式取消submit的默认提交功能
});
});
</script>
<script language="JavaScript">
function addUser(){
var userName = $.trim($('#userName').val());
var passWord = $.trim($('#passWord').val());
var email = $.trim($('#email').val());
$.post('/useradd',{
'userName': userName,
'passWord': passWord,
'email': email
}, function (res) {
if(res.code >0 ){
alert("错误："+res.msg,{icon: 2});
setTimeout(2000);
}else
{
alert(res.msg,{icon: 2});
setTimeout(function () {
window.location.href = "/userlist";
},2000);
}
},"json")
}
</script>
validation验证 messages_zh.js 文件
(function( factory ) {
if ( typeof define === "function" && define.amd ) {
define( ["jquery", "../jquery.validate"], factory );
} else {
factory( jQuery );
}
}(function( $ ) {
/*
* Translated default messages for the jQuery validation plugin.
* Locale: ZH (Chinese, 中文 (Zhōngwén), 汉语, 漢語)
*/
$.extend($.validator.messages, {
required: "这是必填字段",
remote: "请修正此字段",
email: "请输入有效的电子邮件地址",
url: "请输入有效的网址",
date: "请输入有效的日期",
dateISO: "请输入有效的日期 (YYYY-MM-DD)",
number: "请输入有效的数字",
digits: "只能输入数字",
creditcard: "请输入有效的信用卡号码",
equalTo: "你的输入不相同",
extension: "请输入有效的后缀",
maxlength: $.validator.format("最多可以输入 {0} 个字符"),
minlength: $.validator.format("最少要输入 {0} 个字符"),
rangelength: $.validator.format("请输入长度在 {0} 到 {1} 之间的字符串"),
range: $.validator.format("请输入范围在 {0} 到 {1} 之间的数值"),
max: $.validator.format("请输入不大于 {0} 的数值"),
min: $.validator.format("请输入不小于 {0} 的数值")
});
}));