一个检测表单数据的JavaScript实例

2024-05-06 16:10:18

字体：大中小

来源：转载

供稿：网友

这篇文章主要介绍了一个检测表单数据的JavaScript实例，很简单，很实用，比较适合初学者

一个检测表单数据的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>