本文详细介绍了如何使用JavaScript实现电话号码格式验证，并将其整合到表单提交流程中，确保用户输入的电话号码符合特定规则。通过定义正则表达式、创建RegExp对象以及调用函数检查输入，实现了对电话号码的有效性校验。此外，文章还展示了如何通过自定义函数检查表单元素，包括用户名和电话号码，并根据不同条件进行相应的提示和验证逻辑。
文件：check.js
自定义 checkRegTels(); 传入一个参数，名字是regtels；
function checkRegTels(regtels){ //此方法在验证电话格式的时候调用
var str=regtels; //将传入参数赋值给str
var Expression=/^(\d{4}-)(\d{7})$/; //定义正则表达式，赋值给Expression
var objExp=new RegExp(Expression); //创建RegExp()对象（可百度）
if(objExp.test(str)==true){ // if 判断语句， test() 是RegExp对象里的一个方法，表示前后对象是否匹配
return true; // 如果成功，返回true,否则返回false
}else{
return false;
}
}
function checkForm(form,mark){ //自定义函数，传入两个参数，第一个是表单名，第二个只是用于分类
if(mark==0 || mark=="all"){ //如果传入的参数mark==0或者all，执行以下代码
if(form.userName.value==""){ //判断表单userName属性的内容是否等于空
check_userName.innerHTML="请输入用户名！"; //在id=check_userName的div里输出“请输入用户名！”
return false; //返回false，禁止页面提交
}else{ //其他情况不输出文字（输出空）
check_userName.innerHTML="";
}
}
if(mark==1 || mark=="all"){
if(form.userTel.value==""){
check_userTel.innerHTML="请输入固定电话！";
return false;
}else if(!checkRegTels(form.userTel.value)){ //引用checkRegTels()方法，传入表单中userTel的内容，匹配不成功执行以下代码
check_userTel.innerHTML="号码格式错误！";
}else{ //其他输出空
check_userTel.innerHTML="";
}
}
}
文件名：index.php
<script src="check.js"></script> //这里调用check.js文件
<body>
<center>
<form action="" method="post" name="myForm" onsubmit="return checkForm(myForm,'all')"> //onsubmit表示调用checkForm(),并传入表单名和第二个参数“all”;
<table border="2" cellpadding="0" cellspacing="0">
<tr>
<td><div>用户名</div></td>
<td><input type="text" name="userName" onblur="checkForm(myForm,0)"></td> //onblur表示调用checkForm，并传入参数
//接着会发生什么，你懂得...
<td align="left"><font color="#FF0000">*</font> <div id="check_userName" style="color:#FF0000"></div></td>
</tr>
<tr>
<td><div>固定电话</div></td>
<td><input type="text" name="userTel" onblur="checkForm(myForm,1)"></td>
<td align="left"><font color="#FF0000">*</font> <div id="check_userTel" style="color:#FF0000"></div></td>
</tr>
<tr>
<td height="30"> </td>
<td width="150" height="30"><input type="submit" value="提交"> </td>
<td width="343"><input type="reset" value="重置"></td>
</tr>
</table>
</form>
</center>
</body>
运行结果...
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
