Javascript--表单验证

今天学习了JavaScript实现本地表单验证，也借这个例子开始学习了一下JavaScript，代码及笔记如下：  1 <script>
  2 /**
  3  * 1.抓取元素
  4  * 2.指定规则：正则表达式--原理：通配符匹配技术
  5  */
  6  //当页面加载时调用脚本：window.onload
  7 window.onload=function(){
  8     /*抓取所有input标签*/
  9     var aInput=document.getElementsByTagName(‘input‘);
 10     var oName=aInput[0];
 11     var pwd=aInput[1];
 12     var pwd2=aInput[2];
 13     //抓取P标签
 14     var aP=document.getElementsByTagName(‘p‘);
 15     var name_msg=aP[0];
 16     var pwd_msg=aP[1];
 17     var pwd2_msg=aP[2];
 18     //使用ID直接抓取b元素：<b id="count">0个字符</b>
 19     var count=document.getElementById("count");
 20     //抓取所有em标签
 21     var aEM=document.getElementByTagName("em");
 22     //定义全局变量--字符长度
 23     var name_length=0;
 24     var re_n=/[^\d]/g ;//正则--非数字
 25     var re_v=/[^a-zA-Z]/g ;//正则--非字母
 26         /*
 27     *表单用户名要求：
 28     *1.数字、字母（不区分大小写）、汉字、下划线
 29     *2.5—25个字符，推荐使用中文会员名
 30     *定义用户名交互设计方法：输入聚焦状态、非聚焦模糊状态、输入完毕状态
 31     */
 32     //输入foucus状态
 33     oName.onfoucus=function()
 34     {
 35         //输入状态下，右侧提示以块状显示
 36         name_msg.style.display="block";
 37         //使用innerHTML写入HTML代码
 38         name_msg.innerHTML=‘<i class"ati"></i>5-25个字符，一个汉字为两个字符，推荐使用中文会员名。‘;
 39     }
 40
 41         //输入完毕状态：onkeyup
 42     oName.onkeyup=function()
 43     {
 44         //改变count.显示提示输入了多少字符
 45         count.style.visibility="visible";
 46         //调用getLength计算输入长度
 47         name_length=getLength(this.value);
 48         //当字符长度为0为时候，将count隐藏
 49         if(name_length==0)
 50         {
 51             count.style.visibility="hidden";
 52         }
 53
 54     }
 55
 56         //非聚焦模糊状态：blur(鼠标没在输入框内了)，进行判断
 57     oName.onblur=function()
 58     {
 59         //定义非法字符:只能为数字，字母，汉字，其他都为非法字符串
 60         var re=/[\w\ue400-\u9fa5] /g  ;
 61         //含有非法字符
 62         if(re.test(this.value))
 63         {
 64             name_msg.innerHTML=‘<i class="err"></i>含有非法字符串‘;
 65         }
 66         //不能为空
 67         else if(re.test(this.value==""))
 68         {
 69             name_msg.innerHTML=‘<i class="err"></i>不能为空‘;
 70         }
 71         //长度超过25个字符
 72         else if(name_length>25)
 73         {
 74             name_msg.innerHTML=‘<i class="err"></i>长度超过25个字符‘;
 75         }
 76         //长度少于6个字符
 77         else if(name_length<6)
 78         {
 79             name_msg.innerHTML=‘<i class="err"></i>长度少于6个字符‘;
 80         }
 81         //OK
 82         else(re.test(this.value))
 83         {
 84             name_msg.innerHTML=‘<i class="ok"></i>OK!‘;
 85         }
 86     }
 87
 88     //计算输入的字符长度
 89     function getLength(str)
 90     {
 91         //使用字符串中的replace()方法将非单字符替换为xx字符串,使用lengh统计长度
 92         return str.replace(/[^\x00-\xff]/g ,"xx").length;
 93     }
 94
 95     /*
 96     *表单验证密码pwd验证要求：
 97     *1.使用数字加字母或符号的组合密码
 98     *2.不能单独使用字母、数组或符号
 99     *3.6-16个字符
100     *方法：onkeyup();onblur();onfocus()
101     */
102     pwd.onfocus = function()
103     {
104         pwd_msg.style.display="block";
105         pwd_msg.innerHTML=‘<i class="ati"></i>6-16个字符，请是用字母加数字或符号的组合密码，不能单独使用字母、数字或符号。‘;
106     }
107
108     pwd.onkeyup = function()
109     {
110         //定义字符强度：大于5个字符为中，大于10个为强
111             //字符强度为中
112         if(this.value.length>5)
113         {
114             aEm[1].className="active";//当密码强度为中时，中字变色，使用active样式
115             pwd2.removeAttribute("disable");//将pwd2处禁用的disable属性去掉
116             pwd2_msg.style.display="block";//pwd2右侧的提示语出现
117         }
118         else                    //当字符长度<5的时候变回弱，且确认密码不可用
119         {
120             aEm[1].className="";//不是用active样式
121             pwd2.setAttribute("disable");//禁用pwd2输入
122             pwd2_msg.style.display="none";
123         }
124             //字符强度为强
125         if(this.value.length>=10)
126         {
127             aEm[2].className="active";//只需要将强字的颜色改变就可以了，因为当字符长度大于5的时候：pwd2已经可以使用，中字已经可以变色了
128         }
129         else
130         {
131             aEm[2].className="";
132         }
133
134     }
135
136     pwd.onblur = function()
137     {
138         //定义变量接收调用了fundStr()返回来的值
139         var m=findStr(pwd.value,pwd.value[0]);
140         //不能为空
141         if(this.value=="")
142         {
143             pwd_msg.innerHTML=‘<i class="err"></i>密码不能为空‘;
144         }
145         //不能用连续相同字符作为密码--需要另外自定义一个函数findStr()
146         else if(m==this.value.length)
147         {
148             pwd_msg.innerHTML=‘<i class="err"></i>密码不能为连续相同的字符‘;
149         }
150         //长度为6-16个字符
151         else if(this.value.length<6 || this.value.length>16)
152         {
153             pwd_msg.innerHTML=‘<i class="err“></i>密码的长度应为6-16个字符‘;
154         }
155         //不能全为数字
156         else if(!re_n.test(this.value))
157         {
158             pwd_msg.innerHTML=‘<i class="err"></i>不能全为数字‘;
159             }
160         //不能全为字母
161         else if(!re_v.test(this.value))
162         {
163             pwd_msg.innerHTML=‘<i class="err"></i>不能全为字母‘;
164         }
165         //OK
166         else
167         {
168             pwd_msg.innerHTML=‘<i class="ok"></i>OK!‘;
169         }
170     }
171
172     /*相同字符判断函数，有两个参数：输入的字符串str，要对比的字符n
173      *自定义一个临时变量，初始化为0
174      *然后对字符n赋不同的值，每次赋值完毕后就
175      *遍历str字符串且每一个字符与n字符[输入的字符串的第一个字符]比较
176      *若两字符相同则tmp+1,如果同直接跳出结束循环
177      *最后返回tmp的值和str的长度比较
178      *如果相等则判断密码为连续相同的字符
179      */
180     function findStr(str,n){
181         var tmp=0;
182         var sum=str.length;
183         //循环遍历字符串
184         for(var i=0; i<sum; i++){
185             if(str.charAt(i)==n)
186                 tmp++;
187             else
188                 break;
189         }
190         return tmp;
191     }
192
193     /*
194     *表单确认密码p2wd验证要求：
195     *4.与pwd1相等
196     *方法：onkey();onblur();onfocus()
197     */
198     pwd2.onblur() = function()
199     {
200         if(this.value!=pwd.value)
201         {
202             pwd2_msg.innerHTML=‘<i class="err"></i>两次输入验证不一致，请重新输入‘;
203             this.value="";
204         }else{
205             pwd2_msg.innerHTML=‘<i class="ok"></i>OK!‘;
206         }
207     }
208
209
210 }
211 </script>