jQuery插件validation
![[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-EyEkDaUX-1648570620673)(C:\Users\12994\Desktop\笔记整理\JavaWeb\笔记\总结整理\jQuery.assets\image-20220329115824282.png)]](https://file.cfanz.cn/uploads/png/2022/03/30/8/1209XAB6JI.png)
5.1、日期插件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="My97DatePicker/My97DatePicker/WdatePicker.js"></script>
</head>
<body>
<form action="" method="post">
出生日期：<input class="Wdate" type="text" onclick="WdatePicker({el:this,dateFmt:'yyyy-MM-dd HH:mm:ss'})">
</form>
</body>
</html>
5.1、表单校验
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jq表单插件</title>
<script src="./"></script>
<script src="./js/jquery.validate.js"></script>
<script src="./js/messages_zh.js"></script>
<style>
em.error{
color: red;
font-size: 12px;
}
</style>
<script>
$(function(){
$("#formId").validate({
rules: {
"username": {
required: true,
rangelength: [5, 12]
},
"pwd": {
required: true,
digits: true
},
"repwd": {
equalTo: "#pwd"
},
"email": {
email: true
},
"birthday": {
dateISO: true
}
},
messages: {
"username": {
required: "这个是你必填的内容！",
rangelength: "长度必须为5~12个字符"
},
"pwd": {
required: "密码必填！",
digits: "必须是数字！"
},
"repwd": {
equalTo: "确认密码与密码不一致！"
},
"email": {
email: "邮箱不合法！"
},
"birthday": {
dateISO: "日期不合法！"
}
},
errorElement: "em"
});
})
</script>
</head>
<body>
<form id="formId" method="post" action="#">
<table border="1" cellspacing="0" width="400" align="center">
<tr align="center">
<td colspan="2">⽤户注册</td>
</tr>
<tr>
<td align="right">⽤户名：</td>
<td><input type="text" name="username"></td>
</tr>
<tr>
<td align="right">密码：</td>
<td><input id="pwd" type="password" name="pwd"></td>
</tr>
<tr>
<td align="right">确认密码：</td>
<td><input type="password" name="repwd"></td>
</tr>
<tr>
<td align="right">Email：</td>
<td><input type="text" name="email"></td>
</tr>
<tr>
<td align="right">出⽣⽇期：</td>
<td><input type="text" name="birthday"></td>
</tr>
<tr align="center">
<td colspan="2"><input type="submit" value="注册"></td>
</tr>
</table>
</form>
</body>
</html>
