首页 > 代码库 > 每天一个JavaScript实例-检测表单数据

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

2024-07-30 10:41:26   223人阅读

<!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 = http://www.mamicode.com/"Send Data" />>
每天一个JavaScript实例-检测表单数据


联系
我们