I saw a small question and used it to practice. I wanted to write the code smarter, but I ran into a trap
Getting the object with name is successful, but put the object into a two-dimensional array, assign the value of the two-dimensional array to a variable, and then the variable becomes a string. How can we use a similar method later to identify objects? ?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表单项检验</title>
</head>
<style>
td{height: 40px;}
.form{
border-radius: 3px;
border:1px solid #ccc;
}
input[type=submit]{float:right;background: #abcdef;border:1px solid #abcdef;height: 30px;width: 50px;}
.info{font-size: 12px;}
</style>
<body>
<form>
<table>
<tr>
<td>名称</td>
<td><input type="text" name="name" class="form"><br/><span class="info"></span></td>
</tr>
<tr>
<td>密码 </td>
<td><input type="text" name="password" class="form"><br/><span class="info"></span></td>
</tr>
<tr>
<td>密码确认</td>
<td><input type="text" name="com_password" class="form"><br/><span class="info"></span></td>
</tr>
<tr>
<td>邮箱 </td>
<td><input type="text" name="email" class="form"><br/><span class="info"></span></td>
</tr>
<tr>
<td>手机</td>
<td><input type="text" name="phone" class="form"><br/><span class="info"></span></td>
</tr>
<tr>
<td></td>
<td><input type="submit" value="提交"><br/><span class="info"></span></td>
</tr>
</table>
</form>
<script>
//获取DOM对象,添加提示
var dom = [];
var spans = document.getElementsByTagName('span');
//alert(document.getElementsByName('name')[0]);
//document.getElementsByName('name')[0].value="11111";
dom[0] = [];
dom[0][0]={};
dom[0][0] = document.getElementsByName('name')[0];
//console.log( document.getElementsByName('name')[0]);
dom[0][1] = spans[0];
dom[0][2] = '必填，长度为4~16个字符';
dom[0][3] = '姓名不能为空';
dom[0][4] = /.{4,11}/; //以下正则写得比较简略
dom[1] = [];
dom[1][0] = document.getElementsByName('password')[0];
dom[1][1] = spans[1];
dom[1][2] = '长度不小于6位';
dom[1][3] = '密码不能为空';
dom[1][4] = /.{6,}/;
dom[2] = [];
dom[2][0] = document.getElementsByName('com_password')[0];
dom[2][1] = spans[2];
dom[2][2] = '请再次输入密码';
dom[2][3] = '密码验证不正确';
dom[2][4] = /.{6,}/;
dom[3] = [];
dom[3][0] = document.getElementsByName('email')[0];
dom[3][1] = spans[3];
dom[3][2] = 'xxx@xxx';
dom[3][3] = '邮箱填写不正确';
dom[3][4] = /^.+\@.+$/;
dom[4] = [];
dom[4][0] = document.getElementsByName('phone')[0];
dom[4][1] = spans[4];
dom[4][2] = '必须为11位的手机号';
dom[4][3] = '手机号码填写错误';
dom[4][4] = /[0-9]{11}/;
//var name = new Array([dom[0]]);
var name = [dom[0]];
console.log(typeof name); //string
console.log(dom[0] === name); //打印 true
console.log(dom[0][0] == document.getElementsByName('name')[0]); //打印 true
console.log(dom[0][0] == name[0]); //打印 false
console.log(name[0] == document.getElementsByName('name')[0]); //打印 false
name[0].onfocus = function(){
name[1].innerHTML = name[2];
name[1].style.color = 'gray';
}
name[0].onblur = function(){
if(name[4].test(this.value)){
this.style.border = '1px solid #ADFF2F';
}else{
this.style.border = '1px solid red';
name[1].innerHTML = name[3]
name[1].style.color = 'red';
}
}
var password = dom[1];
console.log(typeof password);
console.log(password[0] == document.getElementsByName('password')[0]);
password[0].onfocus = function(){
password[1].innerHTML = password[2];
password[1].style.color = 'gray';
}
password[0].onblur = function(){
if(password[4].test(this.value)){
this.style.border = '1px solid #ADFF2F';
}else{
this.style.border = '1px solid red';
password[1].innerHTML = password[3]
password[1].style.color = 'red';
}
}
var com_password = dom[2];
com_password[0].onfocus = function(){
com_password[1].innerHTML = com_password[2];
com_password[1].style.color = 'gray';
}
com_password[0].onblur = function(){
if(com_password[4].test(this.value)){
this.style.border = '1px solid #ADFF2F';
if(com_password[0].value !== password[0].value) {
com_password[1].innerHTML = '与密码不匹配';
com_password[1].style.color = 'red';
}
}else{
this.style.border = '1px solid red';
com_password[1].innerHTML = com_password[3]
com_password[1].style.color = 'red';
}
}
var email = dom[3];
email[0].onfocus = function(){
email[1].innerHTML = email[2];
email[1].style.color = 'gray';
}
email[0].onblur = function(){
if(email[4].test(this.value)){
this.style.border = '1px solid #ADFF2F';
}else{
this.style.border = '1px solid red';
email[1].innerHTML = email[3]
email[1].style.color = 'red';
}
}
var phone = dom[4];
phone[0].onfocus = function(){
phone[1].innerHTML = phone[2];
phone[1].style.color = 'gray';
}
phone[0].onblur = function(){
if(phone[4].test(this.value)){
this.style.border = '1px solid #ADFF2F';
}else{
this.style.border = '1px solid red';
phone[1].innerHTML = phone[3]
phone[1].style.color = 'red';
}
}
</script>
</body>
</html>SolutionSolution
