个人中心
gpt4 book ai didi

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

转载 作者：qq735679552 更新时间：2022-09-27 22:32:09 24 4
gpt4 key购买 nike

CFSDN坚持开源创造价值，我们致力于搭建一个资源共享平台，让每一个IT人在这里找到属于你的精彩世界.

这篇CFSDN的博客文章一个检测表单数据的JavaScript实例由作者收集整理，如果你对这篇文章有兴趣，记得点赞哟.

一个检测表单数据的JavaScript实例，很简单，很实用，感兴趣的朋友可以看看 。

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
<!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实例的内容请搜索CFSDN的文章或继续浏览相关文章，希望大家以后支持我的博客！ 。

24 4 0
文章推荐： JS获取浏览器语言动态加载JS文件示例代码
文章推荐： java 多态性详解及简单实例
文章推荐： Go语言基于Socket编写服务器端与客户端通信的实例
文章推荐： JS 打印功能代码可实现打印预览、打印设置等
qq735679552
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com