您好,登录后才能下订单哦!
密码登录
登录注册
点击 登录注册 即表示同意《亿速云用户服务条款》
这篇文章给大家分享的是有关js如何使用正则表达式验证表单的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。
效果图:
图(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>
感谢各位的阅读!关于“js如何使用正则表达式验证表单”这篇文章就分享到这里了,希望以上内容可以对大家有一定的帮助,让大家可以学到更多知识,如果觉得文章不错,可以把它分享出去让更多的人看到吧!
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。