正则表达式表单验证实例

来源：互联网发布：淘宝客服务要订吗编辑：程序博客网时间：2024/05/20 11:20

一、HTML部分代码：

<form name="myform" action="" onsubmit="return fun1()"><div align="center"><table border="1" width="60%" ><tr><td colspan=2 align=center> <h3>学生信息管理</td></tr><tr><td height="39" width="463" bgcolor="#006699"><font color="#FFFF00">学生编号：<input type="text" maxlength=10 id="sno" value="12345678">(8位数字)</td>       <td height="39" width="463" bgcolor="#006699">        <font color="#FFFF00">       学生名字：<input type="text" maxlength=10 id="username" value="刘训">(中文)</td><tr><td height="39" width="463" bgcolor="#006699"><font color="#FFFF00">邮箱地址：<input type="text" maxlength=10 id="email" value="1056125478@qq.com"></td>       <td height="39" width="463" bgcolor="#006699">        <font color="#FFFF00">       电话号码：<input type="text" maxlength=11 id="tel" value="15574074751"></td><tr><td  height="53" width="985" bgcolor="#006699" colspan="2" align=center><input type="submit" value="使用submit按钮提交表单"></td></tr></table>

二、CSS部分代码：

/*是否带有小数*/function    isDecimal(strValue )  {     var  objRegExp= /^\d+\.\d+$/;   return  objRegExp.test(strValue);  }  /*校验是否中文名称组成 */function ischina(str) {var reg=/^[\u4E00-\u9FA5]{2,4}$/;   /*定义验证表达式*/return reg.test(str);     /*进行验证*/}/*校验是否全由8位数字组成 */function isStudentNo(str) {var reg=/^[0-9]{8}$/;   /*定义验证表达式*/return reg.test(str);     /*进行验证*/}/*校验电话码格式 */function isTelCode(str) {var reg= /^((0\d{2,3}-\d{7,8})|(1[3584]\d{9}))$/;return reg.test(str);}/*校验邮件地址是否合法 */function IsEmail(str) {var reg=/^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(\.[a-zA-Z0-9_-])+/;return reg.test(str);}function  fun1(){if(!isStudentNo(document.getElementById("sno").value)){alert("学生编号是8位数字");document.getElementById("sno").focus();return false;}if(!ischina(document.getElementById("username").value)){alert("学生姓名必须填写中文");document.getElementById("username").focus();return false;  }if(!IsEmail(document.getElementById("email").value)){alert("邮箱地址错误");document.getElementById("email").focus();return false;  }if(!isTelCode(document.getElementById("tel").value)){alert("电话号码不对");document.getElementById("tel").focus();return false;  }/*运行到这里说明验证通过返回true    submit提交按钮起作用提交表单*/alert("提交成功")return true;}
三、结果：

阅读全文

0 0