JavaScript使用简单正则表达式的数据验证功能示例
程序员文章站
2022-06-01 19:08:16
本文实例讲述了javascript使用简单正则表达式的数据验证功能。分享给大家供大家参考,具体如下:
本文实例讲述了javascript使用简单正则表达式的数据验证功能。分享给大家供大家参考,具体如下:
<!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>register-reg</title> <script type="text/javascript" language="javascript"> function checkname() { var nameelement = document.getelementbyid("name"); //var regexp = /^(a-z)[^a-z\d_]/i; var regexp = /[a-za-z\d_]/i; // \w 匹配包括下划线的任何单词字符。等价于'[a-za-z0-9_]'。 var regexp2 = /^[a-za-z]/i;//匹配字符串开始位置为字母 var resultelement = document.getelementbyid("resname"); if (nameelement.value.match(regexp) && nameelement.value.match(regexp2) && nameelement.value.length >= 6) { //匹配成功 //会员名为字母、数字、下划线组成,并且字母为开头,长度不小于6 resultelement.innerhtml = ""; return true; } else { resultelement.innerhtml = "会员名为字母、数字、下划线组成,并且字母为开头,长度不小于6!"; return false; } } function checkpwd() { var pwdelement = document.getelementbyid("pwd"); var regexp = /[a-za-z\d_]/i; // \w 匹配包括下划线的任何单词字符。等价于'[a-za-z0-9_]'。 var regexp2 = /[a-za-z]/i; //匹配字母 var regexp3 = /\d/i; //匹配数字 var resultelement = document.getelementbyid("respwd"); if (pwdelement.value.match(regexp) && pwdelement.value.match(regexp2) && pwdelement.value.match(regexp3) && pwdelement.value.length >= 6) { //匹配成功 //密码为字母、数字、下划线组成,并且必须有字母、数字,长度不小于6 resultelement.innerhtml = ""; return true; } else { resultelement.innerhtml = "密码为字母、数字、下划线组成,并且必须有字母、数字,长度不小于6!"; return false; } } function checkpwd2() { var pwdelement = document.getelementbyid("pwd"); var pwd2element = document.getelementbyid("pwd2"); var resultelement = document.getelementbyid("respwd2"); if (pwdelement.value == pwd2element.value) { //重输密码与之前密码完全匹配 resultelement.innerhtml = ""; return true; } else { resultelement.innerhtml = "密码不一致!"; return false; } } function checkgentle() { var gentleelement = document.getelementbyid("gentle"); var resultelement = 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 = ""; return true; } else { resultelement.innerhtml = "性别判断是否在:男、女、male、famale、m、f 之内!"; return false; } } function checkage() { var ageelement = document.getelementbyid("age"); var resultelement = document.getelementbyid("resage"); if (parseint(ageelement.value) > 0 && parseint(ageelement.value) <= 150) { //如果年龄在0~150之间 resultelement.innerhtml = ""; return true; } else { resultelement.innerhtml = "年龄在0~150之间!"; return false; } } function checkmail() { var mailelement = document.getelementbyid("mail"); var regexp = /[^a-z0-9_]/gi; // 匹配非字母、数字、下划线的字符 var regexp2 = /[a-z]/gi; // 匹配字母 var resultelement = document.getelementbyid("resmail"); if (!mailelement.value.match(regexp)) {//如果出现非字母、数字、下划线的字符 resultelement.innerhtml = "邮箱地址不正确!"; return false; } else { if (mailelement.value.indexof(".") - mailelement.value.indexof("@") >= 2) { resultelement.innerhtml = ""; return true; } else { resultelement.innerhtml = "邮箱地址不正确!"; return false; } } } function checktel() { var telelement = document.getelementbyid("tel"); var regexp = /\d{7,12}/g;// 匹配7~12位电话数字 var regexp2 = /[^0-9]/g; // 是否有数字以外的字符 var resultelement = document.getelementbyid("restel"); if (telelement.value.match(regexp) && telelement.value.length <= 12) { if (telelement.value.match(regexp2)) { resultelement.innerhtml = "电话号码为纯数字,且位于7~12位之间!"; return false; } else { resultelement.innerhtml = ""; return true; } } else { resultelement.innerhtml = "电话号码为纯数字,且位于7~12位之间!"; //!telelement.value.match(regexp2) && return false; } } function checkall() { if (checkname() && checkpwd() && checkpwd2() && checkgentle() && checkage() && checkmail() && checktel()) { alert("恭喜,填写的信息正确!"); } else { alert("错误,请确认填写的信息是否正确!"); } } //当窗体加载完成时执行 window.onload = function () { var inputelements = 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> <style type="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:1px solid #c3c3c3; } li{ list-style-type:square; } </style> </head> <body> <form action="" method="post"> <table> <thead><tr><td colspan="2"><h2>表单验证</h2></td></tr></thead> <tr><td>会员名:</td><td><input type="text" id="name" /></td><td id="resname"></td></tr> <tr><td>密码:</td><td><input type="password" id="pwd" /></td><td id="respwd"></td></tr> <tr><td>重复密码:</td><td><input type="password" id="pwd2" /></td><td id="respwd2"></td></tr> <tr><td>性别:</td><td><input type="text" id="gentle" /></td><td id="resgentle"></td></tr> <tr><td>年龄:</td><td><input type="text" id="age" /></td><td id="resage"></td></tr> <tr><td>电子邮件:</td><td><input type="text" id="mail" /></td><td id="resmail"></td></tr> <tr><td>联系号码:</td><td><input type="text" id="tel" /></td><td id="restel"></td></tr> <tr><td></td><td><input type="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正则表达式在线测试工具:
正则表达式在线生成工具:
更多关于javascript相关内容感兴趣的读者可查看本站专题:《javascript正则表达式技巧大全》、《javascript替换操作技巧总结》、《javascript查找算法技巧总结》、《javascript数据结构与算法技巧总结》、《javascript遍历算法与技巧总结》、《javascript中json操作技巧总结》、《javascript错误与调试技巧总结》及《javascript数学运算用法总结》
希望本文所述对大家javascript程序设计有所帮助。
推荐阅读