js表单校验涉及到的正则表达式以及校验方法的封装

最新推荐文章于 2024-06-03 22:41:57 发布

原创最新推荐文章于 2024-06-03 22:41:57 发布 · 1.5k 阅读

0 ·

CC 4.0 BY-SA版权

JS 专栏收录该内容

122 篇文章

订阅专栏

本文介绍了一种用于表单校验的JavaScript方法，包括用户名、密码、确认密码和邮件地址的验证过程，以及如何在用户输入后即时反馈验证结果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
   <head>
       <meta http-equiv="Content-Type" content="text/html; charset=GBK">
       <title>Untitled Document</title>
   </head>
   <body>

       

       <script type="text/javascript">
           /*
           //校验用户名
           function checkUser(){
               var flag;

               var oUserNode = document.getElementsByName("user")[0];

               var name = oUserNode.value;

               //定义正则表达式8
               var reg = new RegExp("^[a-z]{4}$","i");//必须是四个字母。

//               reg = new RegExp("^\\d{4}$");// 必须是四个数字。
//               reg = /^\d{4}$/;

               var oSpanNode = document.getElementById("userspan");

//               if(name=="abc"){
               if(reg.test(name)){
                   oSpanNode.innerHTML = "用户名正确".fontcolor("green");
                   flag = true;
               }else{
                   oSpanNode.innerHTML = "用户名错误".fontcolor("red");
                   flag = false;
               }

               return flag;
           }
           */



           /*
           * 发现很多框的校验除了几个内容不同外，校验的过程是一样的。
           * 所以进行了代码的提取。
           *
           */

           function check(name,reg,spanId,okinfo,errinfo){
               var flag;
               var val = document.getElementsByName(name)[0].value;


               var oSpanNode = document.getElementById(spanId);

               if(reg.test(val)){
                   oSpanNode.innerHTML = okinfo.fontcolor("green");
                   flag = true;
               }else{
                   oSpanNode.innerHTML = errinfo.fontcolor("red");
                   flag = false;
               }
               return flag;
           }


           //校验用户名。
           function checkUser(){

               var reg = /^[a-z]{4}$/i;
               return check("user",reg,"userspan","用户名正确","用户名错误");


           }


           //校验密码；
           function checkPsw(){

               var reg = /^\d{4}$/;
               return check("psw",reg,"pswspan","密码格式正确","密码格式错误");
           }


           //校验确定密码。只要和密码一致即可。
           function checkRepsw(){

               var flag;
               //获取密码框内容。
               var pass = document.getElementsByName("psw")[0].value;

               //获取确认密码框内容。
               var repass = document.getElementsByName("repsw")[0].value;


               //获取确认密码的span区域。
               var oSpanNode = document.getElementById("repswspan");

               if(pass==repass){
                   oSpanNode.innerHTML = "两次密码一致".fontcolor("green");
                   flag = true;
               }else{
                   oSpanNode.innerHTML = "两次密码不一致".fontcolor("red");
                   flag = false;
               }
               return flag;
           }




           //校验邮件
           function checkMail(){
               var reg = /^\w+@\w+(\.\w+)+$/i;
               return check("mail",reg,"mailspan","邮件地址正确","邮件地址错误");
           }

           // 提交事件处理。
           function checkForm(){
//               alert(checkUser() +"--"+ checkPsw() +"--"+ checkRepsw() +"--"+ checkMail());
               if(checkUser() && checkPsw() && checkRepsw() && checkMail())
                   return true;
               return false;
           }





           function mySubmit(){

               var oFormNode = document.getElementById("userinfo");

               oFormNode.submit();


           }
       </script>


       <form id="userinfo" onsubmit="return checkForm()">

           用户名称：<input type="text" name="user" onblur="checkUser()" />
           <span id="userspan"></span>
           <br/>

           输入密码：<input type="text" name="psw" onblur="checkPsw()" />
           <span id="pswspan"></span>
           <br/>

           确定密码：<input type="text" name="repsw" onblur="checkRepsw()" />
           <span id="repswspan"></span>
           <br/>

           邮件地址：<input type="text" name="mail" onblur="checkMail()" />
           <span id="mailspan"></span>
           <br/>

           <input type="submit" value="提交数据" />
       </form>
       <hr/>
       
       <input type="button" value="我的提交" onclick="mySubmit()" />

   </body>
</html>