利用JS及正则表达式验证创建一个简单的注册界面

最新推荐文章于 2024-10-01 23:23:32 发布

我卢本伟没有开挂

最新推荐文章于 2024-10-01 23:23:32 发布

阅读量1.4k

点赞数

文章标签： html css JavaScript js与css交互正则表达式

本文链接：https://blog.csdn.net/weixin_43885123/article/details/84674943

版权

本文介绍了一个初学者使用HTML、CSS和JavaScript创建的注册界面，通过正则表达式实现输入验证。当输入框失去焦点时，程序会检查邮箱和密码格式，若不符合规则则显示错误信息。获得焦点时，错误信息将被清除。点击提交按钮时，会全面验证输入，若发现错误则提示用户重新输入。

摘要由CSDN通过智能技术生成

利用JS及正则表达式验证创建一个简单的注册界面

思路：

★作为初学者还没有完全学完，改进的地方还有很多很多，望各位网友提出宝贵意见，共同学习！

1.利用for循环在一个div里添加3个input节点；

2.添加两个div节点，当输入的信息不符合正则表达式的规则时用来显示错误信息；

3.当输入框失去焦点时，验证正则表达式，如果结果为false，则输出错误信息，提醒重新并按格式输入；

4.当输入框获得焦点时，会清除上面两个div里的所有子节点（用来当如果里面有显示错误的信息时，清除错误提示）；

5.当点击最后的提交按钮时，会验证一遍上面所有的信息是否格式正确，若有false存在，则会弹出提示框提醒重新输入。

7.邮箱为标准邮箱格式，密码格式为6-12位字符

html代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <link rel="stylesheet" href="注册界面.css"/>
    <script src="注册界面.js"></script>
</head>
<body onload="onload()">
    <div id="dl" class="dl"></div>
</body>
</html>
<