JavaScript 学习笔记（八）.innerHTML、onblur="……"、密码强度

<script>
function check() {
	var email = document.myform.email.value;
	var at = email.indexOf("@");
	var dot = email.indexOf(".");
	
	if(at==-1||dot==-1) {
		alert("电子邮件格式错误（1）");
		return false;
	}
	
	if(at>dot) {
		alert("电子邮件格式错误（2）");
		return false;
	}
	
	var phone = document.myform.phone.value;
	
	if(isNaN(phone)) {
		alert("电话号码必须是数字");
		return false;
	}
	
	if(phone.length!=11) {
		alert("电话号码必须是11位");
		return false;
	}
	
	if(phone.charAt(0)!='1') {
		alert("电话号码第一位必须是1");
		return false;
	}
	
	return true;
}

function checkEmail() {
	var email = document.myform.email.value;
	var obj = document.getElementById("emailDiv");
	var at = email.indexOf("@");
	var dot = email.indexOf(".");
	
	if(at==-1||dot==-1) {
		obj.innerHTML = "<span style='color:red'>电子邮件格式错误，没有特定的@和.符号</span>";
	}else if(at>dot) {
		obj.innerHTML = "<span style='color:blue'>电子邮件格式错误</span>";
	}else {
		obj.innerHTML = "<img src='image/image001.gif' />";
	}
}
</script>

<form name="myform" method="post" οnsubmit="return check()">
<div>
<table width="550px" border="1" cellspacing="0" cellpadding="0">
	<tr>
		<td>电子邮件</td>
		<td><input type="text" name="email" οnblur="checkEmail()" /></td>
		<td><div id="emailDiv">电子邮件地址必须含有@和.，且.在@之后</div></td>
	</tr>
	<tr>
		<td>手机号码</td>
		<td><input type="text" name="phone" /></td>
	</tr>
	<tr>
		<td colspan="2"><input type="submit" value="提交" /></td>
	</tr>
</table>
</div>
</form>

END

<script>
function checkPwd() {
	var pwd = document.myform.password.value;
	var obj = document.getElementById("pwdDiv");
	var charnum = 0;
	var dnum = 0;
	var snum = 0;
	
	if(pwd.length<6) {
		obj.innerHTML = "<span style='color:red;'>密码长度不能少于6位</span>";
	}else {
		for(var i=0;i<pwd.length;i++) {
			var c = pwd.charAt(i);
			if(c<='z'&&c>='a') {
				charnum++;
			}else if(c<='9'&&c>='0') {
				dnum++;
			}else {
				snum++;
			}
		}
		if(charnum==0) {
			if(dnum==0) {
				obj.innerHTML = "<span style='color:red;'>弱</span>";
			}else if(snum==0) {
				obj.innerHTML = "<span style='color:red;'>弱</span>";
			}else {
				obj.innerHTML = "<span style='color:red;'>中</span>";
			}
		}else if(dnum==0) {
			if(snum==0) {
				obj.innerHTML = "<span style='color:red;'>弱</span>";
			}else {
				obj.innerHTML = "<span style='color:red;'>中</span>";
			}
		}else if(snum==0) {
			obj.innerHTML = "<span style='color:red;'>中</span>";
		}else {
			obj.innerHTML = "<span style='color:red;'>强</span>";
		}
	}
}
</script>

<table>
	<tr>
		<td>密  码：</td>
		<td><input type="password" name="password" οnblur="checkPwd()" /></td>
		<td><div id="pwdDiv">请输入密码</div></td>
	</tr>
	<tr>
		<td colspan="2"><input type="submit" value="提交" /></td>
	</tr>
</table>