前端练习题——validate验证表单

最新推荐文章于 2023-08-10 12:39:27 发布

陈年_H

最新推荐文章于 2023-08-10 12:39:27 发布

阅读量238

点赞数

分类专栏：练习题文章标签： html js javascript

本文链接：https://blog.csdn.net/Today_He/article/details/108837539

版权

练习题专栏收录该内容

16 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>使用validate验证表单_初步优化版</title>
		<script type="text/javascript" src="js/jquery-3.5.1.js" ></script>
		<script type="text/javascript" src="js/jquery.validate.js" ></script>
		<script type="text/javascript" src="js/messages_zh.js" ></script>
		<style>
			.mouse{
				background-color: bisque;
			}
		</style>
		<script type="text/javascript">
			$(function(){
				//高光
				$("tr").mouseover(function(){
					$(this).addClass("mouse");
				}).mouseout(function(){
					$(this).removeClass("mouse");
				});
				//绑定验证方法
				$("#test").validate({
					rules:{
						"username":{
							"required":true,
							"rangelength":[3,6]
						},
						"pwd1":{
							"required":true,
							"rangelength":[4,8]
						},
						"pwd2":{
							"required":true,
							"equalTo":"#pwd1"
						},
						"email":{
							"required":true,
							"email":"email"
						},
						"birthday":{
							"dateISO":"yyyy-MM-dd"
						}
					},
					messages:{
						"username":{
							"required":"用户名不能为空哦",
							"rangelength":"用户名是3到6个字符哦"
						},
						"pwd1":{
							"required":"密码不能为空哦",
							"rangelength":"密码是4到8个字符哦"
						},
						"pwd2":{
							"required":"重复密码不能为空哦",
							"equalTo":"两次输入的密码必须一致哦"
						},
						"email":{
							"required":"邮箱不能为空哦",
							"email":"邮箱格式不正确哦"
						},
						"birthday":{
							"dateISO":"日期格式不正确哦"
						}
					},errorElement:"em"
				});
			});
		</script>
	</head>
	<body>
		<form id="test" action="/" method="get">
			<table border="1" style="background-color: aquamarine;">
				<thead>
					<tr>
						<td colspan="2" align="center"><h4>用户注册</h4></td>
					</tr>
				</thead>
				<tbody>
					<tr>
						<td>用户名：</td>
						<td>
							<input type="text" name="username"/>
						</td>
					</tr>
					<tr>
						<td>密码：</td>
						<td>
							<input type="password" name="pwd1" />
						</td>
					</tr>
					<tr>
						<td>确认密码：</td>
						<td>
							<input type="password" name="pwd2" />
						</td>
					</tr>
					<tr>
						<td>Email</td>
						<td>
							<input type="text" name="email" />
						</td>
					</tr>
					<tr>
						<td>出生日期：</td>
						<td>
							<input type="text" name="birthday" />
						</td>
					</tr>
					<tr>
						<td colspan="2" align="center">
							<input type="submit" value="注册"/>
						</td>
					</tr>
				</tbody>
			</table>
		</form>
	</body>
</html>

陈年_H

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
前端练习题——validate验证表单

<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>使用validate验证表单_初步优化版</title> <script type="text/javascript" src="js/jquery-3.5.1.js" ></script> <script type="text/javascript" src="js/j
复制链接

扫一扫