您现在的位置是：网站首页> 编程资料编程资料

JavaScript实现表单验证案例_javascript技巧_

2023-05-24 277人已围观

简介 JavaScript实现表单验证案例_javascript技巧_

本文实例为大家分享了JavaScript实现表单验证的具体代码，供大家参考，具体内容如下

需求

有如下注册页面，对表单进行校验，如果输入的用户名、密码、手机号符合规则，则允许提交；如果不符合规则，则不允许提交。

完成以下需求：

1、当输入框失去焦点时，验证输入内容是否符合要求

2、当点击注册按钮时，判断所有输入框的内容是否都符合要求，如果不合符则阻止表单提交

环境准备

下面是初始页面

          欢迎注册          
         
             
欢迎注册
             已有帐号？登录         
         
                                                                                                                                                                                                                                                              
用户名                                                                                               
密码                                                                                               
手机号                                                                      
             
                              
             
         
     
    

验证输入框

此小节完成如下功能：

校验用户名。当用户名输入框失去焦点时，判断输入的内容是否符合 长度是 6-12 位 规则，不符合使id='username_err' 的span标签显示出来，给出用户提示。
校验密码。当密码输入框失去焦点时，判断输入的内容是否符合 长度是 6-12 位 规则，不符合使 id='password_err' 的span标签显示出来，给出用户提示。
校验手机号。当手机号输入框失去焦点时，判断输入的内容是否符合 长度是 11 位 规则，不符合使 id='tel_err'的span标签显示出来，给出用户提示。

代码如下：

//1. 验证用户名是否符合规则 //1.1 获取用户名的输入框 var usernameInput = document.getElementById("username"); //1.2 绑定onblur事件 失去焦点 usernameInput.onblur = function () {     //1.3 获取用户输入的用户名     var username = usernameInput.value.trim();     //1.4 判断用户名是否符合规则：长度 6~12     if (username.length >= 6 && username.length <= 12) {         //符合规则         document.getElementById("username_err").style.display = 'none';     } else {         //不合符规则         document.getElementById("username_err").style.display = '';     } } //1. 验证密码是否符合规则 //1.1 获取密码的输入框 var passwordInput = document.getElementById("password"); //1.2 绑定onblur事件 失去焦点 passwordInput.onblur = function() {     //1.3 获取用户输入的密码     var password = passwordInput.value.trim();     //1.4 判断密码是否符合规则：长度 6~12     if (password.length >= 6 && password.length <= 12) {         //符合规则         document.getElementById("password_err").style.display = 'none';     } else {         //不合符规则         document.getElementById("password_err").style.display = '';     } } //1. 验证手机号是否符合规则 //1.1 获取手机号的输入框 var telInput = document.getElementById("tel"); //1.2 绑定onblur事件 失去焦点 telInput.onblur = function() {     //1.3 获取用户输入的手机号     var tel = telInput.value.trim();     //1.4 判断手机号是否符合规则：长度 11     if (tel.length == 11) {         //符合规则         document.getElementById("tel_err").style.display = 'none';     } else {         //不合符规则         document.getElementById("tel_err").style.display = '';     } }

验证表单

当用户点击 注册 按钮时，需要同时对输入的 用户名、密码、手机号 ，如果都符合规则，则提交表单；如果有一个不符合规则，则不允许提交表单。实现该功能需要获取表单元素对象，并绑定 onsubmit 事件

//1. 获取表单对象 var regForm = document.getElementById("reg-form"); //2. 绑定onsubmit 事件 regForm.onsubmit = function () {      }

onsubmit 事件绑定的函数需要对输入的 用户名、密码、手机号 进行校验，这些校验我们之前都已经实现过了，这里我们还需要再校验一次吗？不需要，只需要对之前校验的代码进行改造，把每个校验的代码专门抽象到有名字的函数中，方便调用；并且每个函数都要返回结果来去决定是提交表单还是阻止表单提交，代码如下：

//1. 验证用户名是否符合规则 //1.1 获取用户名的输入框 var usernameInput = document.getElementById("username"); //1.2 绑定onblur事件 失去焦点 usernameInput.onblur = checkUsername; function checkUsername() {     //1.3 获取用户输入的用户名     var username = usernameInput.value.trim();     //1.4 判断用户名是否符合规则：长度 6~12     var flag = username.length >= 6 && username.length <= 12;     if (flag) {         //符合规则         document.getElementById("username_err").style.display = 'none';     } else {         //不合符规则         document.getElementById("username_err").style.display = '';     }     return flag; } //1. 验证密码是否符合规则 //1.1 获取密码的输入框 var passwordInput = document.getElementById("password"); //1.2 绑定onblur事件 失去焦点 passwordInput.onblur = checkPassword; function checkPassword() {     //1.3 获取用户输入的密码     var password = passwordInput.value.trim();     //1.4 判断密码是否符合规则：长度 6~12     var flag = password.length >= 6 && password.length <= 12;     if (flag) {         //符合规则         document.getElementById("password_err").style.display = 'none';     } else {         //不合符规则         document.getElementById("password_err").style.display = '';     }     return flag; } //1. 验证手机号是否符合规则 //1.1 获取手机号的输入框 var telInput = document.getElementById("tel"); //1.2 绑定onblur事件 失去焦点 telInput.onblur = checkTel; function checkTel() {     //1.3 获取用户输入的手机号     var tel = telInput.value.trim();     //1.4 判断手机号是否符合规则：长度 11     var flag = tel.length == 11;     if (flag) {         //符合规则         document.getElementById("tel_err").style.display = 'none';     } else {         //不合符规则         document.getElementById("tel_err").style.display = '';     }     return flag; }

而 onsubmit 绑定的函数需要调用 checkUsername() 函数、checkPassword() 函数、checkTel()函数。

//1. 获取表单对象 var regForm = document.getElementById("reg-form"); //2. 绑定onsubmit 事件 regForm.onsubmit = function () {     //挨个判断每一个表单项是否都符合要求，如果有一个不合符，则返回false     var flag = checkUsername() && checkPassword() && checkTel();     return flag; }

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

您可能感兴趣的文章:

上一篇：微信小程序开发WXML模板语法基础教程_javascript技巧_

下一篇：vue中img或元素背景图片无法显示或路径错误的解决_vue.js_

相关内容

点击排行

本栏推荐

猜你喜欢

-六神源码网