JS 表单验证

点击注册的时候,渲染出来,验证码是自动获取出来的

html:

 <div class="div1">用户名<input type="text" id="yhm"><span id="span1"></span><br>密码<input type="password" id="mm"><span id="span2"></span><br>Email<input type="email" id="ema"><span id="span3"></span><br>手机号<input type="text" id="sjh"><span id="span4"></span><br>验证码<input type="text" id="yzm" maxlength="4"><span id="span5"></span><br><button id="btn">注册</button></div><p id="p1"></p>

script:

<script>// 用户名验证document.getElementById("yhm").addEventListener("blur", function () {var username = this.value;var spanElement = document.getElementById("span1");var usernameRegex = /^[a-zA-Z0-9]{3,6}$/;if (usernameRegex.test(username)) {spanElement.innerHTML = '√';} else {spanElement.innerHTML = '×';}});// 密码验证document.getElementById("mm").addEventListener("blur", function () {var password = this.value;var spanElement = document.getElementById("span2");if (password.length >= 6 && password.length <= 16) {spanElement.innerHTML = '√';} else {spanElement.innerHTML = '×';}});// Email验证document.getElementById("ema").addEventListener("blur", function () {var email = this.value;var spanElement = document.getElementById("span3");var emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;if (emailRegex.test(email)) {spanElement.innerHTML = '√';} else {spanElement.innerHTML = '×';}});// 手机号验证document.getElementById("sjh").addEventListener("blur", function () {var phoneNumber = this.value;var spanElement = document.getElementById("span4");var phoneRegex = /^1\d{10}$/;if (phoneRegex.test(phoneNumber)) {spanElement.innerHTML = '√';} else {spanElement.innerHTML = '×';}});// 生成验证码function generateCaptcha() {var captcha = "";var characters = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";for (var i = 0; i < 4; i++) {captcha += characters.charAt(Math.floor(Math.random() * characters.length));}return captcha;}// 显示验证码document.getElementById("yzm").value = generateCaptcha();// 注册按钮点击事件document.getElementById("btn").addEventListener("click", function () {var p1Element = document.getElementById("p1");var yhmInput = document.getElementById("yhm").value;var mmInput = document.getElementById("mm").value;var emaInput = document.getElementById("ema").value;var sjhInput = document.getElementById("sjh").value;var yzmInput = document.getElementById("yzm").value;p1Element.innerHTML = "用户名:" + yhmInput + "<br>" +"密码:" + mmInput + "<br>" +"Email:" + emaInput + "<br>" +"手机号:" + sjhInput + "<br>" +"验证码:" + yzmInput;});

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

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

相关文章

《Git版本控制管理》笔记

第三章 起步 git --version查看版本号git --help查看帮助文档裸双破折号分离参数 git diff -w master origin – tools/Makefile将当前目录或任何目录转化为Git版本库 git init 初始化之后项目目录中&#xff0c;有名为.git的文件git status 查看git状态git commit 提供日志消…

贪心算法|135.分发糖果

力扣题目链接 class Solution { public:int candy(vector<int>& ratings) {vector<int> candyVec(ratings.size(), 1);// 从前向后for (int i 1; i < ratings.size(); i) {if (ratings[i] > ratings[i - 1]) candyVec[i] candyVec[i - 1] 1;}// 从后…

格式化字符串漏洞原理及其利用(附带pwn例题讲解)

写在前面&#xff1a; 本篇博客为本人原创&#xff0c;但非首发&#xff0c;首发在先知社区 原文链接&#xff1a; https://xz.aliyun.com/t/14253?time__1311mqmx9QiQi%3D0%3DDQoDsNOfptD8nDCFdNNK4D&alichlgrefhttps%3A%2F%2Fxz.aliyun.com%2Fu%2F74789各位师傅有兴趣…

JQuery(三)---【使用JQuery动态设置浏览器窗口尺寸、JQuery的遍历】

零.前言 JQuery(一)---【JQuery简介、安装、初步使用、各种事件】-CSDN博客 JQuery(二)---【使用JQuery对HTML、CSS进行操作】-CSDN博客 一.JQuery动态设置浏览器窗口尺寸大小 1.1width()和height()方法 width()&#xff1a;设置或者返回元素的宽度(不包括内边距、边框或外…

React - 你知道在React组件的哪个阶段发送Ajax最合适吗

难度级别:中级及以上 提问概率:65% 如果求职者被问到了这个问题,那么只是单纯的回答在哪个阶段发送Ajax请求恐怕是不够全面的。最好是先详细描述React组件都有哪些生命周期,最后再回过头来点题作答,为什么应该在这个阶段发送Ajax请求。那…

智慧校园预付费水电表控制系统

在智慧校园建设中&#xff0c;预付费水电表控制系统成为了不可或缺的一部分&#xff0c;它采用了先进的信息技术手段确保校园水电资源的高效管理和使用。这种系统通过智能化、信息化的手段&#xff0c;不仅优化了能源管理&#xff0c;还大幅提升了校园管理的现代化水平。本文将…

FPGA(Verilog)实现uart传输协议传输数据(含仿真)

目录 实现功能&#xff1a; 1.接收uart串行数据&#xff0c;输出并行数据(1byte)。 2.输入并行数据(1byte)&#xff0c;输出uart串行数据。 3.完成uart传输的1次环回。 uart协议的1帧数据传输 模块封装-port设置 Verilog代码实现 1.uart接收模块:接收串行数据,输出并行数…

开源区块链系统/技术 总结(欢迎补充,最新)

1. FISCO BCOS FISCO BCOS 2.0 技术文档 — FISCO BCOS 2.0 v2.9.0 文档https://fisco-bcos-documentation.readthedocs.io/ 2. ChainMaker&#xff08;长安链&#xff09; 文档导航 — chainmaker-docs v2.3.2 documentationhttps://docs.chainmaker.org.cn/v2.3.2/html/in…

Java事件处理机制

一、介绍 java事件处理是采取“委派事件模型”。当事件发生时&#xff0c;产生事件的对象&#xff0c;会把此“信息”传递给"事件的监听者"处理&#xff0c;这里所说的"信息"实际上就是java.awt.event事件类库里某个类所创建的对象&#xff0c;把它称为&q…

以XX大学学生公寓为例的安科瑞远程抄表与配电能效系统解决方案【AcrelEMS-EDU校园综合能效管理】

建设背景 随着我国经济的高速发展&#xff0c;建筑能耗特别是国家机关办公建筑和大型公共建筑高耗能的问题日益突出。学校作为大型公共机构建筑的重要组成部分之一&#xff0c;其特点是占地面积大、建筑分布广、数量多、类型多样、用能情况复杂&#xff1b; 高校用能普遍问题…

【linux】拓展知识-linux图形界面(GUI 程序)、X11介绍

linux图形界面 Linux 本身是没有图形化界面的&#xff0c;linux只是一个基于命令行的操作系统&#xff0c;所谓的图形化界面系统只不过中 Linux 下的应用程序。没有图形界面linux还是linux&#xff0c;很多装linux的WEB服务器就根本不装X服务器。 这一点和 Windows 不一样。W…

Linux C柔性数组(零长数组)

零长数组&#xff0c;大小为0&#xff0c;一般用在结构体中&#xff08;网络通信&#xff0c;省流&#xff09;&#xff0c;节省空间&#xff0c;方便善后&#xff08;相对于指针类型&#xff09;&#xff0c;我们通过具体例子进行理解。 常规定长数组 #include <stdio.h&…

【机器学习】深入解析机器学习基础

在本篇深入探讨中&#xff0c;我们将揭开机器学习背后的基础原理&#xff0c;这不仅包括其数学框架&#xff0c;更涵盖了从实际应用到理论探索的全方位视角。机器学习作为数据科学的重要分支&#xff0c;其力量来源于算法的能力&#xff0c;这些算法能够从数据中学习并做出预测…

CentOS下部署ftp服务

要在linux部署ftp服务首先需要安装vsftpd服务 yum install vsftpd -y 安装完成后需要启动vsftpd服务 systemctl start vsftpd 为了能够访问ftp的端口&#xff0c;需要在防火墙中开启ftp的端口21&#xff0c;否则在使用ftp连接的时候会报错No route to host. 执行如下命令为f…

纯纯python实现梯度下降、随机梯度下降

最近面试有要求手撕SGD&#xff0c;这里顺便就把梯度下降、随机梯度下降、批次梯度下降给写出来了 有几个注意点&#xff1a; 1.求梯度时注意label[i]和pred[i]不要搞反&#xff0c;否则会导致模型发散 2.如果跑了几千个epoch&#xff0c;还是没有收敛&#xff0c;可能是学习率…

基于逻辑回归和支持向量机的前馈网络进行乳腺癌组织病理学图像分类

CNN&#xff08;卷积神经网络&#xff09;通过使用反向传播方法来学习特征&#xff0c;这种方法需要大量的训练数据&#xff0c;并且存在梯度消失问题&#xff0c;从而恶化了特征学习。 CNN卷积神经网络 CNN由一个多层神经网络组成&#xff0c;该网络从标记的训练数据集中学习…

HarmonyOS实战开发-使用OpenGL实现2D图形绘制和动画。

介绍 基于XComponent组件调用Native API来创建EGL/GLES环境&#xff0c;从而使用标准OpenGL ES进行图形渲染。本项目实现了两个示例&#xff1a; 使用OpenGL实现2D的图形绘制和动画&#xff1b;使用OpenGL实现了在主页面绘制两个立方体&#xff0c;光源可以在当前场景中移动&…

从高频到低频:全面解析压控振荡器结构与应用场景

压控振荡器&#xff08;简称VCO&#xff09;是一种电子电路&#xff0c;其特点是输出的振荡频率能够随着输入电压的变化而连续改变。在VCO中&#xff0c;通过调控输入端的电压信号&#xff0c;可以相应地改变内部谐振电路的参数&#xff08;如电感、电容或者变容二极管的电容值…

【智能算法】人工电场算法(AEFA)原理及实现

目录 1.背景2.算法原理2.1算法思想2.2算法过程 3.结果展示4.参考文献 1.背景 2019年&#xff0c;A Yadav等人受库伦定律和运动定律启发&#xff0c;提出了人工电场算法&#xff08;Artificial Electric Field Algorithm&#xff0c;AEFA&#xff09;。 2.算法原理 2.1算法思…

【Spring Cloud】服务容错中间件Sentinel入门

文章目录 什么是 SentinelSentinel 具有以下特征&#xff1a;Sentinel分为两个部分: 安装 Sentinel 控制台下载jar包&#xff0c;解压到文件夹启动控制台访问了解控制台的使用原理 微服务集成 Sentinel添加依赖增加配置测试用例编写启动程序 实现接口限流总结 欢迎来到阿Q社区 …