表单校验

最新推荐文章于 2024-01-18 09:02:28 发布

HGG-

最新推荐文章于 2024-01-18 09:02:28 发布

阅读量125

点赞数

分类专栏： web前端

本文链接：https://blog.csdn.net/qq_40959562/article/details/99678776

版权

web前端专栏收录该内容

17 篇文章 0 订阅

订阅专栏

在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript">
			function checkForm(){
				var username=document.getElementById("username").value;
				var password=document.getElementById("password").value;
				var repassword=document.getElementById("repassword").value;
				var email=document.getElementById("email").value;
				if(username==""){
					alert("用户名不能为空");
				}
				if(password==""){
					alert("密码不能为空");
				}
				if(password!=repassword){
					alert("两次密码输入不一致！");
				}
				if(!/^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+/.test(email)){
					alert("请输入合法的邮箱地址");
				}
				else{
					alert("注册成功");
				}
			}
		</script>
	</head>
	<body>
		<div style="height: 600px;background-color: pink;">
			<div style="border: 5px solid gray; background-color: white;position: absolute;left: 350px;top: 160px;width: 600px;">
				<form action="#"method="post">
					<table border="0" width="100%" cellspacing="15">
						<tr>
							<td>用户名</td>
							<td>
								<input type="text" id="username" name="username" />
							</td>
						</tr>
						<tr>
							<td>密码</td>
							<td>
								<input type="password" id="password" name="password" />
							</td>
						</tr>
						<tr>
							<td>确认密码</td>
							<td>
								<input type="password" id="repassword" name="repassword" />
							</td>
						</tr>
						<tr>
							<td>性别</td>
							<td>
								<input type="radio" name="sex" value="男" />男
								<input type="radio" name="sex" value="女" />女
							</td>
						</tr>
						<tr>
							<td>籍贯</td>
							<td>
								<select name="province">
									<option>请选择</option>
									<option value="">河南省</option>
								</select>
								<select name="city">
									<option>请选择</option>
									<option>郑州市</option>
									<option>新乡市</option>
								</select>
							</td>
						</tr>
						<tr>
							<td>爱好</td>
							<td>
								<input type="checkbox" name="hobby" value="篮球" />篮球
								<input type="checkbox" name="hobby" value="足球" />足球
								<input type="checkbox"name="hobby" value="排球" />排球
								<input type="checkbox" name="hobby" value="羽毛球" />羽毛球
							</td>
						</tr>
						<tr>
							<td>邮箱</td>
							<td>
								<input type="text" name="email" id="email" />
							</td>
						</tr>
						<tr>
							<td colspan="2">
								<input type="button" value="注册" onclick="checkForm()" />
							</td>
						</tr>
					</table>
				</form>
			</div>
		</div>
	</body>
</html>

HGG-

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
表单校验

<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <script type="text/javascript"> function checkForm(){ var username=documen...
复制链接

扫一扫

专栏目录