`

js Elemet.getAttribute(String attrName)

阅读更多

<form action="?" onsubmit="formValidate(this);">

邮编:<input type="text" name="postCode" datatype="postcode"><br />

电话:<input type="text" name="tel" datatype="tel"><br /> email:<input

type="text" name="email" datatype="email"><br /> 传真:<input

type="text" name="fax" datatype="tel"><br /> 手机:<input

type="text" name="phone" datatype="phone"><br /> <input

type="submit" name="sub" />

</form>

datatype为自定义属性:

 <script type="text/javascript">

function formValidate(form) {

var arrs = form.elements;

try {

for ( var i = 0; i < arrs.length; i++) {

var dataType = arrs[i].getAttribute('datatype');

var eleName = arrs[i].name;

//alert('name---' + eleName);

var eleValue = arrs[i].value;

/// if (!!eleValue) {

alert('请输入内容--' + dataType);

//return false;

// }

 

switch (dataType) {

case 'postcode':

var reg = /\d{6}$/;

if (!reg.test(eleValue)) {

alert('please ,correct to input postCode!');

} else {

alert('ok');

}

break;

/*case "tel":

if(!(/^\d{4}-\d{7}$/.test(eleValue))){

  alert('please ,correct to input tel!');

}   

 break;

case "email":

if(!(/^\w{4,}@\w{2,}.\w{2,}/.test(eleValue))){

  alert('please ,correct to input email!');

}   

 break;

case "fax":

if(!(/^\d{4}-\d{7}$/.test(eleValue))){

  alert('please ,correct to input fax!');

}  

break;

case "phone":

if(!(/^\d{11}$/.test(eleValue))){

  alert('please ,correct to input phone!');

}  

break;*/

}

}

 

} catch (e) {

alert(e);

} finally {

alert('clean code');

}

 

return false;

}

</script>

//#################

1.var dataType = arrs[i].getAttribute('datatype');

2.var eleName = arrs[i].name;

注意代码行1和代码行2的区别:

  由于name为原生属性,所有可以用通过对象.属性名获得

 而datatype为自定义属性,不能通过对象.属性名获得只能通过对象.getAttribute(属性名)获得属性值

getAttribute:

方法getAttribute()将返回一个元素的指定属性的值。HTMLElement对象定义了和每个标准HTML属性对应的javaScript属性,因此,只有当你查询非标准属性的值的时候,才需要和HTML文档一起使用该方法。

在xml文档中,属性值不能直接作为元素的属性,必须通过调用方法来查询它们。对于使用名字空间的xml文档来说,需要使用getAttributeNS()方法。

 

 

 

分享到:
评论

相关推荐

Global site tag (gtag.js) - Google Analytics