常用JavaScript表单验证与DOM操作函数集

作者:木棉

时间:2026-10-23

浏览:121

本文整理了一系列常用的JavaScript函数,涵盖表单验证、DOM元素操作及页面交互优化。内容包括TD高亮、下拉菜单显隐控制、iframe高度自适应、复选框全选及多种格式验证(用户名、密码、身份证、邮箱等)。提供完整代码片段,适用于传统Web开发场景。

文章目录

TD元素高亮与下拉菜单显隐控制

// mhHover('起始ID名称','第 X 个TD标签','样式名称')



程序代码



function mhHover(tbl,idx,cls){


var t,d;


if(document.getElementById)t=document.getElementById(tbl);


else t=document.all(tbl);


if(t==null)return;


if(t.getElementsByTagName)d=t.getElementsByTagName("TD");


else d=t.all.tags("TD");


if(d==null)return;


if(d.length<=idx)


return;


d[idx].className=cls;


}

//下拉菜单,显示隐藏ID


//使用方法


//onChange="OptionNumber_change('表单名称','ID名称相同部分(序列数字自动取值)')"


//注意:表单的Value值必须是数字



程序代码



function OptionNumber_change(selObj,strOpt)


{

var a = (selObj.options[selObj.selectedIndex].value);


for (i = 1; i <= a; i++)


{

document.getElementById(strOpt+i).style.display = "";


}

for (j = 10; j > a; j--)


{

document.getElementById(strOpt+j).style.display = "none";


}
}

//读取数据库,显示隐藏ID


//使用方法


//

程序代码



function ListNumber_change(ListObj,ListStr)


{

var a = ListObj;


for (i = 1; i <= a; i++)


{

document.getElementById(ListStr+i).style.display = "";


}

for (j = 10; j > a; j--)


{

document.getElementById(ListStr+j).style.display = "none";


}
}

iframe自适应与复选框全选功能

//iframe自适应高度


//使用方法:


//onLoad="reSizeFrame('iframe ID 名称')"



程序代码



function reSizeFrame(frameID) {//frameID是你ifream的名字


try {


var oBody = eval(frameID+".document.body");


var oFrame = document.all(frameID);


oFrame.style.height = oBody.scrollHeight + (oBody.offsetHeight - oBody.clientHeight);


}

catch(e) {


window.status = 'Error: ' + e.number + '; ' + e.description;


}
}

//选择所有复选框


//使用方法:


//onclick=CheckAll(this.form,this.checked)



程序代码



function CheckAll(form1,v) {


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


var e = form1.elements[i];


if (e.type=='checkbox') e.checked = v;


}
}

通用表单验证与各类格式校验函数

//验证表单字符串表达式正确性



程序代码



function regExpCheck(re,getO,msg)


{

if(re.test(getO.value)==false)


{

if (getO.msg)


{

msg = getO.msg+msg


}

alert(msg)


getO.focus();


return false;


}

return true;


}

//验证用户名



程序代码



function checkAccount(getO)


{

re= /^([a-z0-9]{4,12})$/gi


msg = "用户名格式为:4-12位 英文小写(a-z) 数字(0-9)"


return regExpCheck(re,getO,msg)


}

//验证密码



程序代码



function checkPassY(getO)


{

re= /^([A-Za-z0-9]{8,12})$/gi


msg = "登录密码格式为:8-12位 英文(A-Z,a-z) 数字(0-9)"


return regExpCheck(re,getO,msg)


}

//验证真实姓名



程序代码



function checkNameN(getO)


{

re= /^[^\'\,\;\$\|\@\*]{2,10}$/gi


msg = "真实姓名格式错误"


xx = regExpCheck(re,getO,msg)


if (xx==true)


{

re = /[^ -}]/gi


gV = getO.value


if( gV.match(re)== null)


return true


else


{

gV_c = (gV.match(re)).length


gV_e = gV.length-gV_c


gv_len = gV_c*2 + gV_e


if (gv_len>20)


{

alert("不能长于10个字符")


return false;


}

else


return true


}
}

else


return false;


}

//验证身份证号码



程序代码



function checkIdCard(getO)


{

re= /^(([0-9]{15})|([0-9a-z]{18}))$/gi;


msg = "身份证格式错误"


return regExpCheck(re,getO,msg)


}

//验证电子邮件



程序代码



function checkEmail(getO)


{

re= /^([\.\w-]){2,30}@([\w-]){3,30}(\.([\w]){2,4}){1,2}/gi


msg = "邮箱格式错误"


return regExpCheck(re,getO,msg)


}

//验证邮政编码



程序代码



function checkZipCode(getO)


{

re= /^([0-9]{6})$/gi


msg = "邮政编码格式为:6位 数字(0-9)"


return regExpCheck(re,getO,msg)


}

//验证电话号码



程序代码



function checkPhone(getO)


{

re= /^([\d]){2,5}-([\d]){3,14}/gi


msg = "电话格式错误\r\n\r\n区域号码和电话号码中间请用“-”格开,例如:029-82303721"


return regExpCheck(re,getO,msg)


}

//验证手机号码



程序代码



function checkMobile(getO)


{

re= /^(\+?[0-9]{0,3}13[0-9]{9})$/gi


msg = "手机格式错误"


return regExpCheck(re,getO,msg)


}

//验证校验码



程序代码



function checkVcode(getO)


{

re= /^(\d{4})$/gi


msg = "校验码格式错误"


return regExpCheck(re,getO,msg)


}

//验证数字1


function checkNumber(getO)


{

re= /^\d+$/gi


msg = "格式错误,请输入0~9的数字"


return regExpCheck(re,getO,msg)


}

//验证数字2


function checkNumberText(get0,msg0)


{

re = /^\d+$/gi


//msg = msg0


return regExpCheck(re,get0,msg0)


} 

实用工具推荐

电子包浆

绿化、压缩、噪点和虚拟水印,自由调节做旧程度。

使用 ›
图片压缩

选择画质和输出格式,预览压缩前后的大小。

使用 ›
相关文章