JavaScript实现简单的表单验证

关键代码:

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>/* 不可用 */.btn-disable {width: 100px;height: 40px;background-color: rgba(255, 0, 0, 0.4);color: #fff;border: 0 none;cursor: pointer;}.btn-able {width: 100px;height: 40px;background-color: rgba(255, 0, 0, 1);color: #fff;border: 0 none;cursor: pointer;}span {display: none;}</style>
</head><body><form action="./06小米左侧导航栏.html" method="GET" onsubmit="return disForm()"><p> <label for="">用户名:</label><input type="text" name="user" id="txt1"><span id="txt1tip">*用户名不能为空(8-12)位数字和字母组合</span></p><p> <label for="">密&nbsp;&nbsp;码:</label><input type="password" name="pwd1" id="txt2"><span id="txt2tip">*密码为6位数字</span></p><p> <label for="">重复密码:</label><input type="password" name="pwd2" id="txt3"><span id="txt3tip">*两次输入密码要一致</span></p><p> <label for="">电话:</label><input type="text" name="tel" id="txt4"><span id="txt4tip">请输入正确手机号</span></p><p><input type="checkbox" id="cbx">同意****协议</p><input type="submit" value="注册" class="btn-disable" id="btn"></form><script>var txt1 = document.querySelector('#txt1');var cbx = document.querySelector('#cbx');var btn = document.querySelector('#btn');function disForm() {return checkuser() && checkpwd() && checkpwds() && checktel() && change();}// // 校验用户名function checkuser() {var v1 = txt1.value;var reg = /^\w{8,12}$/ig;if (reg.test(v1)) {txt1tip.style.display = 'none';return true;} else {txt1tip.style.display = 'block';txt1tip.style.color = 'red';return false;}}// 校验密码function checkpwd() {var v2 = txt2.value;var reg1 = /^\d{6}$/ig;if (reg1.test(v2)) {txt2tip.style.display = 'none';return true;} else {txt2tip.style.display = 'block';txt2tip.style.color = 'red';return false;}}// 校验重复密码function checkpwds() {var v2 = txt2.value;var v3 = txt3.value;// var reg1 = /^\d{6}$/ig;if (v2 === v3) {txt3tip.style.display = 'none';return true;} else {txt3tip.style.display = 'block';txt3tip.style.color = 'red';return false;}}//  校验电话,电话是选填function checktel() {var v4 = txt4.value;// var v3 = txt3.value;var reg3 = /^[1][3-9]\d{9}$/;if (reg3.test(v4) || v4.trim().length == 0) {txt4tip.style.display = 'none';return true;} else {txt4tip.style.display = 'block';txt4tip.style.color = 'red';return false;}}cbx.addEventListener('change', function () {if (cbx.checked) {btn.classList.remove('btn-disable');btn.classList.add('btn-able');btn.disabled = false;} else {btn.classList.remove('btn-able');btn.classList.add('btn-disable');btn.disabled = true;}});</script>
</body></html>

 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/757680.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

ChatGPT在大气科学领域建模、数据分析、可视化与资源评估中的高效应用及论文写作

深度探讨人工智能在大气科学中的应用&#xff0c;特别是如何结合最新AI模型与Python技术处理和分析气候数据。课程介绍包括GPT-4等先进AI工具&#xff0c;旨在帮助学员掌握这些工具的功能及应用范围。课程内容覆盖使用GPT处理数据、生成论文摘要、文献综述、技术方法分析等实战…

[Linux]设置脚本运行错误立即退出

一、简介 工作中常需要在linux环境下使用shell脚本自动化运行多条命令&#xff0c;在顺序执行多条命令时&#xff0c;需要在前一条命令运行失败时立刻结束脚本&#xff0c;停止运行接下来的其他命令。 本文介绍了三种实现该目标的方法&#xff0c;分别是&#xff1a;使用&…

HTML案例-1.标签练习

效果 源码 <!DOCTYPE html> <html lang"zh-CN"> <head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1.0"><title>Document</title> </head&g…

ParaView的远程模式操作(亲测有效)

ParaView的远程模式 OpenFOAM用户一定要用过ParaView可视化软件&#xff0c;这个软件可以方便地读取OpenFOAM的数据进行种类丰富的可视化操作。用ParaView可视化OpenFOAM数据很简单&#xff0c;只需要在算例目录下运行即可paraFoam&#xff08;注一&#xff09;但是&#xff0c…

物资管理系统建设方案

二、 项目概述 2.1 项目背景 2.2 现状分析 2.2.1 业务现状 2.2.2 系统现状 三、 总体需求 3.1 系统范围 3.2 系统功能 3.3 用户分析 3.4 假设与依赖关系 四、 功能需求 五、 非功能性需求 5.1 用户界面需求 5.2 软硬件环境需求 5.3 产品质量需求 5.4 接口需求 …

高效文件管理,批量复制文件夹名称 ,轻松提升工作效率

在信息爆炸的时代&#xff0c;电脑中的文件夹数量与日俱增&#xff0c;管理和整理这些文件夹成为一项繁琐的任务。您是否曾因为需要复制大量文件夹的名称而感到苦恼&#xff1f;现在&#xff0c;我们为您带来了一款能够一键批量复制文件夹名称的神奇工具&#xff0c;让您的效率…

centos安装docker-compose

centos安装docker-compose 1 查看Docker版本2 选择docker-compose版本3 安装4 添加可执行权限5 测试6 卸载7 运行项目 1 查看Docker版本 docker version2 选择docker-compose版本 docker-compose官网地址&#xff1a;Compose file version 3 reference | Docker Documentatio…

Python实战:数据清洗与预处理

一、引言 在机器学习和数据科学项目中&#xff0c;数据清洗与预处理是至关重要的一步。数据清洗是指识别和纠正数据集中的错误或不一致之处&#xff0c;数据预处理则包括对数据进行转换、归一化、编码等操作&#xff0c;以便更好地适用于机器学习算法。Python作为一门流行的编…

在SAP BAS中创建你的第一个Fiori项目

1. 前言 本文将通过step by step的方式介绍如何在SAP Business Studio中创建一个Fiori项目&#xff0c;并通过Mock Data启动Fiori应用程序。 2. Demo Step1: 登录BAS并创建Dev Space Step2: 进入创建好的Dev Space&#xff0c;通过Get Started页面&#xff0c;选择New Projec…

STM32-DMA数据转运

DMA进行转运的条件 1&#xff1a;开关控制&#xff0c;DMA_CMD必须使能2&#xff1a;传输计数器必须大于03&#xff1a;触发源必须有触发的信号

Zookeeper(五)Zokeeper 环境搭建与Curator使用

目录 一 环境搭建1.1 单机环境搭建1.2 可视化工具ZooKeeper Assistant1.3 集群环境搭建 二 常用命令1.1 命令行语法1.2 数据节点信息1.3 节点类型 三 CuratorAPI使用3.1 依赖3.1 创建会话3.2 基本使用增删改查3.3 ACL权限控制3.4 分布式锁3.5 分布式计数器3.6 分布式Barrier3.7…

婴儿洗衣机硬核测评:希亦、鲸立、小吉婴儿洗衣机性能大比拼!

如果你非常注重婴儿衣物的卫生问题&#xff0c;那么婴儿洗衣机则是非常理想的选择。毕竟&#xff0c;在婴儿吃奶或者接触其他材料时&#xff0c;其抵抗力是比较弱的&#xff0c;再加上普通洗衣机无法对婴儿的衣物进行有效的消毒处理&#xff0c;轻则会对婴儿的健康造成威胁&…

基于 HBase Phoenix 构建实时数仓(5)—— 用 Kafka Connect 做实时数据同步

目录 一、总体架构 二、安装配置 MySQL 1. 创建 mysql 用户 2. 建立 MySQL 使用的目录 3. 解压安装包 4. 配置环境变量 5. 创建 MySQL 配置文件 6. MySQL 系统初始化 7. 启动 mysql 服务器 8. 创建 dba 用户 三、配置 MySQL 主从复制 四、安装部署 Kafka Connector…

密码学——传统加密技术和公钥加密

传统加密技术和公开密钥 传统加密技术基本概念基本原理公开密钥基本概念基本原理传统加密技术 传统加密,即对称加密或称之为单钥加密,是公钥加密技术出现之前的主流加密技术,甚至在现在,仍然具有广泛应用。 基本概念 回顾一下一些基本概念: 明文,原始的消息和数据,也…

gin | gin环境搭建与示例工程

要安装Gin软件包&#xff0c;需要先安装Go并设置Go工作区。 1. 下载并安装 gin&#xff1a; go get -u github.com/gin-gonic/gin 2. 将 gin 引入到代码中&#xff1a; import "github.com/gin-gonic/gin" 3. (可选) 如果使用诸如 http.StatusOK 之类的常量&a…

23.python标准库之turtle库

一、窗体函数 turtle.setup(width, height, startx, starty) width:窗口宽度 height:窗口高度 startx:窗口与屏幕左侧距离&#xff08;单位象素&#xff09; starty:窗口与屏幕顶部距离&#xff08;单位象素&#xff09; 二、画笔状态函数 三、画笔运动函数

Java字符串精通之旅:从新手到专家

目录 一、字符串的创建 1.直接赋值 2.使用构造方法 二、字符串不可变性 三、常用操作 1.字符串长度 2.连接字符串 3.格式化字符串 四、示例代码&#xff1a;String类应用 五、String中常用的方法 在Java编程世界里&#xff0c;字符串无疑是最常用的数据类型之一。不论…

想要把PDF文件转TXT文本编辑改动怎么办?三秒钟帮你搞定 PDF编辑器

pdf是一种便携文件格式&#xff0c;是由Adobe公司所开发的独特的跨平台文件格式。PDF文件以PostScript语言图象模型为基础&#xff0c;无论在哪种打印机上都可保证精确的颜色和准确的打印效果&#xff0c;即PDF会忠实地再现原稿的每一个字符、颜色以及图象。有点遗憾的是&#…

golang实现循环队列

思路&#xff1a; 基于数组实现。当容量为k时&#xff0c;我们初始化一个容量为k1的数组arr&#xff0c;方便区分队列空和满。 当rearfront时&#xff0c;判断队列为空&#xff1b; 当(rear1) % len(arr) front时&#xff0c;判断队列为满&#xff1b; package mainimport (&…

【好用】Star超36.8k,一个的免费通用数据库管理工具

关于数据库管理工具&#xff0c;大家可能都在用SQLyog、Navicat、MySQL-Front、SQL Studio、MySQL Workbench等等&#xff0c;这些管理工具不是不好用&#xff0c;就是要变魔术才可以用&#xff0c;今天 V 哥给大家推荐一个即好用&#xff0c;又免费的可视化通用数据库管理工具…