效果图:
图(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>
以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持!
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件!
如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
暂无“js正则表达式验证表单【完整版】”评论...
P70系列延期,华为新旗舰将在下月发布
3月20日消息,近期博主@数码闲聊站 透露,原定三月份发布的华为新旗舰P70系列延期发布,预计4月份上市。
而博主@定焦数码 爆料,华为的P70系列在定位上已经超过了Mate60,成为了重要的旗舰系列之一。它肩负着重返影像领域顶尖的使命。那么这次P70会带来哪些令人惊艳的创新呢?
根据目前爆料的消息来看,华为P70系列将推出三个版本,其中P70和P70 Pro采用了三角形的摄像头模组设计,而P70 Art则采用了与上一代P60 Art相似的不规则形状设计。这样的外观是否好看见仁见智,但辨识度绝对拉满。
更新动态
2024年05月09日
2024年05月09日
- 西游笔绘西行怎么预约 游戏预约方法分享
- 《战争机器人:前线》基础攻略 简述+配置+下载
- 《瑞奇与叮当:时空跳转》评测:穿越机能秀
- 图虽然老 但她实在太大了 动图 少妇春色满园遮不住啊
- SYMPHONIESINHI-FI2(发烧交响乐2)MQGCD2022原抓WAV
- CD圣经上榜天碟1996-李谷一-《秋水伊人》[LPCD45][WAV+CUE]
- [ABC唱片]-《西电之声—人声》[德国版HD]WAV+CUE
- 《地狱潜者2》Reddit社区发文 呼吁大家撤销游戏差评
- 外媒评选期待已久的15款游戏:《老滚6》杳无音讯
- 不是自愿给的吗!越来越多美国人被小费文化逼疯
- 张智成.2019-你是不是张智成【海蝶音乐】【FLAC分轨】
- 群星.1999-98滚石年度最卖座主打歌刷新全纪录·新台湾男人【滚石】【WAV+CUE】
- 群星.1999-98滚石年度最卖座主打歌刷新全纪录·新台湾女人【滚石】【WAV+CUE】
- 宝藏归离任务怎么做?宝藏归离任务攻略
- 原画壁纸及美图第209期,无水印可自取