表单账号,密码,邮箱验证登录

1.要求代码实现如下:

“账号”和“密码”为必填项且自动获得光标焦点;

设置“密码”由字母开头,长度为6-10,仅包含数字,字母和下划线;

“邮箱”检查其格式的合法性。

代码如下:

<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>登录表单</title><style>span{color:red;font-weight: bold;}</style></head><body><form action="" id="myForm"><p>账号:<input type="text" id="username" autofocus="autofocus" onkeyup="checkUserName(this)"/> <span><i class="error">*</i></span></p><p>密码:<input type="text" id="password" autofocus="autofocus" onkeyup="checkPassword(this)"/><span><i class="error">*</i></span></p><p>邮箱:<input type="text" id="email" onkeyup="checkEmail(this)"/><span><i class="error">*</i></span></p><p style="margin-left: 50px;"><input type="submit" value="提交"/>&nbsp;&nbsp;&nbsp;&nbsp;<input type="reset"  value="重置" /></p></form><script>function checkUserName(obj){var length=obj.value.length;var label=obj.parentElement.getElementsByClassName("error")[0];if(length>0){label.textContent="通过验证";return true;}else{label.textContent="账号为必填项";return false;}}function checkPassword(obj){var length=obj.value.length;var label=obj.parentElement.getElementsByClassName("error")[0];if(length>0){var re1 = /^[a-zA-Z]\w{5,9}$/;if(re1.test(obj.value)){label.textContent="密码正确!";}else{label.textContent="密码由小写字母开头,长度为6-10,仅包含数字,字母和下划线!";}"通过验证!";return true;	}else{label.textContent="密码为必填项";return false;}}function checkEmail(obj){var length=obj.value.length;var label=obj.parentElement.getElementsByClassName("error")[0];var re2 = /^(\w-*\.*)+@(\w-?)+(\.\w{2,})+$/;if(re2.test(obj.value)){label.textContent="邮箱合法!";return true;}else{label.textContent="邮箱不合法!";return false;}}myForm.onsubmit=()=>{var f1=checkUserName(username);var f2=checkPassword(password);var f3=checkEmail(email);return f1&&f2&&f3;}</script></body>
</html>

效果图如下:

 

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

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

相关文章

谷歌邮箱(@gmail.com):两步验证+应用专用密码登录

Gmail是Google出品的邮箱&#xff0c;有普通邮箱&#xff08;Gmail.com&#xff09;&#xff0c;也有企业邮箱&#xff08;谷歌企业套件&#xff09; 本文将详细讲解&#xff1a;如何在第三方客户端绑定谷歌邮箱&#xff08;Gmail&#xff09;进行邮件收发&#xff1f; 由于环境…

邮箱验证的思路及实现

邮箱验证 一、开启POP3/SMTP服务 QQ邮箱、网易163邮箱均可。这里以网易163邮箱为例 1、注册163邮箱帐号&#xff0c;进入设置 1、进入设置的POP3/SMTP/IMAP选项 2、开启两个服务&#xff0c;IMAP/SMTP、POP3/SMTP服务。会有一系列验证&#xff0c;最后会给一个授权码&…

如何实现邮箱验证

实现邮箱验证 首先需要借助nodemailer往注册邮箱发送邮件。而通过nodemailer代理发送需要先获取授权码 具体代码实现如下 var nodemailer require(nodemailer); var send function(user){var transporter nodemailer.createTransport({service: qq,auth: {user: xxxxxxx…

TP6------邮箱验证码发送邮件

一、安装tp6mail tp6缺少好多扩展&#xff0c;需要自己手动安装 composer require phpmailer/phpmailer 二、创建控制器 1.在app\admin\controller 创建Mailcheck控制器 <?php /***Created by giveLive*user:lingm*Date:2021/10/4*timer:下午 10:16*Atom:现在的努力是…

PHP + QQ邮箱发送邮箱验证码

一、说明 PHPMailer需要 PHP 的 sockets 扩展支持&#xff0c;而登录 QQ 邮箱 SMTP 服务器则必须通过 SSL 加密的&#xff0c; PHP 还得包含 openssl的支持。 查看PHP 是否开启 SSL &#xff1a; 检查 php.ini 中是否存在;extensionphp_openssl.dll&#xff0c; 如果存在&am…

邮箱验证码发送及验证

邮箱验证码发送及验证 代码简化&#xff0c;有需求可以联系 成果展示图 //获取验证码 //接收图 配置 <dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-mail</artifactId> </dependency>s…

引入QQ邮箱发送验证码进行安全校验

其他方案>引入短信服务发送手机验证码进行安全校验 操作相对复杂且收费&#xff0c;详细教程可供参考选择 在我们进行登录注册等等敏感操作时&#xff0c;为了保证用户信息的安全性&#xff0c;常常会碰到需要接收手机短信验证码进行验证的场景&#xff0c;虽然它的安全系数…

ChatGPT与教育的未来

Datawhale干货 作者&#xff1a;王鹏&#xff0c;腾讯研究院专家 来源&#xff1a;数说职教 历史上&#xff0c;每一次技术替代人类时&#xff0c;又提供了更多更好的新岗位。但我们往往忘记这个过程中牺牲掉的一代甚至几代人。教育系统的响应方式和速度也许将决定这个替代过程…

万字知识长文:ChatGPT 从零完全上手实操指南

ChatGPT 的横空出世&#xff0c;让很多人焦虑不已&#xff0c;不过&#xff0c;你完全不需要为此焦虑&#xff0c;因为比 AI 更强大永远是驾驭 AI 为自己所用的人类。 而且 GPT 远没有各大商家炒作的那么玄乎 &#xff0c;它应用逻辑也非常简单&#xff0c;你完全没必要为此去…

玩转ChatGPT:吴恩达/OpenAI合作教程《面向开发者的ChatGPT提示工程》

一、写在前面 最近&#xff0c;吴恩达与CloseOpenAI合作出了一个教程《面向开发者的ChatGPT提示工程》&#xff0c;第一时间就观摩了&#xff0c;有些体会&#xff0c;现在把个人觉得有意思的搬运过来。 我的机器学习入门就是看的吴恩达的教程&#xff01;大佬长得像冯巩&…

Android多语言切换

先看下demo中点击对应要显示语言的按钮&#xff0c;效果图如下&#xff1a; 先贴上项目目录图&#xff1a; values-语言代号-地区代号 分别表示不同地区语言资源&#xff0c;常用的国际化资源如下&#xff1a; 中文&#xff08;中国&#xff09;&#xff1a;values-zh-rCN 中…

Android国际化多语言切换

关于App国际化&#xff0c;之前有讲到国际化资源、字符换、布局相关&#xff0c;想要了解的猛戳用力抱一下APP国际化。借着本次重构多语言想跟大家聊一下多语言切换&#xff0c;多语言切换对于一款国际化App来讲是重中之重&#xff0c;并非难事&#xff0c;但是若要做好也是一件…

几个chatGPT的难题,关于语言转换

不同语言代码的移植一直以来是程序员面临的难题&#xff0c;最近问了问chatGPT能否解决这个问题。 编写一个程序&#xff0c;实现c语言函数转换为php函数 答&#xff1a;这是一个非常困难的问题&#xff0c;因为两种语言的语法、结构和标准库都不相同。如果您希望完成这个任务&…

使用 ChatGPT 从视频脚本创建知识图谱,使用 GPT-4 作为领域专家来帮助您从视频转录中提取知识(教程含完整源码)

我一直很喜欢深海纪录片,因为这里的生态系统和动物与陆地上的大不相同。因此,我决定在水下纪录片上测试 GPT-4 的信息提取能力。此外,我不知道有任何开源 NLP 模型经过训练可以检测海洋植物和生物之间的关系。因此,一部深海纪录片是使用 GPT-4 构建知识图谱的绝佳示例。 数…

ChatGPT实战:短视频文案、脚本创作

你还在拼脑力输出视频脚本吗&#xff1f;AI时代&#xff0c;该提高提高生产力了&#xff0c;机器一天的视频出货量能赶上以往几个月的工作量&#xff0c;人力怎么可能卷的过机器&#xff1f; 使用ChatGPT创作视频脚本可以带来一些好处&#xff1a; 创意激发&#xff1a;ChatGPT…

玩转#ChatGPT之“用Chat GPT 做美食攻略”

ChatGPT是一个大型的语言模型&#xff0c;可以利用其强大的自然语言处理能力来帮助你进行美食攻略。 首先&#xff0c;你需要提供相应地区的美食相关信息&#xff0c;比如当地的名菜、特色小吃、饮食文化等。然后&#xff0c;你可以向ChatGPT提出问题&#xff0c;例如&#xf…

如何使用ChatGPT做一份五一出游攻略?

五一假期即将来临&#xff0c;或许你已经着手计划这个假期的旅游行程了呢&#xff1f; 但是若是缺乏旅游行程规划的经验&#xff0c;或者在选择质量上良莠不齐的攻略时感到困惑&#xff0c;你可以尝试使用ChatGPT来创建一份自己的旅游攻略哦&#xff01; 首先&#xff0c;我们…

如何高效使用ChatGPT

随着ChatGPT的不断推广&#xff0c;许多人在使用时都会遇到一个问题&#xff1a;ChatGPT给出的回答不是我想要的答案。这也是我们早期接触ChatGPT时会遇到的状况——用得“不太好”。 在对ChatGPT不断地探索、尝试以及查阅官方资料后&#xff0c;我们找到了一个突破点。ChatGP…

假期出行小程序+chatgpt旅游攻略

马上五一了,如果想出去旅游,需要提取规划好路线图,我们可以借助chatgpt的路线规划功能帮我们生成一份攻略,按照攻略我们就可以愉快的出去玩耍了。 本文结合chatgpt,利用低代码工具帮我们制作一份旅行导览小程序,可以按照行程方便的出行。 1 制定攻略 我们在聊天窗口输…

快速解决无法登录网页版微信的问题,亲测有效

在公司开发测试阶段&#xff0c;需要使用网页版微信对开发页面进行调试&#xff0c;但是我的两个微信号在扫码登录网页版微信时&#xff0c;都出现了以下提示&#xff1a; 为了你的帐号安全&#xff0c;此微信号不能登录网页微信。你可以使用Windows微信或Mac微信在电脑端登录。…