JS的小例子

最新推荐文章于 2022-02-13 17:52:46 发布

eke_

最新推荐文章于 2022-02-13 17:52:46 发布

阅读量173

点赞数

文章标签： javascript js dom

本文链接：https://blog.youkuaiyun.com/Xue_fabulous/article/details/114265680

版权

在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>表单验证</title>
	</head>
	<body>
		<script type="text/javascript">
			window.onload = function(){
				var flag1 =false;
				var flag2 =false;
				//用户名
				document.getElementById("usernameid").onblur = function(){
					var username = document.getElementById("usernameid").value;
					var regExp = /^[0-9a-zA-Z]{6,14}$/
					var ok = regExp.test(username);
					var reminder = document.getElementById("usernamereminder");
					if(!ok){
						reminder.innerHTML="<font color='red' size='1px'>用户名非法</font>";
						flag1 = false;
					}else{
						reminder.innerHTML="<font color='red' size='1px'>用户名合法</font>";
						flag1=true;
					}
				}
				document.getElementById("usernameid").onfocus = function(){
					document.getElementById("usernamereminder").innerHTML="<font color='black' size='1px'>用户名由6-14位的数字和字母组成</font>";
				}
				//确认密码
				document.getElementById("passwordconfirmid").onblur = function(){
					var pwd1 = document.getElementById("passwordid").value;
					var pwd2 = document.getElementById("passwordconfirmid").value;
					if(pwd1 == pwd2){
						document.getElementById("passwordreminder").innerHTML="<font color='red' size ='1px' >确认密码和密码一致</font>"
						flag2=true;
					}else{
						document.getElementById("passwordreminder").innerHTML="<font color='red' size ='1px' >确认密码和密码不一致</font>"
						flag2=false;
					}
				}
				
				document.getElementById("button").onclick=function(){
					if(flag1 & flag2){
						document.getElementById("form").action="https://www.baidu.com";
					}else{
						document.getElementById("form").action="javascript:void(0)";
					}
				}
	
			}
		</script>
		<form action="" method="get" id="form">
			用户名<input type="text" name="username" id="usernameid" value="" />
			<span id="usernamereminder"></span><br>
			密码<input type="password" name="password" id="passwordid" value="" /><br>
			确认密码<input type="password" name="" id="passwordconfirmid" value="" />
			<span id="passwordreminder"></span><br>
			<input type="submit" name="" id="button" value="提交" />
		</form>
	</body>
</html>