html - Bagaimanakah memberikan tatasusunan kepada pembolehubah dalam javascript bertukar menjadi rentetan? ?
Saya melihat topik kecil dan menggunakannya untuk berlatih Saya mahu menulis kod dengan lebih bijak, tetapi saya tersepit
Mendapatkan objek dengan nama berjaya, tetapi letakkan objek ke dalam tatasusunan dua dimensi, tetapkan nilai tatasusunan dua dimensi kepada pembolehubah, dan kemudian pembolehubah itu menjadi rentetan. Bagaimanakah kita boleh menggunakan kaedah yang serupa kemudian untuk mengenal pasti objek? ?
<!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>Selesai Selesaikan
