需求

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

    <form id="reg-form" action="#" method="post">

        用户名：<input type="text" name="username" id="username"><br>

        <span id="username_err" class="err_msg" style="display: none">用户名输入有误</span><br>

          密码：<input type="password" name="password" id="password"><br>

        <span id="password_err" class="err_msg" style="display: none">密码输入有误</span><br>

        <input type="submit">

    </form>

    <script>

        // 1. 验证用户名是否符合规则

        // 1.1 获取用户名的输入框

        var usernameInput = document.getElementById("username");

        // 1.2 绑定onblur事件  失去焦点

        usernameInput.onblur = checkUsername;

        function checkUsername(){

            // 1.3 获取用户输入的用户名

            var username = usernameInput.value.trim(); //去除空格

            var flag1 = username.length >= 6 && username.length <= 12;

            // 1.4 判断用户名是否符合规则，长度6-12

            if(flag1){

                document.getElementById("username_err").style.display = "none";

            }else{

                document.getElementById("username_err").style.display = "";

            }

            return flag1;

        }

        // 1. 验证密码是否符合规则

        // 1.1 获取密码的输入框

        var passwordInput = document.getElementById("password");

        // 1.2 绑定onblur事件  失去焦点

        passwordInput.onblur = checkPassword;

            function checkPassword(){

            // 1.3 获取用户输入的密码

            var password = passwordInput.value.trim(); //去除空格

            var flag2 = password.length >= 6 && password.length <= 12;

            // 1.4 判断密码是否符合规则，长度6-12

            if(flag2){

                document.getElementById("password_err").style.display = "none";

            }else{

                document.getElementById("password_err").style.display = "";

            }

            return flag2;

        }

        // 提交验证

        // 1. 获取表单对象

        var regForm = document.getElementById("reg-form");

        // 2. 绑定 onsubmit 事件

        regForm.onsubmit = function (){

            // 挨个判断每一个表单项是否都符合要求，如果有一个不符合，则返回false

            return  checkPassword() && checkUsername();

        }

    </script>

</body>

</html>

JavaScript——案例-表单验证的更多相关文章

第一百五十四节，封装库--JavaScript，表单验证--提交验证
封装库--JavaScript,表单验证--提交验证将表单的所有必填项,做一个判断函数,填写正确时返回布尔值最后在提交时,判断每一项是否正确,全部正确才可以提交 html <div id= ...
第一百五十三节，封装库--JavaScript，表单验证--备注字数验证
封装库--JavaScript,表单验证--备注字数验证效果图 html <div id="reg"> <h2 class="tuo"> ...
第一百五十二节，封装库--JavaScript，表单验证--年月日注入
封装库--JavaScript,表单验证--年月日注入效果图 html <div id="reg"> <h2 class="tuo"> ...
第一百五十一节，封装库--JavaScript，表单验证--密码确认验证--回答验证--电子邮件验证加自动补全
封装库--JavaScript,表单验证--密码确认验证--回答验证--电子邮件验证加自动补全效果图 html <div id="reg"> <h2 class ...
第一百五十节，封装库--JavaScript，表单验证--密码验证
封装库--JavaScript,表单验证--密码验证效果图 html <div id="reg"> <h2 class="tuo">& ...
第一百四十九节，封装库--JavaScript，表单验证--验证用户名
封装库--JavaScript,表单验证--验证用户名注册验证功能,顾名思义就是验证表单中每个字段的合法性,如果全部合法才可以提交表单. 效果图聚集光标时信息不合法是信息合法时 html &l ...
JavaScript：综合案例-表单验证
综合案例:表单验证开发要求: 要求定义一个雇员信息的增加页面,例如页面名称为"emp_add.htmnl",而后在此页面中要提供有输入表单,此表单定义要求如下: .雇员编号:必须 ...
JavaScript：表单验证模型
之前做的验证提示以弹框的形式出现太丑陋了,不符合标准的验证提示.如果要想进行更好的数据验证操作,那么必须进行一些模块化设计,通过表单样式的改变来提示.其实,一般的数据验证无非就是那么几种,例如: 大多 ...
JavaScript常用表单验证正则表达式（身份证、电话号码、邮编、日期、IP等）
身份证正则表达式 //身份证正则表达式(15位)isIDCard1=/^[1-9]\d{7}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}$/;//身份证正则表达式 ...
JavaScript之表单验证讲解
JavaScript 可用来在数据被送往服务器前对 HTML 表单中的这些输入数据进行验证. JavaScript 表单验证 JavaScript 可用来在数据被送往服务器前对 HTML 表单中的这些 ...

随机推荐

C# 实现Eval(字符串表达式)的三种方法
一.背景假如给定一个字符串表达式"-12 * ( - 2.2 + 7.7 ) - 44 * 2",让你计算结果,熟悉JavaScript的都知道有个Eval函数可以直接进行计算, ...
TIER 2: Oopsie
TIER 2: Oopsie Web 渗透此次靶机结合前面知识,非常简单: nmap 扫描,发现 22 和 80 端口开放服务 80 的 HTTP 服务之后使用继续 Web 渗透: 使用 Wap ...
深入探究 Golang 反射：功能与原理及应用
Hi 亲爱的朋友们,我是 k 哥.今天,咱们来一同探讨下 Golang 反射. Go 出于通用性的考量,提供了反射这一功能.借助反射功能,我们可以实现通用性更强的函数,传入任意的参数,在函数内通过反射 ...
使用 useNuxtData 进行高效的数据获取与管理
title: 使用 useNuxtData 进行高效的数据获取与管理 date: 2024/7/22 updated: 2024/7/22 author: cmdragon excerpt: 深入讲解 ...
前端使用 Konva 实现可视化设计器（18）- 素材嵌套 - 加载阶段
本章主要实现素材的嵌套(加载阶段)这意味着可以拖入画布的对象,不只是图片素材,还可以是嵌套的图片和图形. 请大家动动小手,给我一个免费的 Star 吧~ 大家如果发现了 Bug,欢迎来提 Issue ...
【Eclipse】下载安装（Windows）
Eclipse的下载和安装官网地址:https://www.eclipse.org/downloads/ 刚用的时候选了安装版,然后安装到一半就失败了建议点下面的解压包下载,解压即用注意看框线的 ...
python之理解super及MRO列表（示例版）
例子 1: class A0: def pri(self): super().pri() print("A0") class A1(A0): def pri(self): su ...
使用MindSpore_hub 进行加载模型用于推理或迁移学习
从官方资料: https://www.mindspore.cn/tutorial/training/zh-CN/r1.2/use/save_model.html?highlight=save_chec ...
NVIDIA公司推出的GPU运行环境下的机器人仿真环境（NVIDIA Isaac Gym）—— 到底实现了什么功能，意义价值又是什么？？？
相关内容: NVIDIA公司推出的GPU运行环境下的机器人仿真环境(NVIDIA Isaac Gym)的安装--强化学习的仿真训练环境 ================================ ...

JavaScript——案例-表单验证

需求

JavaScript——案例-表单验证的更多相关文章

随机推荐

热门专题