编程心得+使用JS完成注册页面表单校验

最新推荐文章于 2022-08-15 19:49:49 发布

Object~

最新推荐文章于 2022-08-15 19:49:49 发布

阅读量468

点赞数

分类专栏： Java Web随笔文章标签： java ee web

本文链接：https://blog.csdn.net/Haidaiya/article/details/79302371

版权

Java Web随笔专栏收录该内容

28 篇文章 1 订阅

订阅专栏

今天给大家带来简单的JavaScript注册表单的校验，顺便说一下码代码的心得，其实编程是一种心有猛虎，细嗅蔷薇的功夫，通俗说来，大脑只需要知道有这个用法即可，手指才是记忆代码的工具。比如今天的代码，可能会用到正则表达式，正则表达式我学过很多遍，学了忘忘了学，很苦恼，但是其实这并不需要记忆，你只需要知道去网上搜索邮箱正则表达式就会出来很多，许多高级的程序员背后一定有一个强大的类库，需要的时候ctrl+c和ctrl+v即可，遇到好的项目也要先来看看源码学习，见多才能识广，故希望看到这篇博客的和我一样是菜鸟的同学不要陷入开发的误区。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>使用JS完成注册页面表单校验</title>
		<script>
			function checkForm(){
				//alert("aa");
				/*校验用户名*/
				//1.获取用户输入的数据
				var uValue = document.getElementById("user").value;
				if (uValue=="") {
					//2.给出错误提示信息
					alert("用户名不能为空！");
					return false;
				}
				/*校验密码*/
				//1.获取用户输入的数据
				var pValue = document.getElementById("password").value;
				if (pValue=="") {
					//2.给出错误提示信息
					alert("密码不能为空！");
					return false;
				}
				/*校验确认密码*/
				var rpValue = document.getElementById("repassword").value;
				if(rpValue!=pValue){
					alert("两次密码不一致！");
					return false;
				}
				/*校验邮箱*/
				var eValue = document.getElementById("email").value;
				if(!/^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+/.test(eValue)){
					alert("邮箱格式不正确！");
					return false;
				}
			}
		</script>
	</head>
	<body>
		<!--
        	作者：2651164672@qq.com
        	时间：2018-02-08
        	描述：写3.注册表单时请千万不要忘记写form标签
        -->
		<table border="1px" align="center" width="1300px" cellpadding="0px" cellspacing="0px">
			<!--1.logo部分-->
			<tr>
				<td>
					<!--嵌套一个一行三列的表格-->
					<table border="1px" width="100%">
						<tr height="50px">
							<td width="33.3%">
								<img src="../img/logo2.png" height="47px"/>
							</td>
							<td width="33.3%">
								<img src="../img/header.png" height="47px" />
							</td>
							<td width="33.3%">
								<a href="#">登录</a>
								<a href="#">注册</a>
								<a href="#">购物车</a>
							</td>
						</tr>
					</table>
				</td>
			</tr>
			<!--2.导航栏部分-->
			<tr height="50px">
				<td bgcolor="black">
					    
					<a href="#">
						<font size="5" color="white">首页</font>
					</a>     
					<a href="#">
						<font color="white">手机数码</font>
					</a>    
					<a href="#">
						<font color="white">电脑办公</font>
					</a>    
					<a href="#">
						<font color="white">鞋靴箱包</font>
					</a>    
					<a href="#">
						<font color="white">家用电器</font>
					</a>
				</td>
			</tr>
			<!--3.注册表单-->
			<tr>
				<td height="300px" background="../img/regist_bg.jpg">
					<!--嵌套一个十行二列的表格-->
					<form action="#" method="get" name="regForm" οnsubmit="return checkForm()">
						<table border="0px" width="750px" height="400px" align="center" cellpadding="0px" cellspacing="0px" bgcolor="white">
							<tr height="40px">
								<td colspan="2">
									<font size="4">会员注册</font>    USER REGISTER
								</td>
							</tr>
							<tr>
								<td align="center">用户名</td>
								<td>
									<input type="text" name="user" size="34px" id="user"/>
								</td>
 							</tr>
							<tr>
								<td align="center">密码</td>
								<td>
									<input type="password" name="password" size="34px" id="password"/>
								</td>
							</tr>
							<tr>
								<td align="center">确认密码</td>
								<td>
									<input type="password" name="repassword" size="34px" id="repassword"/>
								</td>
							</tr>
							<tr>
								<td align="center">Email</td>
								<td>
									<input type="text" name="email" size="34px" id="email"/>
								</td>
							</tr>
							<tr>
								<td align="center">姓名</td>
								<td>
									<input type="text" name="username" size="34px" />
								</td>
							</tr>
							<tr>
								<td align="center">性别</td>
								<td>
									<input type="radio" name="sex" value="男" />男
									<input type="radio" name="sex" value="女" />女
								</td>
							</tr>
							<tr>
								<td align="center">出生日期</td>
								<td>
									<input type="text" name="birthday" size="34px"/>
								</td>
							</tr>
							<tr>
								<td align="center">验证码</td>
								<td>
									<input type="text" name="yzm" />
									<img src="../img/yanzhengma.png" />
								</td>
							</tr>
							<tr>
								<td colspan="2" align="center">
									<input type="submit" value="注册" />
								</td>
							</tr>
						</table>
					</form>
					
				</td>
			</tr>
			<!--4.广告图片-->
			<tr>
				<td>
					<img src="../img/footer.jpg"  width="100%"/>
				</td>
			</tr>
			<!--5.友情链接和版权信息-->
			<tr>
				<td align="center">
					<a href="#">关于我们</a>
					<a href="#">联系我们</a>
					<a href="#">招贤纳士</a>
					<a href="#">法律声明</a>
					<a href="#">友情链接</a>
					<a href="#">支付方式</a>
					<a href="#">配送方式</a>
					<a href="#">服务声明</a>
					<a href="#">广告声明</a>
					<p>
						Copyright © 2005-2016 传智商城 版权所有 
					</p>
				</td>
			</tr>
		</table>
	</body>
</html>

以上代码在Hbuilder上测试完毕，其中图片不另附，运行不出，删除即可，无关紧要。