- Gemeinschaft
- Lernen
- Tools-Bibliothek
- Freizeit
Heim > Fragen und Antworten > Hauptteil
Ich habe ein kleines Thema gesehen und es zum Üben genutzt. Ich wollte den Code intelligenter schreiben, bin aber in eine Falle geraten
Das Objekt mit dem Namen wird erfolgreich abgerufen, aber das Objekt wird in einem zweidimensionalen Array platziert, der Wert des zweidimensionalen Arrays wird einer Variablen zugewiesen und die Variable wird dann zu einer Zeichenfolge. Wie können wir später eine ähnliche Methode verwenden, um Objekte zu identifizieren? ?
<!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>Lösen, lösen
