-/FormValidation.html at master · RichardTime/- · GitHub

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
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			*{margin: 0;	padding: 0;}
			form span{color: #333; padding:0 15px;}
			#name{ border-radius: 3px;}
			form input[type=button]{border: none; background: #38ba72;color: #fff;padding: 2px 5px;}
			.wrap{height: 32px; line-height: 32px;margin: 30px auto; width: 480px; text-align: center;}
			#info{font-size: 14px; color: #999;text-align: left;padding-left: 120px;}
			.red{border-color: red;}
			.yellow{border-color:firebrick;}
			.green{border-color: #38ba72;}
		</style>
	</head>
	<body>
		<form action="#" method="post">
	<div class="wrap"><label for="name"><span>名称</span><input type="text" name="name" id="name" /></label>
		<input type="button" id="validation1" value="验证" />
		<p id="info">必填，长度为4-16个字符</p>
	</div>

		</form>
		<script type="text/javascript">
			function $(id){
				return document.getElementById(id);
			}
			var info=$('info');
			var name=$('name');
//			console.log(name)
			function validation(){
				var value=$('name').value;
				value=value.trim();//去掉所有空格
				var newValue=value.replace(/[\u4e00-\u9fa5]/g,"aa");//将所有的中文
				var len=newValue.length;

				if(len==0){
					info.innerHTML="不能输入空字符串";
					info.style.color="red";
					document.getElementById('name').removeAttribute("class");
					document.getElementById('name').setAttribute("class","red");
					return;
				}else if(len<4||len>16){
					info.innerHTML="请输入4-16位字符";
					info.style.color="firebrick";
					document.getElementById('name').removeAttribute("class");
					document.getElementById('name').setAttribute("class","yellow");
					return;
				}else{
					info.innerHTML="验证通过";
					info.style.color="#38ba72";
					document.getElementById('name').removeAttribute("class");
					document.getElementById('name').setAttribute("class","green");
				}

			}


			$('validation1').addEventListener('click',validation,false);


		</script>
	</body>
</html>