每天一个JavaScript实例-检測表单数据
2024-08-31 14:23:15
<!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>
最新文章
- HDU1426 DFS
- SQL Server 内置函数、临时对象、流程控制
- VMware Fusion 中如何复制centos/linux虚拟机
- javascript 技巧
- CentOS + Nginx + PHP-FPM(FastCGI) 配置CodeIgniter
- C#裁剪照片并保存
- HDU 3448 Bag Problem
- Android之所有API汇总
- 开发设计模式(三)策略模式(Strategy Pattern)
- HTML基础知识笔记(一)
- Flex 自定义事件
- CodeForces 398B 概率DP 记忆化搜索
- 使用Fiddler伪造服务端返回数据,绕过软件试用期验证
- SDN理解:云数据中心底层网络架构
- ISP和IAP
- thinkphp导出csv格式的表格
- express中遇到的一个小问题“403”
- 比较两个list对象是否相同
- VirtualBox通过Host-Only网络连接方式实现宿主机与虚拟机通信
- Ocelot:API网关概要
热门文章
- 泛型T和Object 区别?
- PatentTips - Method and Apparatus to Support Virtualization with Code Patches
- CSS笔记 - fgm练习 2-9 - 播放列表收缩展开
- JS学习笔记 - 面向对象 - 选项卡 (普通选项卡改写)
- 【】minimum
- [Web Security] Create a hash salt password which can stored in DB
- Apache的.htaccess项目根文件夹伪静态设置规则
- C++——多态性实现机制
- UVA 10047 - The Monocycle BFS
- HDU 1405 The Last Practice 数学水题