一个检测表单数据的JavaScript实例
一个检测表单数据的JavaScript实例，很简单，很实用，感兴趣的朋友可以看看
<!DOCTYPEhtml>
<html>
<head>
<metahttp-equiv="Content-Type"content="text/html;charset=UTF-8"/>
<title>每天一个JavaScript实例-检测表单数据</title>
<style>
[role="alert"]{
background-color:#fcc;
font-weight:bold;
padding:5px;
border:1pxdashed#000;
}
div{
margin:10px0;
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;
}
functionvalidateField(){
removeAlert();
if(!isNaN(parseFloat(this.value))){
resetField(this);
}else{
badField(this);
generateAlert("YouenteredaninvalidvalueinThirdField.onlynumericvaluessuchas105or3.45areallowed");
}
}
functionremoveAlert(){
varmsg=document.getElementById("msg");
if(msg){
document.body.removeChild(msg);
}
}
functionresetField(elem){
elem.parentNode.setAttribute("style","background-color:#fff");
varvalid=elem.getAttribute("aria-invalid");
if(valid)elem.removeAttribute("aria-invalid");
}
functionbadField(elem){
elem.parentNode.setAttribute("style","background-color#fee");
elem.setAttribute("aria-invalid","true");
}
functiongenerateAlert(txt){
vartxtNd=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);
}
functionmandatoryField(){
removeAlert();
if(this.value.length>0){
resetField(this);
}else{
badField(this);
generateAlert("YoumustenteravalueintoFirstField");
}
}
functionfinalCheck(){
//console.log("aaa");
removeAlert();
varfields=document.querySelectorAll('input[aria-invalid="true"]');
//varfields=document.querySelectorAll("input[aria-invalid='true']");//错误！！！
console.log(fields);
if(fields.length>0){
generateAlert("Youhaveincorrectfieldsentriesthatmustbefixedbeforeyoucansubmitthisform");
returnfalse;
}
}
</script>
</head>
<body>
<formid="testform">
<div>
<labelfor="firstfield">*firstField:</label><br/>
<inputid="firstfield"name="firstfield"type="text"aria-required="true"/>
</div>
<div>
<labelfor="secondfield">SecondField:</label><br/>
<inputid="secondfield"name="secondfield"type="text"/>
</div>
<div>
<labelfor="thirdfield">ThirdField(numeric):</label><br/>
<inputid="thirdfield"name="thirdfield"type="text"/>
</div>
<div>
<labelfor="fourthfield">FourthField:</label><br/>
<inputid="fourthfield"name="fourthfield"type="text"/>
</div>
<inputtype="submit"value="SendData"/>
</form>
</body>
</html>