程序创新大会报名表表单验证—基于jQuery实现表单验证

最新推荐文章于 2024-06-29 14:47:07 发布

轨迹_Mine

最新推荐文章于 2024-06-29 14:47:07 发布

阅读量330

点赞数 1

分类专栏： Web 文章标签： jquery javascript 前端 java html

本文链接：https://blog.csdn.net/qq_36105011/article/details/122314212

版权

Web 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

文章目录

需求
代码结构和资源引入
代码实现
界面示例

需求

制作一个大会的宣传网站以供用户自行注册报名。要求自行定义表单项中的数据格式并基于jQuery实现表单验证。

代码结构和资源引入

这里需要基于jQuery实现表单验证，所以要引入js文件
<script type="application/javascript" src="js/jquery-1.11.1.js"></script>

在这里插入图片描述

代码实现

index.html

<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<title>2021程序创新大会</title>
		<script type="application/javascript" src="js/jquery-1.11.1.js"></script>
		<script>
			function isUserName() {
				var val = $("input[name='userName']").val();
				if(val == "") {
					$("span[id='nameMsg']").html("用户名不能为空").css("color", "red");
					return false;
				} else if(/^[a-zA-Z]\w{5,}/.test(val) == false) {
					$("span[id='nameMsg']").html("用户名必须以字母开头，至少五位数字结尾").css("color", "red");
					return false;
				}
				$("span[id='nameMsg']").html("用户名可用").css("color", "green");
				return true;
			}

			function isPwd1() {
				var pwd = $("input[name='password1']").val();
				if(pwd == "") {
					$("span[id='pwdMsg1']").html("密码不能为空").css("color", "red");
					return false;
				} else if(/\d+[a-zA-Z]+/.test(pwd) == false) {
					$("span[id='pwdMsg1']").html("密码必须包含数字和字母！").css("color", "red");
					return false;
				} else if(pwd.length < 6) {
					$("span[id='pwdMsg1']").html("密码长度不小于6").css("color", "red");
					return false;
				}
				$("span[id='pwdMsg1']").html("密码可用").css("color", "green");
				return true;
			}

			function isPwd2() {
				if($("input[id='password1']").val() != $("input[id='password2']").val()) {
					$("span[id='pwdMsg2']").html("两次输入的密码不一致").css("color", "red");
					return false;
				}
				$("span[id='pwdMsg2']").html("密码一致！").css("color", "green");
				return true;
			}

			function isGender() {
				var val = $("select[id='gender']").val();
				if(val == -1) {
					alert("请选择性别！");
					return false;
				}
				return true;
			}
			//页面加载事件
			$(function() {

				$("input[name='userName']").blur(function() {
					isUserName();
				});

				$("input[id='password1']").blur(function() {
					isPwd1();
				});

				$("input[id='password2']").blur(function() {
					isPwd2()
				});

				$("#myForm").submit(function() {
					return isUserName() && isPwd1() && isPwd2();
				});
			});
		</script>
	</head>

	<body>		
		<form id="myForm" action="registerSuccess.html" method="get">
			用户名：<input type="text" id="userName" name="userName" placeholder="請輸入用戶名" />
			<span id="nameMsg">用户名必须以字母开头，至少五位数字结尾</span><br/> 密码：
			<input type="password" id="password1" placeholder="請輸入密码" />
			<span id="pwdMsg1">密码长度至少6位，且必须包含数字、字母</span><br /> 确认密码：
			<input type="password" id="password2" placeholder="请输入密码" />
			<span id="pwdMsg2">确认密码一致</span><br />
			<!--性别：<input type="radio" id="gender" name="gender" value="1"/>男
		    <input type="radio" name="gender" value="-1"/>女<br />-->
			性别：
			<select id="gender">
				<option value="-1">选择性别</option>
				<option value="1">男</option>
				<option value="0">女</option>
			</select><br /> 身份证号：

			<input type="text" name="idCard" placeholder="请输入身份证号" /><br /> 爱好：
			<input type="checkbox" name="hobby" value="swim" /> 游泳
			<input type="checkbox" name="hobby" value="basketball" />篮球
			<input type="checkbox" name="hobby" value="music" />音乐<br /> 头像：
			<input type="file" name="headImg" /><br /> 出生日期：
			<input type="datetime" name="birthday" /><br /> 学历:
			<select name="学历">
				<option value="student">本科</option>
				<option value="master"> 硕士研究生</option>
				<option value="doctor">博士研究生</option><br/>
			</select><br /> 声明：
			<textarea rows="20" cols="30" readonly="readonly">本此大会相关解释权归会议组委会所有！1.所有参与者需遵守相关规章制度；2.按时缴纳费用，凭借核酸检测证明入场。
			
		</textarea><br />
			<button type="submit">注册</button>
			<input type="reset" value="重置">
			<p>
				<a href="http://www.baidu.com" target="content">大会流程</a>
			</p>
			<iframe name="content" src="sub/notes.html"></iframe>
		</form>

	</body>

</html>

注册成功页面registerSuccess.html

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>注册成功</title>
	</head>

	<body>
		恭喜你，注册成功！
	</body>

</html>

界面示例

在这里插入图片描述

轨迹_Mine

关注

1
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
程序创新大会报名表表单验证—基于jQuery实现表单验证

制作一个大会的宣传网站以供用户自行注册报名。要求自行定义表单项中的数据格式并基于jQuery实现表单验证。# 代码结构和资源引入* 这里需要基于jQuery实现表单验证，所以要引入js文件
复制链接

扫一扫

专栏目录