『前端学习实例』 表单验证-注册（Javascript正则表达式）

最新推荐文章于 2022-09-24 14:16:07 发布
最新推荐文章于 2022-09-24 14:16:07 发布
阅读量673 收藏 6
点赞数 1
分类专栏： 前端学习实例 文章标签： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/GLZX_HM/article/details/107821291
版权
本文通过一个实例介绍了如何在前端实现用户注册表单的验证，利用JavaScript的正则表达式对用户名、手机号、身份证号和电子邮箱进行有效性校验。在用户交互过程中，表单会根据输入内容实时显示验证状态，包括密码强度的三级提示。详细代码及效果展示已附带。
摘要由CSDN通过智能技术生成

参考文档：JavaScript 教程 W3school


文章目录



功能需求

  • 实现用户注册界面。（自定义CSS样式）
  • 实现表单验证。（使用Javascript正则表达式）



结果展示

  • 默认状态：
    在这里插入图片描述
  • 输入提交：

在这里插入图片描述

  • 功能：用户名 / 手机号 / 身份证号 / 电子邮箱 校验
  1. 默认状态（点击）
    在这里插入图片描述
  2. 不符合要求（鼠标移出）
    在这里插入图片描述
  3. 符合要求（鼠标移出）
    在这里插入图片描述
  • 功能：密码强度校验

  1. 弱密码
    在这里插入图片描述

  2. 中密码
    在这里插入图片描述

  3. 强密码
    在这里插入图片描述



源代码



index.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>用户注册</title>
</head>

<body>


<style type="text/css">
  /*基本布局容器*/
  div{
   
    position: absolute;
    width: 100%;
    height: 100%;
    float: left;
  }
  header{
   
    width: 100%;
    height: 20%;
    border-bottom: 1px solid #ccc;
  }
  header>h1{
   
    width: 100%;
    height: 50%;
    margin: unset;
    padding: unset;
    font-size: 60px;
    text-align: center;
  }
  header>h1>a{
   
    color: #b92c28;
  }
  header>a{
   
    position: absolute; /*绝对布局：居右*/
    top: 80px;
    right: 10px;
  }
  header>a>b{
   
    color: red;
  }
  section{
   
    width: 70%;
    height: 70%;
    margin-left: 32%;
  }
  footer{
   
    width: 100%;
    height: 10%;
    border-top: 1px solid #ccc;
    padding-top: 10px;
    color: #ccc;
    text-align: center;
  }
  /*表格*/
  table{
   
    width: 100%;
    height: 100%;
  }
  .info{
   
    width: 20%;
    text-align: right;
  }
  .input{
   
    width: 20%;
  }
  .warning{
    /*默认透明：不显示*/
    width: 60%;
    color: transparent;
  }
  .submit{
   
    width: 80%;
    height: 70%;
    border-radius: 10px;
    border-color: transparent;
    outline: 0;
    color: white;
    font-size: large;
    background-color: #d9534f;
  }
  /*密码校验框*/
  .plex{
   
    position: absolute;
    width: 50px;
    height: 25px;
    margin-top: -10px;
    border-radius: 5px;
    color: black;
    text-align: center;
  }
  /*提交按钮的样式切换*/
 .submitCurrent:hover{
   
    background-color: #ff534f;
  }
  .submitOn
最低0.47元/天 解锁文章
大熊软糖M
关注
  • 1
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
JavaScript 实现注册表单
O_osange的博客
01-16 1321
JavaScript 实现注册表单
3.6 用正则表达式验证注册表单页面
小脆筒style的博客
06-17 2856
用正则表达式验证注册表单页面 制作一张注册页，页面自行设计，页面元素命名自行设置，需要验证如下信息： 用户名：（允许2-4个汉字） 电话：（开头3或4位,”-”号隔开，后面7或8位） 手机号码：开头3位必须合法，后面8位数字 邮箱：有效邮箱格式 身份证号码：有效身份证号码 学号验证：分析你自己的学号规律 index.html <!DOCTYPE html> <html lang="en"> <head> <meta cha
利用JavaScript实现表单的验证和提交(前端拦截无用的表单提交)
qq_40933991的博客
04-19 757
利用JavaScript实现表单的验证和提交(前端拦截无用的表单提交) 注册表单提交,利用js来拦截掉无用的注册信息,同时验证注册是否通过 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>欢迎注册</title> <script typ...
实站之一：使用表格布局登录窗口
jianghuiquan的专栏
09-29 3652
　　　　　　　　　　　　　　　　实站之一、使用表格布局登录窗口【要点】　　１、了解表格布局。　　２、了解表单。　　通过《第二篇、Dreamweaver》和《第三篇、HTML》两篇的学习，我们已经支零破碎地掌握了一些基础知识，我们今天一起进入实战演习，利用前面所学开始设计登录窗口。今天我们采用的是表格布局，之所以还要讲一下表格布局，着重在于强调：学以致用，假设你只会表格布局，难道就不
使用html，css，javascript进行注册页面的实现
最新发布
weixin_52708099的博客
09-24 2130
由于"个人介绍"栏目的信息不做要求，对这一行的输入框的单元格和提示的单元格进行了合并。通过判断某一个输入框是否正确来判断使用什么颜色的字体以及输出什么的提示文本。再在表单中来创建一个表格来用于对表单中的各个组件的布局设计，表格一共四列。主要是对表格中的按钮进行设置，设置了按钮边框颜色和和按钮主要颜色。函数用于判断是否所有的输入框的输入都正确，以此返回。之后的提交按钮则单独一列合并四个单元格，然后通过。js主要负责对表单中的数据进行验证，之类的属性来提示用户需要填写什么，其他的判断函数则通过调用上述的。
应用正则表达式验证用户注册
Veer Han
04-14 3999
代码：<!DOCTYPE html> <html> <head> <title>form.html</title><meta name="keywords" content="keyword1,keyword2,keyword3"> <meta name="description" content="this is my page"> <meta name="content-type" conten
表单验证时常用正则表达式（以“注册信息”为例）
lwh156541064的博客
10-17 1577
个人在使用时看到网上总结的有很多了，但大多文章表述的都比较抽象，使用时需要自己组合，通常因为懒所以实际在用时习惯直接拿来用，总结的是本人写程序的过程中用的频率比较高的几个实例： 另：这里有一个博主总结的很不错，链接贴上 个人整理的web开发中常用的表单验证的正则表达式JS——Mr_Smile2014 的文章（侵删） /*验证是否同意协议*/ function checkAgree()...
JavaScript
weixin_42635252的博客
10-07 252
JavaScript的简介 JavaScript 是一种轻量级的编程语言。 JavaScript 是可插入 HTML 页面的编程代码。 JavaScript 插入 HTML 页面后，可由所有的现代浏览器执行。 在此后简称JS JS注册表单的检验 需求: 1). 用户在注册的时候会输入一些信息， 但是用户输入的内容有可能不合法， 会导致服务器端压力过大; 2). 当用户填写信息之后， 对填写的信息...
用JavaScript实现简单的表单验证
布里啾啾迪布里多oo的博客
10-15 5890
用JavaScript实现一个简单的表单验证： JavaScript 可用来在数据被送往服务器前对 HTML 表单中的这些输入数据进行验证。 JavaScript验证内容： 验证用户名是否为空； 验证用户名是否在6-14之间； 验证密码是否为空； 验证密码是否小于6位； 验证确认密码是否与密码一致； 验证所填表单是否正确即符合要求 正确则提交表单； Form表单 用于收集用户信息，如：登录、注...
利用JavaScript操作表单的小例子
左岸
08-21 1363
t检查用户注册信息是否正确，在以下情况不满足时报错并阻止提交表单：用户名必须是3-10位英文字母或数字；口令必须是6-20位；两次输入口令必须一致。<form id="test-register" action="#" target="_blank" onsubmit="return checkRegisterForm()"> <p id="test-error" style="color:
JavaScript 完成注册页面表单校验的实例
10-19
下面小编就为大家带来一篇JavaScript 完成注册页面表单校验的实例。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
js登陆验证与注册验证，正则表达式
01-13
基本的一些登陆注册验证，如：长度验证、数字验证、非空、字母等
用javascript写一个简单的登录表单，包含用户名、密码和手机号码。提交数据时验证用户名、密码和手机号输入格式。
m0_46177715的博客
02-08 9332
我的第一个博客 题目：写一个用于登录的表单，包含用户名、密码和手机号码。提交数据的时候，要求验证： 1. 用户名必须输入汉字； 2. 密码总共6位，前2位为字母，后4位为数字； 3. 手机号码符合中国大陆手机号码格式 如果输入错误，则在输入框后面显示对应的文本提示信息 代码： // 2.当失去焦点时,密码校验函数 function checkPassword(){ // ...
javascript基础。表单操作
act9ps的专栏
03-04 323
HTML表单是通过元素来定义的,它有以下特性 ◦       method –表示浏览器发挞GET请求或是发送POST请求 ◦       action – 表示表单所要提交到的地址URL ◦       enctype – 当向服务器端发送数据时，数据应该使用的编码方法，默认的是application/x-www-url-encoded,不过，如果上传文件，可以设置成multipar
day024 JavaScript入门
MustangYL的博客
03-30 173
1 案例1--表单校验案例 1.1 需求介绍 当表单提交的时候,对用户在表单中填写的信息进行校验,如果信息合法则可以让表单提交,如果不合法,则阻止表单提交; 1.2 技术分析 1:当xxx的时候,做xxx的事情;需要学习javascript中的事件操作; 2:获取用户填写的信息;需要使用javascript的获取信息的方法完成; 3:使用javascript中的逻辑判断语句,可以完成判断的需求; 4:使用javascript的事件可以控制表单的提交与否; 1.3 JavaScript概述
用正则表达式的方式实现注册登入的校验
a815886696的博客
09-21 3151
表单验证： 用户名：6–18位数字,字母,下划线_，文本域获取焦点和失去焦点出现提示文字。 登入密码：请输入6–20位数字,字母,任意字符，文本域获取焦点和失去焦点出现提示文字。（效果同上） 确认密码：内容与登入密码必须一致。 姓名：2-5位中文字。 身份证号：开头为1234568，中间16位为数字，结尾为数字或Xx。 邮箱：常规验证如下 手机号：为1开头是11位数字 提交是验证为一项是否填写正确，并弹框提示。 确认已阅读选项是否选中，并弹框提示。 页面效果： 1、提交是验证为一项是否填写正确，并弹框提
（17）用户注册信息校验：正则表达式
FixedStar 的博客
08-09 1203
如题
二十四、form 表单验证+简单注册正则表达式
weixin_40976555的博客
05-28 2348
一、知识点1.JavaScript正则表达式：使用单个字符串来描述、匹配一系列符合某个句法规则的字符串搜索模式。（搜索模式可用于文本搜索和文本替换）2.正则表达式概念：由一个字符序列形成的搜索模式；3.语法：var 名称=/正则表达式主体/;4.字符串方法：search()方法 用于检索字符串中指定的子字符串或与正则表达式相匹配的子字符串，并返回子字符串的起始位置；replace()方法 用于在字...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

大熊软糖M

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值