字符表单验证与正则表单验证

最新推荐文章于 2025-03-23 14:39:27 发布

原创最新推荐文章于 2025-03-23 14:39:27 发布 · 167 阅读

0 ·

CC 4.0 BY-SA版权

本文深入探讨了两种表单验证方法：字符表单验证和正则表单验证。通过具体的HTML、CSS和JavaScript代码示例，详细介绍了如何验证用户名，确保其长度、首字母和组成字符符合规定，为网站注册流程提供安全保障。

1、字符表单验证

html部分
在这里插入图片描述
js部分

/*
          事件驱动函数 click   blur--失去焦点
          */
          var oUsername = document.getElementById("username");
          var oUsernameSpan = document.getElementById("username_span");
          oUsername.addEventListener("click",btnClick());
          function btnClick(){
              oUsernameSpan.innerHTML = "6~18个字符，可使用字母、数字、下划线，需以字母开头";
          };
          oUsername.addEventListener("blur",func);
          function func(){
              //1、拿到输入框的内容
              var oValue = oUsername.value;

              //2、判断
              //用户长度是否符合要求
              if(oValue.length<6 || oValue.length>18){
                  oUsernameSpan.innerHTML = "长度应为6~18个字符";

                  //3、判断首字母是否是字母
              }else if(!isABC(oValue[0])){
                  oUsernameSpan.innerHTML = "邮件地址必需以英文字母开头";
              }else{
                  //是否都是数字、字母、下划线组成
                  var isYes = true;//假设符合要求
                  for(var i=0;i<oValue.length;i++){
                      if(!isDEF(oValue[i])){
                          isYes = false;
                          break;
                      }
                  }
                  if(isYes){
                      oUsernameSpan.innerHTML = "恭喜，该邮件地址可注册";
                  }else{
                      oUsernameSpan.innerHTML = "邮件地址需由字母、数字或下划线组成";
                  }
              }
          }
          //判断单个字符是否是字母
          function isABC(charrStr){
              if(charrStr>="a" && charrStr<="z" || charrStr>="A" && charrStr<="Z"){
                  return true;
              }else{
                  return false;
              }
          }
          //判断单个字符是否符合数字字母下划线
          function isDEF(charrStr){
              if(charrStr>="a" && charrStr<="z" || charrStr>="A" && charrStr<="Z" || charrStr>=0 && charrStr<=9 || charrStr=="_"){
                  return true;
              }else{
                  return false;
              }
          }

效果在这里插入图片描述

2、正则表单验证

html部分
在这里插入图片描述
css部分

#div1 {
                width:250px;
                height:250px;
                border:1px solid black;
                padding:50px;
                text-align: center;
                margin:100px auto;
                background-color:lightgray;
            }
            #div1 input {
                width:250px;
                height:30px;
                font-size:18px;
                margin-top:20px;
            }
            #div1 span {
                margin-top:5px;
                font-size:14px;
                color:gray;
            }
            #div1 .testCode {
                width:70px;
                height:30px;
                line-height:30px;
                background-color: gray;
                color:white;
                float: left;
                margin-left:10px;
                margin-top:6px;
            }

js部分

 window.onload = function(){
                var oUsername = document.getElementById("username");
                var oUsername_span = document.getElementById("username_span");

                //添加失去焦点事件
                oUsername.onblur = function(){
                    var oValue = oUsername.value;
                    //1、用户名长度是否符合要求
                    if(oValue.length<6 || oValue.length>18){
                        oUsername_span.innerHTML = "! 长度应为6~18个字符";
                        oUsername_span.style.color = "red";

                        //2、判断首字母是否是字母
                    }else if(!/[a-zA-Z]/.test(oValue[0])){
                        oUsername_span.innerHTML = "! 邮件地址必须以因为字母开头";
                        oUsername_span.style.color = "red";
                    }else if(/\W/.test(oValue)){
                        oUsername_span.innerHTML = "! 邮件地址需由字母、数字或下划线组成";
                        oUsername_span.style.color = "red";
                    }else{
                        oUsername_span.innerHTML = "✔该用户名可注册";
                        oUsername_span.style.color = "green";
                    }
                }
            }

效果
在这里插入图片描述