使用JavaScript实现注册页面并验证

1. 完成对注册表单的设计与验证

首先先完成页面的书写

<h6>"欢迎注册**网站"</h6>
		姓名：<input type="text" name="" id="names" value="" /><br />//姓名输入框
		密码：<input type="password" name="" id="passwords"><br />//密码输入框
		邮箱：<input type="text" name="" id="mailbox" value="" /><br />//邮箱输入框
		年龄：<input type="text" name="" id="years" value="" /><br />//年龄输入框
		<input type="button"  id="yz" value="验证信息">//验证信息按钮

 完成上述代码后可以得到这样一个页面：

 然后完成获取用户输入的信息以及完成验证：

//设置点击事件，当点击ID为"yz"的按钮时执行以下代码
document.getElementById("yz").onclick = function(){
				var names = document.getElementById("names").value//获取姓名输入框信息
				var q = /^[\u4e00-\u9fa5]+$/    //正则表达式
				var isName = q.test(names)       //判断输入数据是否符合正则表达式
				
				var passwords = document.getElementById("passwords").value//获取密码输入框信息
				var w = /^[0-9a-zA-Z_]{6,}$/    //正则表达式
				var isPasswords = w.test(passwords)   //判断输入数据是否符合正则表达式
				
				var mailbox = document.getElementById("mailbox").value//获取邮箱输入框信息
				var e = /^[0-9a-zA-Z_]+@[0-9a-zA-Z_]+[\.]{1}[0-9a-zA-Z_]+$/;
                //正则表达式
				var isMailbox = e.test(mailbox)   //判断输入数据是否符合正则表达式
				
				var years = document.getElementById("years").value//获取年龄输入框信息
				var r = /^[0-9]{1,}$/           //正则表达式
				var isYears = r.test(years)    //判断输入数据是否符合正则表达式

最后使用if语句进行判断：

if (!isName) {
					alert("姓名异常")
				}
				else if(!isPasswords) {
					alert("当前密码安全性过低，请重新输入并且长度不小于6")
				}
				else if(!isMailbox) {
					alert("邮箱格式不正确")
				}
				else if(!isYears) {
					alert("年龄输入有误")
				}else{
					alert("登录成功")
				}
			}

完整代码：

<h6>"欢迎注册**网站"</h6>
		姓名：<input type="text" name="" id="names" value="" /><br />
		密码：<input type="password" name="" id="passwords"><br />
		邮箱：<input type="text" name="" id="mailbox" value="" /><br />
		年龄：<input type="text" name="" id="years" value="" /><br />
		<input type="button" id="yz" value="验证信息">

		<script type="text/javascript">
			document.getElementById("yz").onclick = function() {
				var names = document.getElementById("names").value
				var q = /^[\u4e00-\u9fa5]{2,4}$/
				var isName = q.test(names)

				var passwords = document.getElementById("passwords").value
				var w = /^[0-9a-zA-Z_]{6,}$/
				var isPasswords = w.test(passwords)

				var mailbox = document.getElementById("mailbox").value
				var e = /^[0-9a-zA-Z_]+@[0-9a-zA-Z_]+[\.]{1}[0-9a-zA-Z_]+$/;
				var isMailbox = e.test(mailbox)

				var years = document.getElementById("years").value
				var r = /^[0-9]{1,}$/
				var isYears = r.test(years)
				if (!isName) {
					alert("姓名异常")
				}
				else if(!isPasswords) {
					alert("当前密码安全性过低，请重新输入并且长度不小于6")
				}
				else if(!isMailbox) {
					alert("邮箱格式不正确")
				}
				else if(!isYears) {
					alert("年龄输入有误")
				}else{
					alert("登录成功")
				}
			}
		</script>