J'ai vu un petit sujet et je l'ai utilisé pour m'entraîner. Je voulais écrire le code plus intelligemment, mais je suis tombé sur un piège
L'objet portant le nom est obtenu avec succès, mais l'objet est placé dans un tableau à deux dimensions, la valeur du tableau à deux dimensions est affectée à une variable, puis la variable devient une chaîne. Comment pouvons-nous utiliser une méthode similaire plus tard pour identifier des objets ? ?
<!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>Résoudre Résoudre
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
La variable .toString() a changé