1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="utf-8" />
5 <title>表单验证1</title>
6 <style>
7 #input{
8 border: 1px solid #eee;
9 outline: none;
10 border-radius: 5px;
11 height: 30px;
12 line-height: 30px;
13
14 }
15 #btn{
16 outline: none;
17 border-radius: 5px;
18 border:1px solid #3a9;
19 width: 50px;
20 height:30px;
21 cursor: pointer;
22 text-align: center;
23 }
24 </style>
25 </head>
26 <body>
27 <form>
28 名字：<input type="text" id="input" maxlength="50px" >
29 <input id="btn" value="验证" type="button">
30 <div id="err"></div>
31 </form>
32 </body>
33 <script>
34 var inputs =document.getElementById("input");
35 var err =document.getElementById("err");
36 //检查字符串长度
37 function chack_length(str){
38 var len=0;
39 for(var m=0;m<str.length;m++){
40 var reg = /^[\u4E00-\u9FA5]+$/;
41 if(!reg.test(str)){
42 len=len+1;
43 }else{
44 len=len+2;
45 }
46 }
47 return len;
48 }
49 //
50 function a(v){
51
52 if(v===""){
53 err.innerHTML="内容不能为空";
54 err.style.color="red";
55 inputs.style.borderColor="red";
56 return;
57 }else{
58 var numbers = chack_length(v);
59 if(numbers<4||numbers>16){
60 err.innerHTML="字符长度不在4-16范围内";
61 err.style.color="red";
62 inputs.style.borderColor="red";
63 }else{
64 err.innerHTML="通过验证";
65 err.style.color="#3a9";
66 }
67 }
68 }
69 //点击
70 btn.onclick=function sub(){
71 var values = inputs.value;
72 a(values);
73 };
74
75 </script>
76 </html>
时间： 2024-10-12 07:20:14