JavaScript之输入框简单验证

发表于 | 分类于

输入框的验证主要是利用了两个属性onfocus(焦点的获得)与onblur(焦点失去)。
输入框里的判断：如要是利用正则表达式来判断的，也就是在输入完即焦点的失去的那一刻进行判断，并进行提醒。
下面的代码只是一个简单的验证：

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
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script>
			
			window.onload=function(){
				
				/*焦点的获得与失去*/
				var name=document.getElementById('name');
				name.onfocus=function(){
					/*焦点的获得*/
					name.style.width="600px";
				}
				name.onblur=function(){
					/*焦点的失去*/
					name.style.width="400px";
				}
				
				
				/*表单的验证*/
				var score=document.getElementById("score");
				
				var prompt=document.getElementById("prompt");
				
				score.onfocus=function(){
					
				}
				
				score.onblur=function(){
					
					var value=parseFloat(score.value);
					
					if(isNaN(value)){
						prompt.innerHTML="输入的成绩不正确";
						prompt.className="error";
						score.style.border="1px solid red";
					}
					else{
						prompt.innerHTML="输入成绩正确";
						prompt.className="right";
						score.style.border="1px solid green";
					}
				}
				
			}
		</script>
		<style>
			#prompt{
				font-size:14px;
				color:#CCCCCC;
			}
			#score{
				border:1px solid green;
			}
			.right{
				background:#008000;
				background-size:15px 15px;
				padding-left:10px;
				color:lightgreen !important;
			}
			.error{
				background:orangered;
				background-size:15px 15px;
				padding-left:10px;
				color:indianred !important;
			}
		</style>
	</head>
	<body>
		<input id="name" type="text" placeholder="请输入" name="wenben"/>
		<div id="box">
			<label>请输入您的成绩</label>
			<input type="text" id="score" placeholder="请输入您的成绩" value="" style="text-align: center;"/>
			<span id="prompt" class="">请输入您的成绩</span>
		</div>
	</body>
</html>

Fork me on GitHub