js正则表达式验证表单【完整版】
程序员文章站
2023-11-16 11:52:10
效果图:
图(1)初始图
图(2)填入信息校验
代码如下:
效果图:
图(1)初始图
图(2)填入信息校验
代码如下:
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>完整验证表单</title> <style type="text/css"> *{margin: 0;padding: 0;list-style:none;} body{background:#ccc;} .demo{width:400px;padding:40px;background:#efefef;border:solid 1px #666;margin:100px auto 0;line-height:40px;} label{display:inline-block;width:20%;} input{width:60%;} </style> </head> <body> <div class="demo"> <ul> <li> <label for="iptqq">q q:</label> <input type="text" id="iptqq"> <span></span> </li> <li> <label for="iptphone">手机:</label> <input type="text" id="iptphone"> <span></span> </li> <li> <label for="iptemil">邮箱:</label> <input type="text" id="iptemil"> <span></span> </li> <li> <label for="iptnum">座机:</label> <input type="text" id="iptnum"> <span></span> </li> <li> <label for="iptname">姓名:</label> <input type="text" id="iptname"> <span></span> </li> </ul> </div> </body> <script type="text/javascript"> (function(window){ function $(id){ return document.getelementbyid(id); }; // 获取对象 var iptqq = $("iptqq"),iptphone = $("iptphone"),iptemil = $("iptemil"),iptnum = $("iptnum"),iptname = $("iptname"); // 正则验证表达式 // 验证座机 var rxnum = /^0[0-9]{2,3}-[0-9]{7,8}$/; // 验证qq var rxqq = /^[1-9][0-9]{4,10}$/; // 验证手机 var rxphone = /^(13[0-9]|15[012356789]|18[0-9]|17[678]|14[57])[0-9]{8}$/; // 验证邮箱 var rxemil = /^\w+@\w+\.\w+$/; // 验证姓名 var rxname = /^[\u4e00-\u9fa5]{2,}$/ // 验证座机 cation(iptnum,rxnum); // 验证qq cation(iptqq,rxqq); // 验证手机号 cation(iptphone,rxphone); // 验证邮箱 cation(iptemil,rxemil); // 验证姓名 cation(iptname,rxname); // 封装验证函数 function cation(element,regexp){ element.onblur = function(){ var txt = this.value; if( regexp.test( txt ) ){ this.nextelementsibling.innerhtml = "正确" this.nextelementsibling.style.color = "green"; }else{ this.nextelementsibling.innerhtml = "错误" this.nextelementsibling.style.color = "red"; } } } })(window) </script> </html>
以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持!
上一篇: Python中对列表排序实例
下一篇: 关于php内存不够用的快速解决方法