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

Posted 2020-10-01 zhchoutai

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了每天一个JavaScript实例-检測表单数据相关的知识，希望对你有一定的参考价值。

<!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>

以上是关于每天一个JavaScript实例-检測表单数据的主要内容，如果未能解决你的问题，请参考以下文章

每天一个JavaScript实例-展示设置和获取CSS样式设置

ajax+FormData+javascript实现无刷新表单信息提交

javascript用正則表達式检測username的合法性

Unity3D游戏开发之简单的碰撞检測

实例介绍Cocos2d-x中Box2D物理引擎：碰撞检測

Cocos2d-x3.0游戏实例之《别救我》第七篇——物理世界的碰撞检測