1.以form表单的形式提交，并对各个字段做非空校验，时间格式是通过控件完成
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>日期控件校验</title>
<link rel="stylesheet" href="../css/test05.css" type="text/css" />
<link rel="stylesheet" href="../js/My97DatePicker/My97DatePicker/skin/default/datepicker.css"/>
</head>
<body>
<form class="cmxform" id="commentForm" method="get" action="">
<table>
<tbody>
<tr class="ttt">
<td colspan="4"> 员工信息新增 </td>
</tr>
<tr>
<td>员工姓名</td>
<td><input type="text" id="name" name="name" /></td>
<td>邮箱</td>
<td><input type="text" id="email" name="email" /></td>
</tr>
<tr>
<td>毕业院校</td>
<td><input type="text" id="school" name="school" /></td>
<td>登记时间</td>
<td>
<input id="time" name="time" class="Wdate" onfocus="WdatePicker({dateFmt:'yyyy-MM-dd',readOnly:true})" value="2018-11-13"/><br><br>
</td>
</tr>
<tr>
<td>职称</td>
<td><input type="text" id="pesname" name="pesname" /></td>
<td>工资</td>
<td><input type="text" id="sals" name="sals" /></td>
</tr>
<tr>
<td colspan="2">
<input type="submit" />
</td>
<td colspan="2">
<input type="reset" />
</td>
</tr>
</tbody>
</table>
</form>
<script src="../js/jquery-1.12.4.min.js" type="text/javascript"></script>
<script src="../js/jquery.validate.min.js" type="text/javascript"></script>
<script src="../js/My97DatePicker/My97DatePicker/WdatePicker.js" type="text/javascript"></script>
<script type="text/javascript">
$.validator.setDefaults({
submitHandler: function () {
// 所有表单数据使用json格式数据提交，并将json数据通过console.log()方式在控制台打印出来。
console.log("提交事件!");
//获取表单里的数据
var name = $("#name").val();
var email = $("#email").val();
var school = $("#school").val();
var time = $("#time").val();
var pesname = $("#pesname").val();
var sals = $("#sals").val();
var obj = {
"name" : name,
"email": email,
"school": school,
"time": time,
"pesname": pesname,
"sals": sals
};
var str = JSON.stringify(obj);
console.log(str)
$.ajax({
url: "../data/score.json",
type: "GET",
dataType: "json",
data: str,
success: function (result) { //成功操作
console.log("发送数据");
console.log(str)
},
error: function () {
console.log("发送数据失败");
}
})
}
}) ,
$().ready(function () {
$("#commentForm").validate({
rules: {
name: {
required: true,
},
email: {
required: true,
email: true
},
school: {
required: true,
},
pesname: {
required: true,
},
sals: {
required: true,
},
time: {
required: true,
},
},
messages: {
name: {
required: ' 请输入用户名 ',
},
email: {
required: "请输入一个邮箱",
email: "请输入一个正确的邮箱"
},
school: {
required: "请输入学校",
},
pesname: {
required: "请输入职称",
},
sals: {
required: "请输入工资",
},
time: {
required: "请输入时间",
},
}
})
} )
</script>
</body>
</html>对于校验插件错误时的提示通过css文件 .error
table{
text-align: center;
width: 100%;
height: 70%;
}
form {
width: 500px;
height: 400px;
margin: auto;
}
thead #text{
font-size: 20px;
}
.ttt td{
text-align: left;
font-size: 24px;
}
td{
width: 66px;
}
.error{
color:red;
}