js实现注册页面的校验

基本操作

document.getElementById():获取页面元素
alert():向页面弹出提示框。
innerHTML:操作页面某个元素的内容,可以获取,也可以赋值。
document.write():向页面中写内容。

本案例实现注册表单的基本验证功能,主要实现非空验证、重复输入验证、邮箱验证(正则验证),通过alert提示对话框给予用户提示信息。并且当用户输入非法时阻止表单提交。
步骤分析:
第一步:绑定事件(onsubmit)。为form表单绑定onsubmit事件,并调用一个自定义函数。
第二步:编写该函数(获取用户输入的数据<获取数据时需要在指定位置定义一个 id>)
第三步:对用户输入的数据进行判断
第四步:数据合法(表单提交)
第五步:数据非法(给出错误提示信息,阻止表单提交)

【问题】如何控制表单提交?
关于事件 onsubmit:一般用于表单提交的位置,那么需要在定义函数的时候给出一个返回值。 onsubmit = return checkForm()
案例实现效果:当点击“注册”按钮时,验证表单输入内容是否合法,如果不合法则给出用户提示对话框,并且表单无法提交。


<html>
	<head>
		<meta charset="utf-8">
		<title>title>
		<script>
			function checkFrm() {
				var usernameValue = document.getElementById("username").value;
				if(usernameValue == ""){
					alert("用户名不能为空");
					return false;
				}
				var passwrodValue = document.getElementById("password").value;
				if(passwrodValue ==""){
					alert("密码不能为空");
					return false;
				}
				var emailValue = document.getElementById("email").value;
				var rule = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+/;
				if(rule.test(emailValue)) {
					alert("输入邮箱格式非法!");
					return false;
				}
			}
		script>
		<style>
			*{
				margin: 0px;
				padding: 0px;
				box-sizing: border-box;
			}
			body{
				background-color: azure;
			}
			.rg_layout{
				width:900px;
				height: 500px;
				margin: auto;
				background-color: white;
				border: 8px solid #EEEEEE;
				margin-top:30px;
			}
			.rg_left {
				border: 1px solid red;
				width: 200px;
				padding: 10px;
				float: left;
			}
			.rg_center{
				
				width:450px;
				float: left;
			}
			.rg_right{
				border: 1px solid red;
				width: 200px;
				float: right;
			}
			.td_left {
				width:100px;
				text-align: right;
				height: 45px;
			}
			.td_right{
				
				padding-left: 15px;
			}
			#username,#password,#email,#tel ,#name,#birthday,#checkcode{
				width: 251px;
				height: 32px;
				border: 1px solid #A6A6;
				border-radius: 5px;
				padding-left: 10px;
			}
			#checkcode{
				width: 110px;
			}
			#btn-sub{
				width:150px;
				height:40px;
				background-color: #00CCFF;
				border:1px solid #00CCFF;
			    border-radius: 5px;
			}
			#img_check{
				height: 32px;
				vertical-align: middle;//垂直居中
			}
		style>
	head>
	<body>
		<div class="rg_layout">
			<div class="rg_left">
				<p>新用户注册p>
				<P>USER REGISTERP>
			div>
			<div class="rg_center">
				<form action="#" method="get" onsubmit="return checkFrm()">
					<table>
						<tr>
							<td class="td_left">
								<label for="username">用户名:label>
							td>
							<td class="td_right">
								<input type="text" name="username" placeholder="请输入用户名" id="username">
							td>
						tr>
						<tr>
							<td class="td_left">
								<label for="password">密码:label>
							td>
							<td class="td_right">
								
							td>
						tr>
						<tr>
							<td class="td_left">
								<label for="email">Email:label>
							td>
							<td class="td_right">
								<input type="email" name="email"  id="email">
							td>
						tr>
						<tr>
							<td class="td_left">
								<label for="name">姓名:label>
							td>
							<td class="td_right">
								<input type="text" name="name" id="name">
							td>
						tr>
						<tr>
							<td class="td_left">
								<label for="tel">手机号:label>
							td>
							<td class="td_right">
								<input type="text" name="tel" id="tel">
							td>
						tr>
						<tr>
							<td class="td_left"><label >性别:label>td>
							<td class="td_right">
								<input type="radio" name="gender" value="man"><input type="radio" name="gender" value="woman">td>
						tr>
						<tr>
							<td class="td_left"><label for="birthday">出生日期label>td>
							<td class="td_right">
								<input type="date" name="birthday" id="birthday">
							td>
						tr>
						<tr>
							<td class="td_left"><label for="checkcode">验证码label>td>
							<td class="td_right">
								<input type="text" name="checkcode" id="checkcode">
								<img src="#" id="img_check">
							td>
						tr>
						<tr>
							<td colspan="2" align="center"><input type="submit" value="注册" id="btn-sub"/>td>	
						tr>

					table>		
				form>	
			div>
			<div class="rg_right">
				<P>已有账号<a href="#">立即登录a>P>	
			div>
		div>
	body>
html>


``

你可能感兴趣的:(js实现注册页面的校验)