[JavaScript JQuery实现] 用你的方式来进行表单校验_jquery onblur事件校验姓名-优快云博客

本文链接：https://blog.youkuaiyun.com/solarl/article/details/90073743

表单简单校验的两种实现

写在前面
- 1. JavaScript 实现表单校验
- 2 . JQuery 实现表单校验
结束语

写在前面

本篇主要讲述如何实现简单的表单校验，通过 JavaScript 和 JQuery 两种方式来是实现。
主要通过 DOM 操作和触发事件以及简单的逻辑进行判断进而更好的实现。

1. JavaScript 实现表单校验

<1> 建立 form 表单

通过建立 form 表单确定 onsubmit 提交事件，绑定函数，进而实现相应的提交成功所应该满足的逻辑。
向 input 表单项确定唯一的 id，获取焦点事件 onfocus 、失去焦点事件 onblur 事件键盘按下释放事件 onkeyup 事件，当然获取焦点事件和失去焦点事件实现逻辑相同，只需绑定相同的逻辑即可绑定，并实现相关函数的逻辑。
每个 input 标签后跟随相应的 span 标签，到时通过 span 标签 id 获取元素，修改要给提示的内容。

<form action="https://blog.youkuaiyun.com/SolarL/article/details/89852420" onsubmit="return checkForm()">
   用户名：<input type="text" id="username" onfocus="showTips('span_username','用户名不能少于6位')" onblur="checkUsername()"
              onkeyup="checkUsername()"/><span id="span_username"></span><br/>
   密码：<input type="password" id="password" onfocus="showTips('span_password','密码不能少于6位')" onblur="checkPassword()"
             onkeyup="checkPassword()"/><span id="span_password"></span><br/>
   确认密码：<input type="password" id="repassword" onfocus="showTips('span_repassword','两次密码必须一致')"
               onblur="checkRepassword()"
               onkeyup="checkRepassword()"/><span id="span_repassword"></span><br/>
   邮箱：<input type="email" id="email" onfocus="showTips('span_email','邮箱格式必须正确')" onblur="checkMail()"
             onkeyup="checkMail()"/><span id="span_email"></span><br/>
   手机号：<input type="number"/><br/>
   <input type="submit" value="注册">
</form>

<2> 校验函数的实现

获取焦点
表单的获取焦点事件的实现逻辑基本是一样的，我们可以通过一个函数来实现，进而提高代码的复用性和简洁性，只需通过每个 span 标签的 id 获取到 span 标签，再通过 span.innerHTML 修改每个input 标签后 span 要给用户提示的·内容。

 <script>
       /*
           1. 确定事件 : onfocus
           2. 事件要驱动函数
           3. 函数要干一些事情: 修改span的内容
       */
       function showTips(spanId, msg) {
           var span = document.getElementById(spanId);
           span.innerHTML = msg;
       }
</script>

失去焦点事件和键盘输入释放事件
通过 document.getElementById(“每个表单输入项的id”).value 获取到用户输入的内容，再通过 document.getElementById("每个 span 标签的 id ") 来获取 span 后的元素，进而通过逻辑判断修改 span 标签的内容，通过用户输入的内容进行相应的提示。
当所有的校验函数返回结果均为 true 时，表单才能提交成功。

<script>
 /*
   		校验用户名:
   		1.事件: onblur  失去焦点
   		2.函数: checkUsername()
   		3.函数去显示校验结果
   		*/

       function checkUsername() {
           var username = document.getElementById("username").value;
           var span = document.getElementById("span_username");
           if (username.length < 6) {
               span.innerHTML = "<font color='red' size='2'>对不起，用户名太短不可用。</font>";
               return false;
           } else {
               span.innerHTML = "<font color='green' size='2'>恭喜您，用户名可用！</font>";
               return true;
           }
       }

       /*
       校验密码
       */
       function checkPassword() {
           var password = document.getElementById("password").value;
           var span = document.getElementById("span_password");
           if (password.length < 6) {
               span.innerHTML = "<font color='red' size='2'>对不起，您输入密码长度太短。</font>";
               return false;
           } else {
               span.innerHTML = "<font color='green' size='2'>恭喜您，密码可用！</font>";
               return true;
           }
       }

       function checkRepassword() {
           var password = document.getElementById("password").value;
           var rePassword = document.getElementById("repassword").value;
           var span = document.getElementById("span_repassword");
           if (password != rePassword) {
               span.innerHTML = "<font color='red' size='2'>对不起，两次密码输入不一致。</font>";
               return false;
           } else {
               span.innerHTML = "<font color='green' size='2'>两次密码输入一致</font>";
               return true;
           }
       }

       /*校验邮箱
       * */
       function checkEmail(strEmail) {
           var emailReg = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(\.[a-zA-Z0-9_-])+/;
           if (emailReg.test(strEmail)) {
               return true;
           }
           else {
               return false;
           }
       }

       function checkMail() {
           var email = document.getElementById("email").value;
           var span = document.getElementById("span_email");
           var flag = checkEmail(email);
           if (flag) {
               span.innerHTML = "<font color='green' size='2'>恭喜您，邮箱可用！！！</font>";
               return true;
           } else {
               span.innerHTML = "<font color='red' size='2'>对不起，邮箱输入有误。</font>";
               return false;
           }
       }
       /*是否提交成功*/
       function checkForm() {
           return checkUsername() && checkPassword() && checkRepassword() && checkMail();
       }
   </script>

<3> 完整代码展示

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>JavaScript表单校验</title>
   <script>
       /*
           1. 确定事件 : onfocus
           2. 事件要驱动函数
           3. 函数要干一些事情: 修改span的内容
       */
       function showTips(spanId, msg) {
           var span = document.getElementById(spanId);
           span.innerHTML = msg;
       }

       /*
   		校验用户名:
   		1.事件: onblur  失去焦点
   		2.函数: checkUsername()
   		3.函数去显示校验结果
   		*/

       function checkUsername() {
           var username = document.getElementById("username").value;
           var span = document.getElementById("span_username");
           if (username.length < 6) {
               span.innerHTML = "<font color='red' size='2'>对不起，您输入的用户名太短。</font>";
               return false;
           } else {
               span.innerHTML = "<font color='green' size='2'>恭喜您，用户名可用！</font>";
               return true;
           }
       }

       /*
       校验密码
       */
       function checkPassword() {
           var password = document.getElementById("password").value;
           var span = document.getElementById("span_password");
           if (password.length < 6) {
               span.innerHTML = "<font color='red' size='2'>对不起，您输入的密码长度太短。</font>";
               return false;
           } else {
               span.innerHTML = "<font color='green' size='2'>恭喜您，密码可用！</font>";
               return true;
           }
       }

       function checkRepassword() {
           var password = document.getElementById("password").value;
           var rePassword = document.getElementById("repassword").value;
           var span = document.getElementById("span_repassword");
           if (password != rePassword) {
               span.innerHTML = "<font color='red' size='2'>对不起，两次密码输入不一致。</font>";
               return false;
           } else {
               span.innerHTML = "<font color='green' size='2'>两次输入密码一致</font>";
               return true;
           }
       }

       /*校验邮箱
       * */
       function checkEmail(strEmail) {
           var emailReg = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(\.[a-zA-Z0-9_-])+/;
           if (emailReg.test(strEmail)) {
               return true;
           }
           else {
               return false;
           }
       }

       function checkMail() {
           var email = document.getElementById("email").value;
           var span = document.getElementById("span_email");
           var flag = checkEmail(email);
           if (flag) {
               span.innerHTML = "<font color='green' size='2'>恭喜您，邮箱可用！！！</font>";
               return true;
           } else {
               span.innerHTML = "<font color='red' size='2'>对不起，邮箱格式输入有误。</font>";
               return false;
           }
       }
       /*是否提交成功*/
       function checkForm() {
           return checkUsername() && checkPassword() && checkRepassword() && checkMail();
       }
   </script>
</head>
<body>
<form action="https://blog.youkuaiyun.com/SolarL/article/details/90073743" onsubmit="return checkForm()">
   用户名：<input type="text" id="username" onfocus="showTips('span_username','用户名不能少于6位')" onblur="checkUsername()"
              onkeyup="checkUsername()"/><span id="span_username"></span><br/>
   密码：<input type="password" id="password" onfocus="showTips('span_password','密码不能少于6位')" onblur="checkPassword()"
             onkeyup="checkPassword()"/><span id="span_password"></span><br/>
   确认密码：<input type="password" id="repassword" onfocus="showTips('span_repassword','两次密码必须一致')"
               onblur="checkRepassword()"
               onkeyup="checkRepassword()"/><span id="span_repassword"></span><br/>
   邮箱：<input type="email" id="email" onfocus="showTips('span_email','邮箱格式必须正确')" onblur="checkMail()"
             onkeyup="checkMail()"/><span id="span_email"></span><br/>
   手机号：<input type="number"/><br/>
   <input type="submit" value="注册">
</form>
</body>
</html>

2 . JQuery 实现表单校验

<1> 建立 form 表单

与之前不同的是，在表单中设置两个必填项，通过 class 类选择器定义两个必填项，之后方便绑定相同的事件以达到我们想要的相同效果，无需像之前在属性中设置过多 id 和事件及函数，使代码更加简洁。

<form action="https://blog.youkuaiyun.com/SolarL/article/details/89852420">
   <div>
       用户名:<input type="text" class="must" id="username"/>
   </div>
   <div>
       密码:<input type="password" class="must" id="password"/>
   </div>
   <div>
       手机号:<input type="tel"/>
   </div>
   <div>
       <input type="submit" value="注册"/>
   </div>
</form>

<2> 代码实现过程分析

首先，使用 JQuery 的方式实现必须先要导入 JQ 的文件，之后在文档加载事件里实现主要的逻辑代码。
其次，在文档加载事件里确定表单校验的事件，与之前一样，需要实现获取焦点事件、失去焦点事件、键盘输入抬起事件，此部分中我们将实现 JQ 方式的 DOM 操作和事件的链式编程，就如 Java 当中 StringBuffer 的 append 方法一样实现链式编程，JQ 中通过 triggerHandler 和 trigger 来触发当前要触发的事件，之后，要想知道用户当前输入的是哪一项就不同于之前的方式了，需要通过 $(this) 获取到当前输入项，再调用 is 方法中 id 来判断当前用户输入项 $(this).is("#表单中对应的id")，而这一项的输入值则需用 this.value 来获取。

   $(".must").blur(function () {
           //校验数据实现逻辑
       }).focus(function () {
           $(this).triggerHandler("blur");
       }).keyup(function () {
           $(this).triggerHandler("blur");
       })

在 DOM 操作上，要使每个必填项的后面添加一个小红点，则最好的方式就是通过类选择器实现，在我们建立 form 表单的时候我们就在必填项用户名和密码处将其定义为同一类 class=“must” 便于操作，只需通过类选择器获取到输入项之后，通过 DOM 操作中的外部插入 after 在必填项 input 后面添加一个标签结点，值得注意的是，在这里无法通过内部插入 append 方法添加，使用 append 方法添加效果是添加到 input 标签里，我们看不到任何效果，在此基础上，我们要实现每个输入项的表单提示校验信息，同时还要满足我们所添加的必填项小红点的位置不改变，则需要我们特别注意，通过 $(this) 获取到当前输入项，要是直接在其后 append 添加结点就再次发生与之前添加小红点一样的错误，没有任何效果，当然，有人会说，那就用 after 实现外部插入，但是呢，当我们使用 after 实现外部插入就会发现还是那么不尽人意，小红点跑到了提示信息的后面，与此同时，我们用鼠标点击输入框获取焦点，键盘输入信息再次出发事件，移走鼠标第三次触发失去焦点事件，这样下来就校验了三次数据，达到了我们的校验逻辑，但是我们会发现之后会显示三条提示信息，显然不是我们想看到的，这时我们就换一种方式了，通过获取到当前输入项的父节点 div ，然后在其后 append 内部添加结点来实现小红点位置不变，再通过 $(".formtips").remove() 清空上一次提示信息，这样才达到我们想要的效果。
不使用$(".formtips").remove() 清空上一次提示信息效果图
使用 $(this).after() 外部插入效果图
使用 $(this).parent().append()内部插入效果图
绑定提交事件
当用户点击注册按钮时，需要 trigger 触发获取焦点、失去焦点或键盘抬起事件中的一个来进行再一次的数据校验，防止用户在不输入任何信息的情况下直接点击注册，当错误信息为零时返回 true 表单提交成功。

<3> 完整代码实现

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JQuery 表单校验</title>
    <!--外部引入 css 样式-->
    <link rel="stylesheet" href="../css/style.css"/>
    <!--
        1. 首先给必填项,添加尾部添加一个小红点
        2. 获取用户输入的信息,做相应的校验
        3. 事件: 获得焦点, 失去焦点, 按键抬起
        4. 表单提交的事件

        Jq的方式来实现:
            1. 导入JQ的文件
            2. 文档加载事件: 在必填项后面加一个小红点
            3. 表单校验确定事件: blur focus keyup
            4. 提交表单 submit
	-->
    <script src="../js/jquery-1.11.0.js" type="text/javascript"></script>
    <script>
        $(function () {
            //动态在必填项后面添加小红点
            $(".must").after("<font class='high'>*</font>");
            //给必填项绑定事件
            $(".must").blur(function () {
                //获取用户当前输入的值
                var value = this.value;
                //清空上一次提示信息
                //$(this).parent().find(".formtips").remove();
                $(".formtips").remove();
                //判断当前值是哪一项输入的值
                //判断是否是用户名输入项
                if ($(this).is("#username")) {
                    if (value.length < 6) {
                        $(this).parent().append("<span class='formtips onError'>用户名小于6位不可用</span>")
                    } else {
                        $(this).parent().append("<span class='formtips onSuccess'>用户名可用</span>")

                    }
                }
                //判断是否是密码输入项
                if ($(this).is("#password")) {
                    if (value.length < 6) {
                        $(this).parent().append("<span class='formtips onError'>密码不低于6位</span>")
                    } else {
                        $(this).parent().append("<span class='formtips onSuccess'>密码可用</span>")

                    }
                }

            }).focus(function () {
                $(this).triggerHandler("blur");
            }).keyup(function () {
                $(this).triggerHandler("blur");
            })
            //给表单提交绑定事件
            $("form").submit(function () {
                //触发所有必填项的校验
                $(".must").trigger("focus");
                if ($(".onError").length == 0) {
                    return true;
                }
                return false;
            });
        });
        /* $(".must").blur(function () {
             //校验数据实现逻辑
         }).focus(function () {
             $(this).triggerHandler("blur");
         }).keyup(function () {
             $(this).triggerHandler("blur");
         })*/
    </script>
</head>
<body>
<form action="https://blog.youkuaiyun.com/SolarL/article/details/90073743">
    <div>
        用户名:<input type="text" class="must" id="username"/>
    </div>
    <div>
        密码:<input type="password" class="must" id="password"/>
    </div>
    <div>
        手机号:<input type="tel"/>
    </div>
    <div>
        <input type="submit" value="注册"/>
    </div>
</form>
</body>
</html>

外部引入 css 样式

// style.css
body { font:12px/19px Arial, Helvetica, sans-serif; color:#666;}
form div { margin:5px 0;}
.int label { float:left; width:100px; text-align:right;}
.int input { padding:1px 1px; border:1px solid #ccc;height:16px;}
.sub { padding-left:100px;}
.sub input { margin-right:10px; }
.formtips{width: 200px;margin:2px;padding:2px;}
.onError{
   background:#FFE0E9 url(../img/reg3.gif) no-repeat 0 center;
   padding-left:25px;
}
.onSuccess{
   background:#E9FBEB url(../img/reg4.gif) no-repeat 0 center;
   padding-left:25px;
}
.high{
   color:red;
}

校验提示图标

结束语

小哥哥，小姐姐们，长得这么好看的你，觉得文章还不错就关注我吧，顺便给我点个赞鼓励一下吧，哈哈哈哈哈…
在这里插入图片描述