Js实现简单的表单验证（小白篇）

最新推荐文章于 2022-04-12 21:48:22 发布

Jacob.Dev

最新推荐文章于 2022-04-12 21:48:22 发布

阅读量458

点赞数

分类专栏： JavaScript

本文链接：https://blog.csdn.net/weixin_47459990/article/details/107600343

版权

JavaScript 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

用到的知识：

1、BOM对象基本操作
2、DOM对象基本操作
3、正则表达式的运用及函数
4、输入框光标事件

代码分析：

通过正则表达式基础和输入框光标事件，当鼠标移出输入框时引入函数，判断输入框输入的内容跟格式一不一样，将结果输出到DIV里显示，正确则用绿色显示，错误则用红色显示。

源码如下：

html部分：

<body>
    <h2>会员注册</h2>
    <form action="">
      用&#160;&#160;户&#160;&#160;名：<input
        type="text"
        class="userName"
        onchange="usName()"
      />
      <div>
        请输入4到20位由英文字母数字和下划线组成的字符串，且数组不能作为开头
      </div>
      <br />
      密&#160;&#160;&#160;&#160;&#160;&#160;&#160;码：<input
        type="password"
        class="passwrd1"
        onchange="pswrd1()"
      />
      <div>非空白字符6到20位</div>
      <br />
      确认密码：<input type="password" class="passwrd2" onchange="pswrd2()" />
      <div>重新输入密码</div>
      <br />
      <input type="submit" value="提交" />
    </form>
    </body>

css样式部分：

      div {
        display: inline-block;
      }
      input[type="text"],
      input[type="password"] {
        width: 200px;
      }
      input[type="submit"] {
        width: 100px;
        height: 30px;
        margin: 20px 0 0 120px;
      }

js部分：

var usn = document.getElementsByClassName("userName");
      var Pw1 = document.getElementsByClassName("passwrd1");
      var Pw2 = document.getElementsByClassName("passwrd2");
      var divUser = document.getElementsByTagName("div");
      // console.log(divUser);
      function usName() {
        var usn1 = usn[0].value;
        var usn2 = /[a-z A-Z _]{1}[a-z A-Z 0-9_]{3,19}/.test(usn1);
        if (usn2) {
          divUser[0].style.color = "green";
          divUser[0].innerHTML = "格式正确";
        } else {
          divUser[0].style.color = "red";
          divUser[0].innerHTML =
            "格式错误,请输入4到20位由英文字母数字和下划线组成的字符串，且数组不能作为开头";
        }
      }
      function pswrd1() {
        var pvalue = Pw1[0].value;
        var pvalue1 = /[a-z A-Z 0-9]{1}[a-z A-Z _ 0-9 ]{5,19}/.test(pvalue);
        if (pvalue1) {
          divUser[1].style.color = "green";
          divUser[1].innerHTML = "格式正确";
        } else {
          divUser[1].style.color = "red";
          divUser[1].innerHTML = "格式错误";
        }
      }
      function pswrd2() {
        var psvl1 = Pw1[0].value;
        var psvl2 = Pw2[0].value;
        if (psvl1 == psvl2) {
          divUser[2].style.color = "green";
          divUser[2].innerHTML = "密码正确";
        } else {
          divUser[2].style.color = "red";
          divUser[2].innerHTML = "密码不一致";
        }
      }

效果图：
在这里插入图片描述

Jacob.Dev

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
打赏
0
评论
Js实现简单的表单验证（小白篇）

用到的知识：1、BOM对象基本操作2、DOM对象基本操作3、正则表达式的运用及函数4、输入框光标事件代码分析：通过正则表达式基础和输入框光标事件，当鼠标移出输入框时引入函数，判断输入框输入的内容跟格式一不一样，将结果输出到DIV里显示，正确则用绿色显示，错误则用红色显示。源码如下：html部分：<body> <h2>会员注册</h2> <form action=""> 用&#160;&#160;户&
复制链接

扫一扫