每天一个JavaScript实例-检测表单数据

最新推荐文章于 2023-10-10 15:14:55 发布

wxyoo1

最新推荐文章于 2023-10-10 15:14:55 发布

阅读量867

点赞数

分类专栏： JS

本文链接：https://blog.csdn.net/waiting7436/article/details/40653955

版权

JS 专栏收录该内容

40 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>每天一个JavaScript实例-检测表单数据</title>
<style>
	[role="alert"]{
		background-color: #fcc;
		font-weight: bold;
		padding:5px;
		border:1px dashed #000;
	}
	div{
		margin:10px 0;
		padding:5px;
		width:400px;
		background-color: #fff;
	}
</style>

<script>
window.onload = function(){
	document.getElementById("thirdfield").onchange = validateField;
	document.getElementById("firstfield").onblur = mandatoryField;
	document.getElementById("testform").onsubmit = finalCheck;
}
function validateField(){
	removeAlert();
	if(!isNaN(parseFloat(this.value))){
		resetField(this);
	}else{
		badField(this);
		generateAlert("You entered an invalid value in Third Field. only numeric values such as 105 or 3.45 are allowed");
	}
}
function removeAlert(){
	var msg = document.getElementById("msg");
	if(msg){
		document.body.removeChild(msg);
	}
}
function resetField(elem){
	elem.parentNode.setAttribute("style","background-color:#fff");
	var valid = elem.getAttribute("aria-invalid");
	if(valid) elem.removeAttribute("aria-invalid");
}
function badField(elem){
	elem.parentNode.setAttribute("style","background-color#fee");
	elem.setAttribute("aria-invalid","true");
}
function generateAlert(txt){
	var txtNd = document.createTextNode(txt);
	msg = document.createElement("div");
	msg.setAttribute("role","alert");
	msg.setAttribute("id","msg");
	msg.setAttribute("class","alert");

	msg.appendChild(txtNd);
	document.body.appendChild(msg);
}

function mandatoryField(){
	removeAlert();
	if(this.value.length > 0 ){
		resetField(this);
	}else{
		badField(this);
		generateAlert("You must enter a value into First Field");
	}
}
function finalCheck(){
	//console.log("aaa");
	removeAlert();

	var fields =document.querySelectorAll('input[aria-invalid="true"]');
	//var fields =document.querySelectorAll("input[aria-invalid='true']");//错误！！！
	console.log(fields);
	if(fields.length > 0){
		generateAlert("You have incorrect fields entries that must be fixed before you can submit this form");
		return false;
	}
}
</script>

</head>

<body>
<form id = "testform">
	<div>
		<label for="firstfield">*first Field:</label><br />
		<input id="firstfield" name = "firstfield" type = "text" aria-required = "true" />
	</div>

	<div>
		<label for="secondfield">Second Field:</label><br />
		<input id="secondfield" name = "secondfield" type = "text" />
	</div>

	<div>
		<label for="thirdfield">Third Field(numeric):</label><br />
		<input id="thirdfield" name = "thirdfield" type = "text" />
	</div>

	<div>
		<label for="fourthfield">Fourth Field:</label><br />
		<input id="fourthfield" name = "fourthfield" type = "text" />
	</div>

	<input type="submit" value = "Send Data" />
</form>

</body>
</html>