百度前端学院---耀耀学院---任务1-CSDN博客

 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>