JavaScript使用简单正则表达式的数据验证功能示例
本文实例讲述了JavaScript使用简单正则表达式的数据验证功能。分享给大家供大家参考，具体如下：
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Register-reg</title>
<scripttype="text/javascript"language="javascript">
functioncheckName(){
varnameElement=document.getElementById("name");
//varregExp=/^(a-z)[^a-z\d_]/i;
varregExp=/[a-zA-Z\d_]/i;//\w匹配包括下划线的任何单词字符。等价于'[A-Za-z0-9_]'。
varregExp2=/^[A-Za-z]/i;//匹配字符串开始位置为字母
varresultElement=document.getElementById("resName");
if(nameElement.value.match(regExp)&&nameElement.value.match(regExp2)&&nameElement.value.length>=6){
//匹配成功
//会员名为字母、数字、下划线组成，并且字母为开头，长度不小于6
resultElement.innerHTML="";
returntrue;
}
else{
resultElement.innerHTML="会员名为字母、数字、下划线组成，并且字母为开头，长度不小于6！";
returnfalse;
}
}
functioncheckPwd(){
varpwdElement=document.getElementById("pwd");
varregExp=/[a-zA-Z\d_]/i;//\w匹配包括下划线的任何单词字符。等价于'[A-Za-z0-9_]'。
varregExp2=/[a-zA-Z]/i;//匹配字母
varregExp3=/\d/i;//匹配数字
varresultElement=document.getElementById("resPwd");
if(pwdElement.value.match(regExp)&&pwdElement.value.match(regExp2)&&pwdElement.value.match(regExp3)&&pwdElement.value.length>=6){
//匹配成功
//密码为字母、数字、下划线组成，并且必须有字母、数字，长度不小于6
resultElement.innerHTML="";
returntrue;
}
else{
resultElement.innerHTML="密码为字母、数字、下划线组成，并且必须有字母、数字，长度不小于6！";
returnfalse;
}
}
functioncheckPwd2(){
varpwdElement=document.getElementById("pwd");
varpwd2Element=document.getElementById("pwd2");
varresultElement=document.getElementById("resPwd2");
if(pwdElement.value==pwd2Element.value){
//重输密码与之前密码完全匹配
resultElement.innerHTML="";
returntrue;
}
else{
resultElement.innerHTML="密码不一致！";
returnfalse;
}
}
functioncheckGentle(){
vargentleElement=document.getElementById("gentle");
varresultElement=document.getElementById("resGentle");
if((gentleElement.value=="男"||gentleElement.value=="女")||(gentleElement.value=="m"||gentleElement.value=="f")||(gentleElement.value=="male"||gentleElement.value=="famale")){
//性别判断是否在：男、女、male、famale、m、f之内
resultElement.innerHTML="";
returntrue;
}
else{
resultElement.innerHTML="性别判断是否在：男、女、male、famale、m、f之内！";
returnfalse;
}
}
functioncheckAge(){
varageElement=document.getElementById("age");
varresultElement=document.getElementById("resAge");
if(parseInt(ageElement.value)>0&&parseInt(ageElement.value)<=150){
//如果年龄在0~150之间
resultElement.innerHTML="";
returntrue;
}
else{
resultElement.innerHTML="年龄在0~150之间！";
returnfalse;
}
}
functioncheckMail(){
varmailElement=document.getElementById("mail");
varregExp=/[^a-z0-9_]/gi;//匹配非字母、数字、下划线的字符
varregExp2=/[a-z]/gi;//匹配字母
varresultElement=document.getElementById("resMail");
if(!mailElement.value.match(regExp)){//如果出现非字母、数字、下划线的字符
resultElement.innerHTML="邮箱地址不正确！";
returnfalse;
}
else{
if(mailElement.value.indexOf(".")-mailElement.value.indexOf("@")>=2){
resultElement.innerHTML="";
returntrue;
}
else{
resultElement.innerHTML="邮箱地址不正确！";
returnfalse;
}
}
}
functioncheckTel(){
vartelElement=document.getElementById("tel");
varregExp=/\d{7,12}/g;//匹配7~12位电话数字
varregExp2=/[^0-9]/g;//是否有数字以外的字符
varresultElement=document.getElementById("resTel");
if(telElement.value.match(regExp)&&telElement.value.length<=12){
if(telElement.value.match(regExp2)){
resultElement.innerHTML="电话号码为纯数字，且位于7~12位之间！";
returnfalse;
}
else{
resultElement.innerHTML="";
returntrue;
}
}
else{
resultElement.innerHTML="电话号码为纯数字，且位于7~12位之间！";//!telElement.value.match(regExp2)&&
returnfalse;
}
}
functioncheckAll(){
if(checkName()&&checkPwd()&&checkPwd2()&&checkGentle()&&checkAge()&&checkMail()&&checkTel()){
alert("恭喜,填写的信息正确！");
}
else{
alert("错误,请确认填写的信息是否正确！");
}
}
//当窗体加载完成时执行
window.onload=function(){
varinputElements=document.getElementsByTagName("input");
inputElements[0].onblur=function(){
checkName();
}
inputElements[1].onblur=function(){
checkPwd();
}
inputElements[2].onblur=function(){
checkPwd2();
}
inputElements[3].onblur=function(){
checkGentle();
}
inputElements[4].onblur=function(){
checkAge();
}
inputElements[5].onblur=function(){
checkMail();
}
inputElements[6].onblur=function(){
checkTel();
}
inputElements[7].onclick=function(){
checkAll();
}
}
</script>
<styletype="text/css">
body{font-size:16px;
font-weight:600;
font-family:微软雅黑;
line-height:30px;
}
thead{text-align:center;
}
input{width:150px;
}
input[type=button]{height:38px;
font-size:20px;
font-weight:600;
}
ul{border:1pxsolid#c3c3c3;
}
li{list-style-type:square;
}
</style>
</head>
<body>
<formaction=""method="post">
<table>
<thead><tr><tdcolspan="2"><h2>表单验证</h2></td></tr></thead>
<tr><td>会员名：</td><td><inputtype="text"id="name"/></td><tdid="resName"></td></tr>
<tr><td>密码：</td><td><inputtype="password"id="pwd"/></td><tdid="resPwd"></td></tr>
<tr><td>重复密码：</td><td><inputtype="password"id="pwd2"/></td><tdid="resPwd2"></td></tr>
<tr><td>性别：</td><td><inputtype="text"id="gentle"/></td><tdid="resGentle"></td></tr>
<tr><td>年龄：</td><td><inputtype="text"id="age"/></td><tdid="resAge"></td></tr>
<tr><td>电子邮件：</td><td><inputtype="text"id="mail"/></td><tdid="resMail"></td></tr>
<tr><td>联系号码：</td><td><inputtype="text"id="tel"/></td><tdid="resTel"></td></tr>
<tr><td></td><td><inputtype="button"value="注册"id="checkAll"/></td></tr>
</table>
</form>
<ul>
<li>会员名为字母、数字、下划线组成，并且字母为开头，长度不小于6</li>
<li>密码为字母、数字、下划线组成，并且必须有字母、数字，长度不小于6</li>
<li>性别判断是否在：男、女、male、famale、m、f之内</li>
<li>年龄在0~150之间</li>
<li>邮箱地址</li>
<li>电话号码为纯数字，且位于7~12位之间！</li>
</ul>
</body>
</html>
PS：这里再为大家提供2款非常方便的正则表达式工具供大家参考使用：
JavaScript正则表达式在线测试工具：
http://tools.jb51.net/regex/javascript
正则表达式在线生成工具：
http://tools.jb51.net/regex/create_reg
更多关于JavaScript相关内容感兴趣的读者可查看本站专题：《JavaScript正则表达式技巧大全》、《JavaScript替换操作技巧总结》、《JavaScript查找算法技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》、《JavaScript中json操作技巧总结》、《JavaScript错误与调试技巧总结》及《JavaScript数学运算用法总结》
希望本文所述对大家JavaScript程序设计有所帮助。