注册界面演示代码（前端开发）

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>注册</title><style>* {margin: 0px;padding: 0px;/*这样的设置会阻止元素大小的改变，因为设置内边距时元素大小会发生改变*/box-sizing: border-box;}body {background: url("image/bjt01.jpg") no-repeat center;background-size: cover;}.layout {/*background-image: url("image/bjt01.jpg");*//*background-size: cover;*/width: 900px;height: 500px;border: 8px solid #EFFBFB;background-color: white;margin: 110px auto auto auto;}.div-left {float: left;margin: 15px;}.div-center {float: left;}.div-right {float: right;margin-top: 20px;margin-right: 20px;}.div-left > p:first-child {color: #facb48;font-size: 20px;}.div-left > p:last-child {color: #ABADAF;font-size: 20px;}.div-right > p {font-size: 15px;}.div-right p a {color: pink;}.div-center {width: 520px;margin-top: 10px;}.td-left {width: 110px;text-align: right;height: 45px;}.td-right {padding-left: 20px;}#userName, #password, #email, #realName, #phoneNumber, #birthday, #verCode {width: 251px;height: 32px;border: 1px solid #E6EAED;padding-left: 10px;border-radius: 5px;/*输入框，参照td垂直居中*/vertical-align: middle;}#verCode {width: 120px;margin-right: 20px;}#img-check {vertical-align: middle;height: 32px;}#sub-btn {width: 150px;height: 40px;background-color: #facb48;border: 1px solid #facb48;}/*设置placeholder字的颜色*/input::-webkit-input-placeholder {/* WebKit browsers */color: #ccc;}.error {font-size: 15px;color: red;margin-left: 10px;}/*设置对钩图片垂直居中，宽度和高度*/.tick {vertical-align: middle;width: 25px;height: 25px;}/*显示线框*/.div-right, .div-center, .td-right, .td-left, .td-btn {/*border: 1px solid #BF562B;*/}#td-btn {padding-left: 130px;}#sub-btn {margin-top: 20px;}</style><script !src="">/*** 分析：* 1.给表单绑定onsubmit事件* 监听器中判断每个方法检验的结果，如果都是true，则监听器方法返回true；如果有一个为false,* 则监听器方法返回false* 2.定义一些方法分别校验各个表单项* 3.给各个表单项绑定onblur事件，失去焦点后触发校验监听器*/window.onload = function () {// 1.给表单绑定onsubmit事件document.getElementById("form").onsubmit = function () {// 调用用户名校验方法，调用密码校验方法return checkUsername() && checkPassword() && checkPhoneNumber() && checkEmail() && checkVerCode();};// 给用户名输入框注册离焦事件监听器document.getElementById("userName").onblur = function () {// 调用校验用户名的方法checkUsername();};// 给密码输入框注册离焦事件监听器document.getElementById("password").onblur = function () {// 调用校验密码的方法checkPassword();};// 给手机号输入框注册离焦事件监听器document.getElementById("phoneNumber").onblur = function () {// 调用校验手机号的方法checkPhoneNumber();}// 给邮箱输入框注册离焦事件监听器document.getElementById("email").onblur = function () {// 调用校验邮箱的方法checkEmail();}// 给验证码输入框绑定离焦事件document.getElementById("verCode").onblur = function () {// 调用校验验证码的方法checkVerCode();}};// 校验用户名function checkUsername() {// 1.获取用户名var userName = document.getElementById("userName").value;// 2.定义正则表达式var regUserName = /^\w{6,12}$/;// 3.判断用户名是否符合正则表达式var flag = regUserName.test(userName);// 4.提示信息if (flag) {// 提示对钩document.getElementById("prompt-un").innerHTML = "<img class='tick' src='image/tick.png'/>";} else {// 提示：用户名格式错误document.getElementById("prompt-un").innerHTML = "用户名格式错误！";}return flag;}/*** 校验密码*/function checkPassword() {// 1.获取密码var password = document.getElementById("password").value;// 2.定义正则表达式var regPassword = /^\w{6,12}$/;// 3.判断密码是否符合正则表达式var flag = regPassword.test(password);// 4.提示信息if (flag) {// 符合正则表达式则提示对钩document.getElementById("prompt-pw").innerHTML = "<img class='tick' src='image/tick.png'/>";} else {// 不符合正则表达式则提示：密码格式错误document.getElementById("prompt-pw").innerHTML = "密码格式错误！";}return flag;}// 校验邮箱function checkEmail() {let flag = true;// 获取邮箱地址let email = document.getElementById("email").value;if (!email) {// 如果邮箱为空，直接返回truereturn flag;}let regEmail = /^[a-z\d]+(\.[a-z\d]+)*@([\da-z](-[\da-z])?)+(\.{1,2}[a-z]+)+$/;flag = regEmail.test(email);if (flag) {// 如果符合正则表达式则显示对钩图标document.getElementById("prompt-email").innerHTML = "<img class='tick' src='image/tick.png'/>";} else {// 如果不符合正则表达式则显示：邮箱格式错误document.getElementById("prompt-email").innerHTML = "邮箱格式错误";}}// 校验手机号码function checkPhoneNumber() {var flag = true;// 获取手机号码var phoneNumber = document.getElementById("phoneNumber").value;if (!phoneNumber) {// 手机号为空，直接返回truereturn flag;}var regPhoneNumber = /(\+86)?1\d{10}/;flag = regPhoneNumber.test(phoneNumber);if (flag) {// 符合正则表达式则显示对钩document.getElementById("prompt-pn").innerHTML = "<img class='tick' src='image/tick.png'/>";} else {// 不符合正则表达式则显示：手机号格式错误document.getElementById("prompt-pn").innerHTML = "手机号格式错误";}return flag;}// 校验验证码function checkVerCode() {// 获取验证码let verCode = document.getElementById("verCode").value;// 定义正则表达式，匹配任意数字或英文字母组合而成的6个字符let regVerCode = /^[\d\a]{6}$/;// 校验验证码let flag = regVerCode.test(verCode);if (flag) {// 验证码格式正确则调用服务端的校验验证码的接口，这里省略document.getElementById("prompt-vc").innerHTML = "<img class='tick' src='image/tick.png'/>";} else {// 验证码格式错误，显示：验证码格式错误document.getElementById("prompt-vc").innerHTML = "验证码格式错误";}return flag;}</script></head>
<body>
<!--注册窗口-->
<div class="layout"><!--窗口标题--><div id="div_left" class="div-left"><p class="title-en">新用户注册</p><p class="title-zh">USER REGISTER</p></div><div id="div_center" class="div-center"><!--注册表单项--><form id="form" action="#" method="get"><table><tr><td class="td-left"><label for="userName">用户名</label></td><td class="td-right"><input type="text" name="userName" id="userName" placeholder="请输入用户名"><spanid="prompt-un" class="error"></span></td></tr><tr><td class="td-left"><label for="password">密码</label></td><td class="td-right"><input type="text" name="password" id="password" placeholder="请输入密码"><spanid="prompt-pw" class="error"></span></td></tr><tr><td class="td-left"><label for="email">Email</label></td><td class="td-right"><input type="email" name="email" id="email" placeholder="请输入邮箱"><spanid="prompt-email" class="error"></span></td></tr><tr><td class="td-left"><label for="realName">姓名</label></td><td class="td-right"><input type="text" name="realName" id="realName" placeholder="请输入姓名"></td></tr><tr><td class="td-left"><label for="phoneNumber">手机号</label></td><td class="td-right"><input type="text" name="phoneNumber" id="phoneNumber"placeholder="请输入手机号"><span id="prompt-pn" class="error"></span></td></tr><tr><td class="td-left">性别</td><td class="td-right"><input type="radio" value="0"> 男 <input type="radio" value="1"> 女</td></tr><tr><td class="td-left">出生日期</td><td class="td-right"><input type="date" name="birthday" id="birthday"></td></tr><tr><td class="td-left"><label for="verCode">验证码</label></td><td class="td-right"><input type="text" name="verCode" id="verCode" placeholder="请输入验证码"><imgid="img-check"src="image/ver_code.png"/><span id="prompt-vc" class="error"></span></td></tr><tr><td colspan="2" id="td-btn" class="td-btn"><input type="submit" value="注册" id="sub-btn"></td></tr></table></form></div><!--登录指引--><div id="div-right" class="div-right"><p>已有账号？<a href="#">立即登录</a></p></div>
</div>
</body>
</html>

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

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

相关文章

apache ignite_使用Apache Ignite瘦客户端– Apache Ignite内部博客

apache ignite_使用Apache Ignite瘦客户端– Apache Ignite内部博客

apache ignite从2.4.0版本开始&#xff0c;Apache Ignite引入了一种连接到Ignite群集的新方法&#xff0c;该方法允许与Ignite群集进行通信而无需启动Ignite客户端节点。 从历史上看&#xff0c;Apache Ignite提供了客户端和服务器节点两个概念。 点燃旨在用作轻量级模式的客户…
阅读更多...
java 网络编程 方式_JAVA网络编程

java 网络编程 方式_JAVA网络编程

概念BIO 阻塞io&#xff0c;1.4之前NIO no-blocking io 非阻塞io&#xff0c;jdk1.4AIO 异步io&#xff0c;jdk1.7浏览器输入网址&#xff0c;敲下回车之后发生了什么&#xff1f;1.URL解析2.DNS解析概念&#xff1a;Domain Name System&#xff0c;域名系统&#xff0c;本质…
阅读更多...
如何设置背景图（前端开发）

如何设置背景图（前端开发）

<!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><title>模糊化背景图</title><style>body {background-image: url("image/bjt03.jpg");background-repeat: no-repeat;background-atta…
阅读更多...
java字符串底层实现_「JAVA」细述合理创建字符串，分析字符串的底层存储，你不该错过...

java字符串底层实现_「JAVA」细述合理创建字符串，分析字符串的底层存储，你不该错过...

Java基础之字符串操作——String字符串什么是字符串&#xff1f;如果直接按照字面意思来理解就是多个字符连接起来组合成的字符序列。为了更好的理解以上的理论&#xff0c;我们先来解释下字符序列&#xff0c;字符序列&#xff1a;把多个字符按照一定的顺序排列起来&#xff1…
阅读更多...
查看oracle会话和进程_带有Oracle Digital Assistant和Fn Project的会话式UI。 第三部分，迁移到云...

查看oracle会话和进程_带有Oracle Digital Assistant和Fn Project的会话式UI。 第三部分，迁移到云...

查看oracle会话和进程在这篇文章中&#xff0c;我将继续在Oracle Digital Assistant和Oracle Digital Assistant之上为FlexDeploy实现对话式UI的故事。 Fn项目 。 今天&#xff0c;我将围绕聊天机器人工作的无服务器API迁移到云中&#xff0c;因此整个解决方案都在云中工作&am…
阅读更多...
浏览器用户脚本管理器（Tampermonkey）

浏览器用户脚本管理器（Tampermonkey）

文章目录脚本管理器的好处是什么&#xff1f;用户脚本管理器有哪些&#xff1f;如何使用&#xff1f;安装脚本示例常用脚本脚本管理器的好处是什么&#xff1f; 用户脚本管理器将在您的用户脚本管理方面提供更多的便利。 它提供了诸如便捷脚本安装、自动更新检查、标签中的脚本…
阅读更多...
服务器$java_top路径_ERP实施项目-MD120_FIN000_即时打印_V1.0

服务器$java_top路径_ERP实施项目-MD120_FIN000_即时打印_V1.0

中国移动项目即时打印开发在此将web的即时打印开发成通用程序。1、首先通过创建rtf模板制定报表的输出格式&#xff1b;2、将需要输出的数据插入客户化表cux_fnd_xml_pool中&#xff1b;3、通过EBS功能调用CuxFndXmlpViewer.jsp。此jsp程序会根据传入的参数判断调用哪个rtf模板…
阅读更多...
通讯网关 api网关_API网关正在经历身份危机

通讯网关 api网关_API网关正在经历身份危机

通讯网关 api网关这些年来&#xff0c;API网关正在经历一些身份危机 。 它们是否是集中的共享资源&#xff0c;从而促进了API对外部实体的公开和治理&#xff1f; 它们是集群入口哨兵&#xff0c;可以严格控制哪些用户流量进入或离开集群吗&#xff1f; 还是他们根据自己拥有…
阅读更多...
百度搜索引擎使用技巧

百度搜索引擎使用技巧

1.在指定的网站搜索内容 在搜索框输入&#xff1a;site:youku.com 蛋炒饭&#xff0c;则只会返回优酷网站上关于蛋炒饭的内容 2.屏蔽指定的网站 例如&#xff0c;搜索“内存溢出”&#xff0c;但是不希望看到 csdn 网站相关的内容&#xff0c;你可以在搜索框输入&#xff1a;内…
阅读更多...
docker 容器监控_以简便的方式监控Docker容器中的ADF应用程序

docker 容器监控_以简便的方式监控Docker容器中的ADF应用程序

docker 容器监控在这篇简短的文章中&#xff0c;我将展示一种简单的方法来确保在Docker容器中运行的ADF应用程序在内存利用率方面是健康的Java应用程序。 我将使用标准工具JConsole&#xff0c;它是计算机上JDK安装的一部分。 如果存在问题&#xff08;例如&#xff0c;内存泄漏…
阅读更多...
phpexcel 日期 时分秒_thinkPHP+PHPExcel实现读取文件日期的方法含时分秒

phpexcel 日期 时分秒_thinkPHP+PHPExcel实现读取文件日期的方法含时分秒

Vendor(PHPExcel.PHPExcel.IOFactory);$inputFileName Public/demo/demo.xls;$objReader new PHPExcel_Reader_Excel5();$objPHPExcel $objReader->load($inputFileName);$sheet $objPHPExcel->getSheet(0);$highestRow $sheet->getHighestRow(); // 取得总行数$…
阅读更多...
css中的display属性值：table，table-row，table-cell

css中的display属性值：table，table-row，table-cell

table&#xff1a;此元素会作为块级表格来显示&#xff08;类似 <table>&#xff09;&#xff0c;表格前后带有换行符。 table-row&#xff1a;此元素会作为一个表格行显示&#xff08;类似 <tr>&#xff09;。 table-cell&#xff1a;此元素会作为一个表格单元格显…
阅读更多...
Bootstrap的学习

Bootstrap的学习

文章目录概念入门响应式布局响应式布局的实现&#xff08;栅格系统&#xff09;示例代码注意事项栅格系统参考视频应用 Bootstrap 的组件概念 一个前端开发的框架&#xff0c;Bootstrap&#xff0c;来自Twitter&#xff0c; 是目前很受欢迎的前端框架。Bootstrap 是基于HTML、…
阅读更多...
jdk8 string::_JDK 12的String :: transform方法的简要但复杂的历史

jdk8 string::_JDK 12的String :: transform方法的简要但复杂的历史

jdk8 string::最近有人提议从JDK 12中删除Java预览功能Raw String Literals &#xff08; JEP 326 &#xff09;&#xff0c; 现在正式宣布将删除该预览功能 &#xff08; Java SE 12 [JSR 386] 25版将其删除 &#xff09;。 JDK String类中已添加了几种方法来支持此功能。 即使…
阅读更多...
注册界面的实现案例视频（前端开发）

注册界面的实现案例视频（前端开发）

视频1&#xff1a;https://live.csdn.net/v/182184 视频2&#xff1a;https://live.csdn.net/v/182185 视频3&#xff1a;https://live.csdn.net/v/182186 视频4&#xff1a;https://live.csdn.net/v/182200
阅读更多...
jdbc如何写csv文件_Java：将JDBC结果集作为CSV流化

jdbc如何写csv文件_Java：将JDBC结果集作为CSV流化

jdbc如何写csv文件在上一篇文章中 &#xff0c;我展示了如何将java.sql.ResultSet转换为JSON并将其流回调用方。 这篇文章是关于以CSV格式流式传输。 流式传输使您可以一点一点地传输数据&#xff0c;而不必将所有数据都加载到服务器的内存中。 例如&#xff0c;考虑以下Resul…
阅读更多...
使用Bootstrap开发网站首页

使用Bootstrap开发网站首页

视频1&#xff1a;https://live.csdn.net/v/182207 视频2&#xff1a;https://live.csdn.net/v/182208 视频3&#xff1a;https://live.csdn.net/v/182209
阅读更多...
在java中3.14156d表示_2006年9月计算机等级考试二级Java笔试真题

在java中3.14156d表示_2006年9月计算机等级考试二级Java笔试真题

一、选择题(每小题2分&#xff0c;共70分)下列各题A)、B)、C)、D)四个选项中&#xff0c;只有一个选项是正确的&#xff0c;请将正确选项涂写在答题卡相应位置上&#xff0c;答在试卷上不得分。(1)下列选项中不符合良好程序设计风格的是_____。A)源程序要文档化B)数据说明的次序…
阅读更多...
apigee 安装_APIGEE：用于API代理的CI / CD管道

apigee 安装_APIGEE：用于API代理的CI / CD管道

apigee 安装在本文中&#xff0c;我们将看到如何为APIGEE API代理创建CI / CD管道。 我已经参考了APIGEE社区上同一主题的几篇文章。 这些给了一些关于如何为API代理设置CI / CD管道的想法。 这是我用来设置CI / CD的工具。 詹金斯 节点 蜂胶 新人 APIGEE管理API 确保已创…
阅读更多...
超链接标签/＜a＞标签

超链接标签/＜a＞标签

保留 <a> 标签的点击功能&#xff0c;但是点击不需要跳转&#xff0c;也就是取消 href 属性的功能&#xff0c;可以这样做&#xff1a; <a href"javascript:void(0);">test2</a>href 属性不能去掉&#xff0c;否则看不到链接样式。
阅读更多...
最新文章

Copyright @ 2022~2023