Dom操作登录判断代码

曲一一线

已于 2023-04-04 00:09:20 修改

阅读量104

点赞数

文章标签： javascript

于 2023-03-29 11:07:35 首次发布

本文链接：https://blog.csdn.net/weixin_56707341/article/details/129832760

版权

<html>

	<head>
		<mata charset="UTF-8">
		<title>Form Validation</title>
		<script type="text/javascript">
		</script>
	</head>

	<body>
		<form action="/cgi-bin/test.cgi" name="myForm" onsubmit="return(validate());">
			<table cellspacing="2" cellpadding="2" border="1">
				<tr>
					<td align="right">Name</td>
					<td><input type="text" name="Name" /></td>
				</tr>
				<tr>
					<td align="right">EMail</td>
					<td><input type="text" name="EMail" /></td>
				</tr>
				<tr>
					<td align="right">Zip Code</td>
					<td><input type="text" name="Zip" /></td>
				</tr>
				<tr>
					<td align="right">Country</td>
					<td>
						<select name="Country">
							<option value="-1" selected>[choose yours]</option>
							<option value="1">USA</option>
							<option value="2">UK</option>
							<option value="3">INDIA</option>
						</select>
					</td>
				</tr>
				<tr>
					<td align="right"></td>
					<td><input type="submit" value="Submit" name="submit1"/></td>
				</tr>
			</table>
		</form>
	</body>
	<script type="text/javascript" src="js/script2.js">

	</script>
</html>

提交判断

(()=>{
	let flag=true;
	let sub=document.getElementsByName("submit1")[0];
	let name=document.getElementsByName("Name")[0];
	let email=document.getElementsByName("EMail")[0];
	let zip=document.getElementsByName("Zip")[0];
	let country=document.getElementsByName("Country")[0];
	sub.addEventListener("click",function(){
		if(name.value==="")
		{
			flag=false;
			alert("name不能为空");
		}
		if(email.value==="")
		{
			flag=false;
			alert("email不能为空");
		}
		else{
			let emailID = email.value;
		  	atpos = emailID.indexOf("@");
		  	dotpos = emailID.lastIndexOf(".");
		  	if (atpos < 1 || ( dotpos - atpos < 2 )) 
			{
				flag=false;
				alert("EMail不合法");
			}
		}
		if(zip.value==="")
		{
			flag=false;
			alert("zip不能为空");
		}
		else{
			if( document.myForm.Zip.value == "" ||
		   	isNaN( document.myForm.Zip.value ) ||
		   	document.myForm.Zip.value.length != 5 )
			{
				flag=false;
				alert("密码不合法");
			}
		}
		if(country.value==='-1')
		{
			flag=false;
			alert("country不能为空");
		}
	},false);
	return flag;
})()

实时判断

(()=>{
	let text1=document.createTextNode("Please enter something");
	let text2=document.createTextNode("Please enter something");
	let text3=document.createTextNode("Please enter something");
	let text4=document.createTextNode("Please enter something");
	let sub=document.getElementsByName("submit1")[0];
	let name=document.getElementsByName("Name")[0];
	let email=document.getElementsByName("EMail")[0];
	let zip=document.getElementsByName("Zip")[0];
	let country=document.getElementsByName("Country")[0];
	name.addEventListener("blur",function(){
		if(name.value==='')name.parentNode.appendChild(text1);
		else name.parentNode.removeChild(name.nextSibling);
	},false);
	email.addEventListener("blur",function(){
		if(email.value==='')email.parentNode.appendChild(text2);
		else{
			let emailID = email.value;
		  	atpos = emailID.indexOf("@");
		  	dotpos = emailID.lastIndexOf(".");
		  	if (atpos < 1 || ( dotpos - atpos < 2 )) alert("EMail不合法");
			email.parentNode.removeChild(email.nextSibling);
		}
	},false);
	zip.addEventListener("blur",function(){
		if(zip.value==='')zip.parentNode.appendChild(text3);
		else{
			if( document.myForm.Zip.value == "" ||
           	isNaN( document.myForm.Zip.value ) ||
           	document.myForm.Zip.value.length != 5 )
   			alert("密码不合法");
			zip.parentNode.removeChild(zip.nextSibling);
		}
	},false);
	country.addEventListener("blur",function(){
		if(country.value==='-1')country.parentNode.appendChild(text4);
		country.parentNode.removeChild(country.nextSibling);
	},false);
})()