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 中的函数组件和类组件是两种不同的组件形式&#xff0c;它们之间有一些区别&#xff1a; 1、定义方式: 函数组件是一个普通的 JavaScript 函数&#xff0c;以函数的形式定义组件&#xff0c;例如&#xff1a; function FunctionComponent() {return <div>Hello,…

HTML5标签(网页编程)

一、常用标签 HTML5&#xff08;或HTML&#xff09;中有很多常用的标签&#xff0c;这些标签用于构建网页的结构和内容。以下是一些常用的HTML5标签&#xff1a; 1. 标题标签 <h1> 到 <h6>&#xff1a;定义六个级别的标题&#xff0c;<h1> 级别最高&#…

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接收模块:接收串行数据,输出并行数…

​SCP收容物000

注 &#xff1a;本文是特别版&#xff0c;本文只供开玩笑 ,与steve_gqq_MC合作。 --------------------------------------------------------------------------------------------------------------------------------- Ittm # ŚČР-000 -----------------------------…

Android Q Download文件存储

11 以上 存放 Download 目录中 只能通过uri 进行读取 且只能APP 安装后存放的文件 才有访问权限 APP 卸载之后 数据库中权限会被移除 无法再通过文件名称进行查询 这边通过比较描述字段进行判断是否下载过文件 11 以上APP进行卸载后在安装下载 会出现重复文件 不知是否还有其他…

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

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…

力扣经典150题第十一题:H指数

目录 计算研究者的 H 指数问题描述示例 解决方案排序 线性扫描 复杂度分析测试示例总结与展望结语 计算研究者的 H 指数 在本文中&#xff0c;我们将讨论如何计算研究者的 H 指数。H 指数是衡量研究者学术影响力的一种指标&#xff0c;它代表了一个研究者至少发表了几篇论文&…

行走的爬虫机器:所有可用 CSS 样式,区分可继承与不可继承。爬取自 MDN 文档!

可继承 -moz-image-region 非标准-moz-user-input 非标准 已废弃-webkit-border-before 非标准-webkit-overflow-scrolling 非标准-webkit-tap-highlight-color 非标准-webkit-text-fill-color-webkit-text-stroke-webkit-text-stroke-color-webkit-text-stroke-width-webkit-…

蓝桥杯-【二分】求阶乘

思路:对于有几个0&#xff0c;10一定会是5的整数倍&#xff0c;2的因子数一定比5的多&#xff0c;所以只要算5的个数即可&#xff0c; 30%&#xff0c;每个n都去算 #include <bits/stdc.h> using namespace std; #define ll long long ll check(ll n) { …

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…

wordpress全站开发指南-面向开发者及深度用户(全中文实操)--wordpress是什么

WordPress简介 WordPress是一个开源的内容管理系统&#xff08;CMS&#xff09;&#xff0c;广泛用于创建和管理网站。它最初是作为一个博客平台开始的&#xff0c;但现在已经发展成为一个功能强大的网站建设工具&#xff0c;可以用于创建各种类型的网站&#xff0c;包括个人博…

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

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