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.rhkb.cn/news/302405.html

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

相关文章

一起学习python——基础篇(10)

前言&#xff0c;Python 是一种面向对象的编程语言。以前大学读书的时候经常开玩笑说的一句话“如果没有对象&#xff0c;就new一个”。起因就是编程老师上课时经常说一句“首先&#xff0c;我们new一个对象”。 今天讲一下python的类和对象。 类是什么&#xff1f;它是一种用…

外包干了25天,技术退步明显.......

先说一下自己的情况&#xff0c;大专生&#xff0c;18年通过校招进入杭州某软件公司&#xff0c;干了接近4年的功能测试&#xff0c;今年年初&#xff0c;感觉自己不能够在这样下去了&#xff0c;长时间呆在一个舒适的环境会让一个人堕落! 而我已经在一个企业干了四年的功能测…

【运输层】TCP 的可靠传输是如何实现的?

目录 1、发送和接收窗口&#xff08;滑动窗口&#xff09; &#xff08;1&#xff09;滑动窗口的工作流程 &#xff08;2&#xff09;滑动窗口和缓存的关系 &#xff08;3&#xff09;滑动窗口的注意事项 2、如何选择超时重传时间 &#xff08;1&#xff09;加权平均往返…

爬虫 BeautifulSoup模块

爬虫 BeautifulSoup模块 【一】介绍 【1】说明 BeautifulSoup库是python的一个第三方库&#xff0c;主要用于处理HTML和XML文档他提供了一些简单的、python式的函数来解析、导航、搜索以及修改分析树&#xff0c;使得从网页抓取的数据变得简单高效BeautifulSoup自动将输入文…

ctfshow web入门 命令执行 web53--web77

web53 日常查看文件 怎么回事不让我看十八 弄了半天发现并不是很对劲&#xff0c;原来我发现他会先回显我输入的命令再进行命令的回显 ?cnl${IFS}flag.php||web54 绕过了很多东西 基本上没有什么命令可以用了但是 grep和?通配符还可以用 ?cgrep${IFS}ctfshow${IFS}???…

BFS宽度优先搜索例题(蓝桥杯)——逃跑的牛

问题描述&#xff1a; 农夫John的一头牛逃跑了&#xff0c;他想要将逃跑的牛找回来。现假设农夫John和牛的位置都在一条直线上&#xff0c;农夫John的初始位置为N&#xff08;0≤N≤100,000&#xff09;&#xff0c;牛的初始位置为K&#xff08;0≤K≤100,000&#xff09;。农夫…

R语言数据操纵:常用函数

目录 处理循环的函数 lapply函数 apply函数 mapply函数 tapply函数 split函数 排序的函数 sort函数与order函数 总结数据信息的函数 head函数与tail函数 summary函数 str函数 table函数 any函数 all函数 xtab函数 object.size函数 这篇文章主要介绍R语言中处理…

APP测试面试题详解

&#x1f345; 视频学习&#xff1a;文末有免费的配套视频可观看 &#x1f345; 关注公众号【互联网杂货铺】&#xff0c;回复 1 &#xff0c;免费获取软件测试全套资料&#xff0c;资料在手&#xff0c;涨薪更快 一、基础篇 1、请介绍一下&#xff0c;APP测试流程&#xff1f…

【算法统治世界】动态规划 个人笔记总结

&#x1f389;&#x1f389;欢迎光临&#x1f389;&#x1f389; &#x1f3c5;我是苏泽&#xff0c;一位对技术充满热情的探索者和分享者。&#x1f680;&#x1f680; &#x1f31f;特别推荐给大家我的最新专栏《数据结构与算法&#xff1a;初学者入门指南》&#x1f4d8;&am…

分布式主键ID生成策略

业务系统对分布式ID的要求 唯一性&#xff1a;在分布式系统中&#xff0c;每个节点都需要生成唯一的标识符来确保数据的唯一性。传统的单点生成ID方式无法满足分布式环境下的需求&#xff0c;而分布式ID能够在整个系统中保证每个节点生成的ID都是唯一的。 顺序性&#xff1a;某…

CSS设置网页颜色

目录 前言&#xff1a; 1.颜色名字&#xff1a; 2.十六进制码&#xff1a; 3.RGB&#xff1a; 4.RGBA&#xff1a; 5.HSL&#xff1a; 1.hue&#xff1a; 2.saturation&#xff1a; 3.lightness&#xff1a; 6.HSLA&#xff1a; 前言&#xff1a; 我们在电脑显示器&…

Linux 多线程

目录 初识线程 线程的概念 Linux下的线程 线程优缺点 线程控制 线程创建 线程终止 线程等待 线程分离 线程取消 其它 线程互斥 互斥的概念 互斥锁的使用 锁的本质 线程同步 线程同步的概念 条件变量的概念 条件变量的使用 信号量 信号量的概念 信号量接口…

007 CSS的继承和层叠 元素特性

文章目录 CSS属性的继承CSS属性的层叠选择器的权重 HTML元素的类型编写HTML注意事项元素隐藏方法CSS属性-overflowCSS样式不生效可能原因 CSS属性的继承 如果一个属性具备继承性&#xff0c;那么在该元素上设置后&#xff0c;它的后代元素都可以继承这个属性 如果后代元素自己…

如何将平板或手机作为电脑的外接显示器?

先上官网链接&#xff1a;ExtensoDesk 家里有一台华为平板&#xff0c;自从买回来以后除了看视频外&#xff0c;基本没什么作用&#xff0c;于是想着将其作为我电脑的第二个屏幕&#xff0c;提高我学习办公的效率&#xff0c;废物再次利用。最近了解到华为和小米生态有多屏协同…

android11 SystemUI入門之KeyguardPatternView解析

view层级树为&#xff1a; 被包含在 keyguard_host_view.xml中 。 <?xml version"1.0" encoding"utf-8"?> <!-- This is the host view that generally contains two sub views: the widget viewand the security view. --> <com.andro…

关于Emulator和Simulator的探讨

由于写论文需要&#xff0c;仔细的学习和比对一下Emulator和Simulator的概念。原来“Emulator专门指硬件模拟&#xff0c;Simulator专门指软件模拟”的观点是不正确的&#xff0c;于是查看了很多文章的解释。同时也提醒自己&#xff0c;做科研一定要认真细致&#xff0c;无论看…

CLR学习

视频链接&#xff1a;《CLR十分钟》系列之CLR运行模型_哔哩哔哩_bilibili 什么是 CLR 公共语言运行时&#xff08;Common Language Runtime CLR&#xff09; 是一个可有多种编程语言使用的 运行时&#xff0c;CLR 的核心功能&#xff08;比如 内存管理&#xff0c;程序集加载…

Node.JS多线程PromisePool之promise-pool库实现

什么是Promise Pool Map-like, concurrent promise processing for Node.js. Promise-Pool是一个用于管理并发请求的JavaScript库&#xff0c;它可以限制同时进行的请求数量&#xff0c;以避免过多的请求导致服务器压力过大。使用Promise-Pool可以方便地实现对多个异步操作的并…

HarmonyOS 开发-使用SideBarContainer侧边栏淡入淡出动效实现案例

介绍 在2in1或平板上&#xff0c;群聊侧边栏是一种较为常用的功能&#xff0c;虽然HarmonyOS已经具备了基本的动效&#xff0c;但是部分情况下开发者可能有定制侧边栏动效的需求&#xff0c;本例主要介绍了如何基于显式动画实现侧边栏的淡入淡出动效。 效果图预览 使用说明&a…

C#中值类型与引用类型的存储

目录 值对象与引用对象的存储 引用对象的成员存储 值对象与引用对象的存储 数据项的类型定义了存储数据需要的内存大小及组成该类型的数据成员。类型还决定了对象在内存中的存储位置——栈或堆。 C#中类型分为两种&#xff1a;值类型和引用类型&#xff0c;这两种类型的对象…