【Summary】——>Web组·Week7

来源：互联网发布：mba智库网络不可用编辑：程序博客网时间：2024/05/17 05:14

2017年5月21日，在web组的第七周正式结束，这周的主要内容是继续学习JS，这周完成的是对表单的验证和用不同方法（css，js）实现了下拉菜单的效果，主要内容有正则表达式，if..else语句，部分方法调用，标签ul，li的嵌套和对hover的指定关系，以及简单函数编写。

要点：

1.选取元素：可以通过标签名选取标签元素（数组形式），然后根据标签的出现顺序与数组索引的对应关系将数组元素（所有相同的标签元素）与每个标签对应起来；

2.编写表单验证，可通过注释方式先整理用户填写情况下需要满足哪些条件，并对不满足条件的输入给出相应提示。清晰的思路会使得整个编程过程清晰明了，很大程度上提高了编程的效率；

3.使标签内容出现的方式:xxx.style.visibility="visible/hidden";xxx.style.display="block";

4.可通过js对css的样式进行更改，需要注意标签的变化，特别是大小写，比如：div.style.marginBottom=0;

5.if...else if..else语句中注意逻辑关系（从小开始，从大开始？）;

6.去掉和添加css（属性、样式），例如： pwd2.removeAttribute("disabled");(消除其不可见属性)； aEm[2].className="active"; aEm[2].className="";

7.通过索引也可以找到输入框中输入内容的某一部分；

8.正则表达式常用方法：exec();test(),toSourse(),toString();

代码：

<body><div class="container"><form method="www.mukewang.com"> <div class="name" id="user"><span>会员名    ：</span><input type="text" class="text"><p class="msg">5-25个字符，一个汉字为两个字符，推荐使用中文会员名</p></div><div><span></span><b id="count">0个字符</b></div><div><span>登录密码：</span><input type="password" class="text"><p class="msg">6-16个字符请使用字母加数字或符号的组合密码，不能单独使用字母、数字或者符号</p></div><div style="margin-left:107px;height: 20px"><span></span><em class="active"> 弱</em><em >中</em><em >强</em></div><div style="margin-bottom: 20px"><span>确认密码：</span><input type="password" class="text" disabled=""><p class="msg">请再输入一次</p></div><div><span>验证邮箱：</span><input type="text" class="text"><p class="msg">请输入有效的E_mail!</p></div><div><br/><input type="submit" class="submitBtn" value="同意协议并注册" style="margin-left:70px;margin-top:5px;"></div></form></div><script type="text/javascript">//函数：function getLength(str){return str.replace(/[^\x00-xff]/g,"xx").length;}function findStr(str,n){var tmp=0;for (var i = 0; i < str.length; i++) {if (str.charAt(i)==n) {//charAt() 方法可返回指定位置的字符tmp++;}}return tmp;}//元素选取：var aInput=document.getElementsByTagName('input');var oName=aInput[0];var pwd=aInput[1];var pwd2=aInput[2];var E=aInput[3];var aP=document.getElementsByTagName('p');var name_msg=aP[0];var pwd_msg=aP[1];var pwd2_msg=aP[2];var E_mag=aP[3];var count=document.getElementById('count');var aEm=document.getElementsByTagName('em');//1.数字，字母（不分大小写），汉字，下划线//2.5-25字符，推荐使用中文会员名//Js用Unicode编码//用户名*********************************************************oName.onfocus=function(){name_msg.style.display="block";name_msg.innerHTML='5-25个字符，一个汉字为两个字符，推荐使用中文会员名';}oName.onkeyup=function(){count.style.visibility="visible";count.style.display="block";var div=document.getElementById("user");div.style.marginBottom=0;//未实现？？？？？？？？？？？？？？？？？？？？？name_length=getLength(this.value);count.innerHTML=name_length+"个字符";if(name_length==0)count.style.visibility="hidden";}oName.onblur=function(){//含有非法字符var re=/[^\w\u4e00-\u9fa5]/g;if(re.test(this.value)){name_msg.innerHTML='含有非法字符!';}//不能为空else if (name_length==0) {name_msg.innerHTML='不能为空!';}//长度超过25个字符else if(name_length>25){name_msg.innerHTML='长度超过25个字符!';}//长度少于6个字符else if(name_length<6 && name_length>0){name_msg.innerHTML='长度少于6个字符!';}//okelse{name_msg.innerHTML='OK';}}//密码*********************************************************pwd.onfocus=function(){pwd_msg.style.display="block";pwd_msg.innerHTML='6-16个字符,请使用字母加数字或符号的组合密码，不能单独使用字母、数字或者字符';}pwd.onkeyup=function(){//大于5字符“中”if(this.value.length>5){aEm[1].className="active";pwd2_msg.style.display="block";pwd2.removeAttribute("disabled");}else{aEm[1].className="";pwd2.setAttribute("disabled");//未实现？？？？？？？？？？？？？？？pwd2_msg.style.display="none";}//大于10个字符“强”if(this.value.length>10){aEm[2].className="active";}elseaEm[2].className="";}pwd.onblur=function(){var m=findStr(pwd.value,pwd.value[0]);var re_n=/[^\d]/g;var re_t=/[^a-zA-Z]/g;//不能为空if(this.value==""){pwd_msg.innerHTML='不能为空';}//不能用相同字符else if(m==this.value.length){pwd_msg.innerHTML='不能用相同字符';}//长度应为6-12字符else if(this.value.length<6 || this.value.length>16)pwd_msg.innerHTML='长度应为6-12字符';//不能全为数字else if(!re_n.test(this.value)){pwd_msg.innerHTML='不能全为数字';}//不能全为字母else if(!re_t.test(this.value)){pwd_msg.innerHTML='不能全为字母';}//OKelse{pwd_msg.innerHTML='OK';}}//确认密码(验证两次输入的密码是否一样)pwd2.onblur=function(){if (this.value!=pwd.value) pwd2_msg.innerHTML='两次输入的密码不一样';elsepwd2_msg.innerHTML='OK';}//验证邮箱**************************************************************E.onblur=function(){var reg=/^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+/;if (!reg.test(E.value)) {E_mag.style.display="block";}else if (E.value=="") {E_mag.innerHTML='不能为空';}elseE_mag.innerHTML='OK';}</script></body>

9.存在问题:部分语句效果未实现。。。正则表达式还需要加强理解。

阅读全文

0 0