每天一个JavaScript实例-检测表单数据
2014-10-31 14:17
671 查看
<!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实例
- 每天一个JavaScript实例-检測表单数据
- 每天一个JavaScript实例-防止重复表单提交
- 每天一个JavaScript实例-防止反复表单提交
- 每天一个JavaScript实例-使用循环和分割来替换和删除元素
- 每天一个JavaScript实例-处理textarea中的字符成每一行
- 每天一个JavaScript实例-展示设置和获取CSS样式设置
- 每天一个JavaScript实例-从一个div元素删除一个段落
- 每天一个JavaScript实例-去除字符串末尾的空白
- javascript实例教程(6) 在一个表单中设置和检查Cookies
- 每天一个JavaScript实例-确定web页面的区域
- 每天一个JavaScript实例-动态省份选择城市
- 每天一个JavaScript实例-提取所有链接并添加到页面末尾列表
- 每天一个JavaScript实例-使用缓存计算(memoization)来提高应用程序性能
- 每天一个JavaScript实例-分割字符串
- 一个用javascript编写的表单提交的例子(包括用正则表达式对数据进行验证)
- 一个JavaScript防止表单重复提交的实例
- 每天一个JavaScript实例-操作元素定位元素
- 每天一个JavaScript实例-判断图片是否加载完成