用js写一个注册页面附带校验

好的，下面是一个简单的注册页面，附带校验功能： ```html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>注册页面</title> <style> form { width: 300px; margin: 50px auto; text-align: center; } input[type="text"], input[type="password"] { padding: 10px; margin-bottom: 20px; border-radius: 5px; border: 1px solid #ccc; width: 100%; box-sizing: border-box; } input[type="submit"] { background-color: #4CAF50; color: white; padding: 10px 20px; border: none; border-radius: 5px; cursor: pointer; } input[type="submit"]:hover { background-color: #3e8e41; } .error-message { color: #f00; margin-bottom: 10px; } </style> </head> <body> <form id="register-form"> <h2>注册</h2> <input type="text" id="username" placeholder="用户名"> <input type="password" id="password" placeholder="密码"> <input type="password" id="confirm-password" placeholder="确认密码"> <input type="submit" value="注册"> <div id="error-message"></div> </form> <script> var form = document.getElementById('register-form'); var username = document.getElementById('username'); var password = document.getElementById('password'); var confirmPassword = document.getElementById('confirm-password'); var errorMessage = document.getElementById('error-message'); form.addEventListener('submit', function(event) { event.preventDefault(); // 阻止默认提交行为 // 校验用户名 if (!username.value) { errorMessage.innerText = '用户名不能为空'; return; } // 校验密码 if (!password.value) { errorMessage.innerText = '密码不能为空'; return; } if (password.value.length < 6) { errorMessage.innerText = '密码长度不能少于6位'; return; } // 校验确认密码 if (!confirmPassword.value) { errorMessage.innerText = '确认密码不能为空'; return; } if (password.value !== confirmPassword.value) { errorMessage.innerText = '两次输入的密码不一致'; return; } // 提交表单 form.submit(); }); </script> </body> </html> ``` 这个页面包括一个用户名输入框、一个密码输入框、一个确认密码输入框和一个提交按钮。当用户点击提交按钮时，会触发一个 `submit` 事件，我们在事件处理函数中对用户输入的内容进行校验，如果有错误就显示错误信息，否则就提交表单。校验的规则包括： - 用户名不能为空 - 密码不能为空，且长度不能少于6位 - 确认密码不能为空，且必须和密码一致校验的结果会显示在页面上方的一个红色提示框中。如果所有校验都通过，就会提交表单，并跳转到注册成功页面。

用js写一个注册页面附带校验

相关推荐

JavaScript 完成注册页面表单校验的实例

javascript使用正则表达式实现注册登入校验

js简单实现用户注册信息的校验代码

用js写一个注册页面附带校验并且支持跳转

用js写一个正则表达式，校验邮箱是否有效

用js写一个正则表达式，校验ip是否有效

写一个js登录页面包括校验

用uniapp写一个注册页面

用QT写一个十进制XOR校验

用systemverilog写一个bip8校验算法

用clickhouse写一个随机mac校验

用QT写一个XOR校验

用python写一个CRC-16校验算法

用systemverilog写一个计算crc32校验和的函数

用cpp写一个奇偶校验

使用JavaScript写一个身份证号校验

用JAVA写一个员工权限校验接口

用 Go 写一个crc32校验的函数

JS判断、校验MAC地址的2个实例

最新推荐

JAVA实现社会统一信用代码校验的方法

java+毕业设计+扫雷（程序）.rar

【图像增强】 GUI同态滤波图像增晰（含高斯滤波、一阶、二阶巴特沃斯滤波）【含Matlab源码 4397期】.zip

Wox全局搜索工具,一款win下的全局搜索软件

zigbee-cluster-library-specification

管理建模和仿真的文件

实现实时数据湖架构：Kafka与Hive集成

云原生架构与soa架构区别？

JSBSim Reference Manual

"互动学习：行动中的多样性与论文攻读经历"