Html+Css+Js表单验证(正则表达式)

2022/2/13 6:15:40

编程Tag： js 验证 css html var style color span reg

本文主要是介绍Html+Css+Js表单验证(正则表达式)，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

Html部分

<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8" />
       <title></title>
       <link rel="stylesheet" type="text/css" href="css/index.css" />
       <script src="js/index.js" type="text/javascript" charset="utf-8"></script>
   </head>
   <body>
       <form action="#" method="post">
           <label>QQ号：</label><input type="text" id="txtQQ"><span></span><br>
           <label>邮箱：</label><input type="text" id="txtEmail"><span></span><br>
           <label>手机：</label><input type="text" id="txtPhone" οnblur="checkPhone()"><span id="msgPhone"></span><br>
           <input type="submit" value="提交" id="btn"/>
       </form>
   </body>
</html>

Css部分

* {
   margin: 0;
   padding: 0;
}
form{
   width: 800px;
   height: 200px;
   margin: 200px auto;
}
label{
   display: inline-block;
   width: 60px;
   text-align: right;
   margin-left: 200px;
}
#btn{
   margin: 20px 330px;
}
span{
   width: 200px;
}

Js部分

window.onload = function() {
   //获取文本框
   var txtQQ = document.getElementById("txtQQ");
   var txtEmail = document.getElementById("txtEmail");
   //
   txtQQ.onblur = function() {
       //获取当前文本框对应的 span
       var span = this.nextElementSibling;
       var reg = /^\d{5,12}$/;
       //判断验证是否成功
       if (!reg.test(this.value)) {
           //验证不成功
           span.innerText = " *请输入正确的 QQ 号";
           span.style.color = "red";
       } else {
           //验证成功
           span.innerText = " *验证通过";
           span.style.color = "green";
       }
   };
   //邮箱验证部分，封装成函数：
   var regEmial = /^\w+@\w+\.\w+(\.\w+)?$/;
   //调用函数 ia
   addCheck(txtEmail, regEmial, " *请输入正确的邮箱地址");
   //给文本框添加验证
   function addCheck(element, reg, tip) {
       element.onblur = function() {
           //获取当前文本框对应的 span
           var span = this.nextElementSibling;
           //判断验证是否成功
           if (!reg.test(this.value)) {
               //验证不成功
               span.innerText = tip;
               span.style.color = "red";
           } else {
               //验证成功
               span.innerText = " *验证通过";
               span.style.color = "green";
           }
       };
   }
}

function checkPhone() {
   var txtPhone = document.getElementById("txtPhone");
   var msgPhone = document.getElementById("msgPhone");
   var reg = /^(13[0-9]|14[5|7]|15[0|1|2|3|4|5|6|7|8|9]|18[0|1|2|3|5|6|7|8|9])\d{8}$/;
   //判断验证是否成功
   if (!reg.test(txtPhone.value)) {
       //验证不成功
       msgPhone.innerText = " *请输入正确的手机号";
       msgPhone.style.color = "red";
   } else {
       //验证成功
       msgPhone.innerText = " *验证通过";
       msgPhone.style.color = "green";
   }
}

这篇关于Html+Css+Js表单验证(正则表达式)的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！

相关编程文章

更多>