DHTML(Dynamic HTML)--4.表单(form)的校验与提交

最新推荐文章于 2021-05-31 03:32:33 发布

程序小白_龙

最新推荐文章于 2021-05-31 03:32:33 发布

阅读量396

点赞数

分类专栏： ----JavaScript----------- DHTML 文章标签：表单 form dhtml javascript

本文链接：https://blog.csdn.net/Dragon_Dai_2017/article/details/77852612

版权

----JavaScript----------- 同时被 2 个专栏收录

12 篇文章 0 订阅

订阅专栏

DHTML

5 篇文章 0 订阅

订阅专栏

1.当输入格式全部正确时，注册成功

2.只要有一个格式错误，将不能提交表单

代码如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<title>Insert title here</title>
		
		<script type="text/javascript">
			function check(name,errorId,reg,info){
				var oUserNode=document.getElementsByName(name)[0];
				var strName=oUserNode.value;
				
				var oSpanNode=document.getElementById(errorId);
				//用正则表达式校验
			/*	var reg=/^hncu/i; */
				if(reg.test(strName)){
					oSpanNode.innerHTML=(info+"格式正确").fontcolor("green").bold();
					return true;
				}else{
					oSpanNode.innerHTML=(info+"用户名格式错误").fontcolor("red").bold();
					return false;
				}
			}
			
			function checkUser(){
				var reg=/^hncu/;
				return check("user","userspan",reg,"用户名");
			}
			
			function checkPwd(){
				var reg=/\d{6}/;
				return check("pwd","pwdspan",reg,"密码");
			}
			
			function checkPwd2(){
				var strPwd1=document.getElementsByName("pwd")[0].value;
				var strPwd2=document.getElementsByName("pwd2")[0].value;
				var pwdNode=document.getElementById("pwdspan2");
				if(strPwd1==strPwd2){
					pwdNode.innerHTML="两次密码输入一致".fontcolor("green").bold();
					return true;
				}else{
					pwdNode.innerHTML="两次密码输入不一致".fontcolor("red").bold();
					return false;
				}
			}
			
			function checkMail(){
				var reg=/\w+@\w+(\.\w+)+/;
				return check("mail","mailspan",reg,"邮箱地址");
			}
			
			/*
				访问表单组件的两种简便方式:
					1)使用表单组件的id去访问
					2)使用标签名直接当该对象的数据进行访问	document.forms[i]
			*/
			function mySubmit(){
				if(checkUser() && checkPwd() && checkPwd2() && checkMail()){
					regForm.submit();
					//document.forms[0].innerHTML
					alert("注册成功");
				}
			}
			
		</script>
	</head>
	<body οnmοusemοve="show_coords(event);">
		<h1>用户注册</h1>
		<form id="regForm" action="">
			<table>
				<tr> <td>用户名称:</td> <td><input type="text" name="user" οnblur="checkUser();" /></td> 	<td><span id="userspan"></span></td> </tr>
				<tr> <td>用户密码:</td> <td><input type="password" name="pwd" οnblur="checkPwd();" /></td>   <td><span id="pwdspan"></span></td> </tr>
				<tr> <td>确认密码:</td> <td><input type="password" name="pwd2" οnblur="checkPwd2();"/></td>   <td><span id="pwdspan2"></span></td> </tr>
				<tr> <td>邮箱地址:</td> <td><input type="text" name="mail" οnblur="checkMail();" /></td>   	<td><span id="mailspan"></span></td> </tr>
				<tr> <td colspan="3"><input type="button" value="注册" οnclick="mySubmit();"></td>	</tr>
			</table>
		</form>
	</body>
</html>

程序小白_龙

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
DHTML(Dynamic HTML)--4.表单(form)的校验与提交

1.当输入格式全部正确时，注册成功2.只要有一个格式错误，将不能提交表单代码如下: Insert title here function check(name,errorId,reg,info){ var oUserNode=document.getElementsByName(name)[0]; var strNa
复制链接

扫一扫