h5表单注册界面

最新推荐文章于 2023-03-20 19:20:25 发布

大怪兽0110

最新推荐文章于 2023-03-20 19:20:25 发布

阅读量843

点赞数

分类专栏： javaScript 文章标签：表单验证

本文链接：https://blog.csdn.net/hyf1712011164/article/details/103419196

版权

javaScript 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<script>
		
		function checkForm(){
			var flag = true;
			
			//1.获取用户名和密码里面输入的内容
			var usernameValue=document.getElementById("username").value;
			var passwordValue=document.getElementById("password").value;
			
			//alert(usernameValue+"---"+passwordValue);
			
			//2.校验数据
			if(usernameValue == null || usernameValue== ""){
				//若为空 在span中添加错误信息
				//a.获取span
				var username_msgObj=document.getElementById("username_msg");
				
				//b.设置错误信息
				//username_msgObj.innerHTML="用户名不能为空";
				username_msgObj.innerHTML="<font color='red'>用户名不能为空</font>";
				//将flag置为false;
				flag=false;
			}else{
				//a.获取span
				var username_msgObj=document.getElementById("username_msg");
				
				//b.设置错误信息
				username_msgObj.innerHTML="";
			}
			
			//3.校验密码
			if(passwordValue == null || passwordValue== ""){
				//若为空 在span中添加错误信息
				//a.获取span
				var password_msgObj=document.getElementById("password_msg");
				
				//b.设置错误信息
				password_msgObj.innerHTML="密码不能为空";
				password_msgObj.style.color="red";
				
				//将flag置为false;
				flag=false;
			}
			
			return flag;
		}
		
		//方式1:
		/*function loseFocus(){
			//1.获取input标签内容
			var usernameValue=document.getElementById("username").value;
			
			//2,判断值 若不满足 给相应的span设置内容
			if(usernameValue==""){
				document.getElementById("username_msg").innerHTML="用户名不能为空";
			}else{
				document.getElementById("username_msg").innerHTML="";
			}
		}*/
		
		
		/*function loseFocus(obj){
			alert(obj.value);
		}*/
		
		function loseFocus(obj){
			alert(obj);
		}
		
		
	</script>
	<body>
		<form action="#" method="get" onsubmit="return checkForm()">
			<table width="60%" height="60%"  align="center" bgcolor="#ffffff">
				<tr>
					<td colspan="3">会员注册USER REGISTER</td>
				</tr>
				<tr>
					<td width="20%">用户名:</td>
					<td width="40%"><input type="text" name="username" id="username" onblur="loseFocus(this.value)"></td>
					<td width="40%"><span id="username_msg"></span></td>
				</tr>
				<tr>
					<td>密码:</td>
					<td><input type="password" name="password" id="password"></td>
					<td><span id="password_msg"></span></td>
				</tr>
				<tr>
					<td>确认密码:</td>
					<td><input type="password" name="repassword" id="repassword"></td>
					<td><span id="repassword_msg"></span></td>
				</tr>
				<tr>
					<td>Email:</td>
					<td><input type="text" name="email" id="email"></td>
					<td><span id="email_msg"></span></td>
				</tr>
				<tr>
					<td>姓名:</td>
					<td><input type="text" name="name"></td>
				</tr>
				<tr>
					<td>性别:</td>
					<td>
						<input type="radio" name="sex" value="男"> 男
						<input type="radio" name="sex" value="女" />女
					</td>
				</tr>
				<tr>
					<td>出生日期</td>
					<td>
						<input type="text" name="birthday">

					</td>
				</tr>
				<tr>
					<td>验证码</td>
					<td>
						<input type="text" name="checkcode">
					</td>
				</tr>
				<tr>
					<td colspan="2">
						<input type="submit" value="注册" />
					</td>
				</tr>
			</table>
		</form>
	</body>
</html>

大怪兽0110

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
h5表单注册界面

<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> </head> <script> function checkForm(){ var flag = true; /...
复制链接

扫一扫

专栏目录