表单验证

最新推荐文章于 2019-08-08 23:22:11 发布

Gydxjnvfg

最新推荐文章于 2019-08-08 23:22:11 发布

阅读量108

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/qq_45058061/article/details/98891056

版权

前端专栏收录该内容

6 篇文章 0 订阅

订阅专栏

	<script>
		function checkUserid(){
			//1.获取用户输入的ID
			var userid = document.getElementsByName("userid")[0].value;
			//2.获取提示用户错误信息的span标签
			var show1 = document.querySelector("#uidmeg");
			if(userid.length>5 && userid.length<19){
				show1.style.color = "darkgreen";
				show1.innerHTML = "√";
				return true;
			}else{
				show1.style.color = "red";
				show1.innerHTML = "账号长度必须是6~18位！！！";
				return false;
			}
		}
		function checkRepwd(){
			var repwd = document.getElementsByName("repwd")[0].value;
			var pwd = document.getElementsByName("pwd")[0].value;
//				var repwdmeg = document.getElementById("#repwdmeg");getbyId里面不能再用#号
				var repwdmeg = document.getElementById("repwdmeg");
			
			if(repwd==pwd){
				repwdmeg.innerHTML="√";
				repwdmeg.style.color = "green";
				return true;
			}else{
				
				repwdmeg.innerHTML = "您两次输入的密码不一致！！！";
				repwdmeg.style.color = "red";
				return false;
			}
		}
		//调用所有验证方法
		function checkAll(){
			var v1 = checkUserid();
			var v2 = checkRepwd();
			if(v1==true && v2==true){
				return true;
			}else{
				return false;
			}
		}
	</script>
	<body>
	<form onsubmit="return checkAll()">
		<p>
			用户ID:<input type="text" name="userid" onblur="checkUserid()" />
			<span id="uidmeg"></span>
		</p>
		<p>
			密码：<input type="password" name="pwd" />
			<lable id="pwdmeg"></lable>
		</p>
		<p>
			再次输入密码：<input type="password" name="repwd" onblur="checkRepwd()"/>
			<span id="repwdmeg"></span>
		</p>
		<input type="button" value="注册"/>
	</form>
</body>