js Elemet.getAttribute(String attrName)

本文介绍了一个简单的HTML表单及其JavaScript验证方法。重点讲解如何利用自定义属性'datatype'进行输入验证,并针对不同类型的输入(如邮编、电话等)设置相应的正则表达式。同时解释了原生属性与自定义属性获取方式的区别。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

<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()方法。

 

 

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值