【Summary】——>Web组·Week7

最新推荐文章于 2020-04-05 22:01:26 发布

Carohuan

最新推荐文章于 2020-04-05 22:01:26 发布

阅读量452

点赞数

分类专栏： JS 总结

本文链接：https://blog.csdn.net/Carohuan/article/details/72598160

版权

总结同时被 2 个专栏收录

9 篇文章 0 订阅

订阅专栏

2 篇文章 0 订阅

订阅专栏

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.οnfοcus=function(){
		name_msg.style.display="block";
		name_msg.innerHTML='5-25个字符，一个汉字为两个字符，推荐使用中文会员名';
}
oName.οnkeyup=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.οnblur=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个字符!';
			}
		//ok
		else{
			name_msg.innerHTML='OK';
			}
}
//密码*********************************************************
pwd.οnfοcus=function(){
	pwd_msg.style.display="block";
	pwd_msg.innerHTML='6-16个字符,请使用字母加数字或符号的组合密码，不能单独使用字母、数字或者字符';
}
pwd.οnkeyup=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";
		}
	else
		aEm[2].className="";
}
pwd.οnblur=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='不能全为字母';
		}
	//OK
	else{			
		pwd_msg.innerHTML='OK';
		}
	}
	//确认密码(验证两次输入的密码是否一样)
pwd2.οnblur=function(){
	if (this.value!=pwd.value) 
		pwd2_msg.innerHTML='两次输入的密码不一样';
	else
		pwd2_msg.innerHTML='OK';
}
//验证邮箱**************************************************************
E.οnblur=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='不能为空';
	}
	else
		E_mag.innerHTML='OK';

}
</script>
</body>

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

Carohuan

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
【Summary】——>Web组·Week7

2017年5月21日，在web组的第六周正式结束，这周的主要内容是继续学习JS，这周完成的是对表单的验证和用不同方法（css，js）实现了下拉菜单的效果，主要内容有正则表达式，if..else语句，部分方法调用，标签ul，li的嵌套和对hover的指定关系，以及简单函数编写。要点：1.选取元素：可以通过标签名选取标签元素（数组形式），然后根据标签的出现顺序与数组索引的对应关系将数组元素（所
复制链接

扫一扫