4_14.DOM--Form表单验证

最新推荐文章于 2023-02-09 09:19:52 发布

ATWLee

最新推荐文章于 2023-02-09 09:19:52 发布

阅读量214

点赞数 1

分类专栏： Vue基础学习

本文链接：https://blog.csdn.net/BWater_monster/article/details/101694870

版权

Vue基础学习专栏收录该内容

57 篇文章 0 订阅

订阅专栏

//js
//1.构建DOMTree
//2.查找触发事件的元素：input
var input=document.querySelectorAll("#form input");
//3.绑定事件
for(var i=0;i<input.length;i++){
	//功能1：获取焦点事件
	input[i].onfocus=function(){
		//查找相对应的提示信息并显示
		var proi=this.nextElementSibling.nextElementSibling.children[0];
		proi.className="show";
	}
	//功能2：失去焦点事件
	input[i].onblur=function(){
		var proi=this.nextElementSibling.nextElementSibling.children[0];
		//判断格式是否正确
		if(this==this.parentElement.username){
			var reg=new RegExp(/^\w{5,10}$/,"ig");
			if(reg.test(this.value)){
				proi.className="true";
			}else {proi.className="false";}
		}else if(this==this.parentElement.password){
			var reg=new RegExp(/^\d{6}$/,"ig");
			if(reg.test(this.value)){
				proi.className="true";
			}else {proi.className="false";}
		}
	}
}

//html
<body>
	<h2>添加管理员</h2>
	<form action="" id="form">
		<label for="username">姓名：</label>
		<input type="text" id="username" name="username">
		<span>*</span>
		<label><div>5~10之内的字母、数字和下划线</div></label>
		<br><br>
		<label for="password">密码：</label>
		<input type="password" id="password" name="password">
		<span>*</span>
		<label><div>6位数字</div></label>
		<br><br>
		<button type="button" id="save">保存</button>
		<button type="reset">重置</button>
	</form>
	<script src=./k.js></script>
</body>

//css
span{color:red;}
label div{display: none;}/*默认状态*/
.show{display: inline-block;}/*获取焦点时的状态*/
.true{/*失去焦点时的正确状态*/
	display: inline-block;
	background: url(1.png)no-repeat;
	background-size: contain;
	padding-left: 25px;
	/*正确时，把后边的文本隐藏*/
	width: 0px;
	height: 15px;
	overflow: hidden;
	}
.false{/*失去焦点时的错误状态*/
	display: inline-block;
	color:red;
	background: url(2.png) no-repeat;
	background-size: contain;
	padding-left: 25px;
	}

优化：

采用table表格，并且采用函数调用

//功能1：获取焦点，提示信息改变
//1.构建DOMTree
//2.查找触发事件的元素：input
var form=document.forms[0];
var textUsername=form.username;
var textPassword=form.password;
var save=form.save;
var usernamereg=/^\w{5,10}$/;
var passwordreg=/^\d{6}$/;

//3.绑定事件
textUsername.onfocus=proI;
textPassword.onfocus=proI;
function proI(){
	this.parentElement.nextElementSibling.children[0].className="show";
}

//功能2：失去焦点，判断格式是否正确
textUsername.onblur=function(){
//需要传参数，所以要function(){isProI()}。用这种方法，this就不是this了，需要再传个参数过渡一下。
	isProI(this,usernamereg);
}
textPassword.onblur=function(){
	isProI(this,passwordreg);
}
function isProI(input,reg){
	var proIstyle=input.parentElement.nextElementSibling.children[0];
	//获得输入的字符串
	var instr=input.value;
	//判断格式是否正确
	if(reg.test(instr)){
		proIstyle.className="true";
		return true;
	}else{
		proIstyle.className="false";
		return false;
	}
}

//功能3：确认
save.onclick=function(){
	var isUsername=isProI(textUsername,usernamereg);
	var isPassword=isProI(textPassword,passwordreg);
	if(isUsername&&isPassword){
		form.submit();
	}
}

<h2>添加管理员</h2>
	<form action="">
		<table>
			<tr>
				<td><label for="username">姓名：</label></td>
				<td><input type="text" name="username" id="username"><span>*</span></td>
				<td><div class="hide">5-10</div></td>
			</tr>
			<tr>
				<td><label for="password">密码：</label></td>
				<td><input type="password" name="password" id="password"><span>*</span></td>
				<td><div class="hide">6</div></td>
			</tr>
			<tr>
				<td></td>
				<td><input type="button" id="save" value="保存">&nbsp;<button type="reset">重置</button></td>
				<td></td>
			</tr>
		</table>
	</form>