const regexInput = document.querySelector('#regex-input'); const applyRegexButton = document.querySelector('#apply-regex-button'); const content = document.querySelector('#content'); applyRegexButton.addEventListener('click', () => { const regex = new RegExp(regexInput.value, 'g'); const originalContent = content.innerHTML; const modifiedContent = originalContent.replace(regex, '<span class="matched-text">$&</span>'); content.innerHTML = modifiedContent; });

时间: 2023-06-25 11:01:50 浏览: 55

这段代码是一个简单的 JavaScript 脚本，它实现了以下功能： 1. 获取 HTML 页面上的三个元素：`regexInput`、`applyRegexButton` 和 `content`。 2. 监听 `applyRegexButton` 的点击事件，当按钮被点击时，执行以下操作： a. 使用 `RegExp` 构造函数创建一个正则表达式对象 `regex`，其模式为 `regexInput` 元素的值，并设置全局匹配标志 `g`。 b. 获取 `content` 元素的原始内容 `originalContent`。 c. 使用 `replace()` 方法将 `originalContent` 中所有匹配 `regex` 的文本替换为带有 `matched-text` 类名的 `<span>` 元素，并将结果保存到 `modifiedContent` 中。 d. 将 `modifiedContent` 替换 `content` 元素的内容，这样页面上所有匹配的文本都将被带有 `matched-text` 类名的 `<span>` 元素所包裹并高亮显示。总之，这段代码是一个用于在 HTML 页面上实现正则表达式搜索和高亮显示的工具。

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>leon</title> <style> * { margin: 0; padding: 0; } form { width: 500px; padding: 20px; border: 10px solid pink; border-radius: 15px; margin: 50px auto; display: flex; flex-direction: column; } form > label { height: 50px; position: relative; } form > label > span { position: absolute; left: 20px; bottom: 5px; color: red; display: none; } form > label > span.active { display: block; } </style> </head> <body> <form action=""> <label for=""> 用户名 : <input class="username" type="text"> <span>用户名必须字母开头6-12位, 请重新填写 ^^</span> </label> <label for=""> 密码 : <input class="password" type="text"> <span>密码必须6-12位, 请重新填写 ^^</span> </label> <label for=""> 手机号 : <input class="phone" type="text"> <span>手机号不符合规则, 请重新填写 ^^</span> </label> <label for=""> 昵称 : <input class="nickname" type="text"> <span>昵称必须3~5位中文, 请重新填写 ^^</span> </label> <button>提交</button> </form> </body> </html> <script src="./index.js" type="module"></script>请编写js代码实现功能，并满足在输入时验证不正确显示active样式

好的，您可以尝试使用以下 JavaScript 代码实现您的功能需求： ```js const form = document.querySelector('form'); const usernameInput = document.querySelector('.username'); const passwordInput = document.querySelector('.password'); const phoneInput = document.querySelector('.phone'); const nicknameInput = document.querySelector('.nickname'); const usernameSpan = document.querySelector('.username + span'); const passwordSpan = document.querySelector('.password + span'); const phoneSpan = document.querySelector('.phone + span'); const nicknameSpan = document.querySelector('.nickname + span'); function checkUsername() { const username = usernameInput.value.trim(); const regex = /^[a-zA-Z]\w{5,11}$/; if (!regex.test(username)) { usernameSpan.classList.add('active'); return false; } else { usernameSpan.classList.remove('active'); return true; } } function checkPassword() { const password = passwordInput.value.trim(); if (password.length < 6 || password.length > 12) { passwordSpan.classList.add('active'); return false; } else { passwordSpan.classList.remove('active'); return true; } } function checkPhone() { const phone = phoneInput.value.trim(); const regex = /^1[3-9]\d{9}$/; if (!regex.test(phone)) { phoneSpan.classList.add('active'); return false; } else { phoneSpan.classList.remove('active'); return true; } } function checkNickname() { const nickname = nicknameInput.value.trim(); const regex = /^[\u4e00-\u9fa5]{3,5}$/; if (!regex.test(nickname)) { nicknameSpan.classList.add('active'); return false; } else { nicknameSpan.classList.remove('active'); return true; } } function checkForm() { const isUsernameValid = checkUsername(); const isPasswordValid = checkPassword(); const isPhoneValid = checkPhone(); const isNicknameValid = checkNickname(); return isUsernameValid && isPasswordValid && isPhoneValid && isNicknameValid; } form.addEventListener('submit', (event) => { event.preventDefault(); if (checkForm()) { alert('恭喜，验证通过！'); } else { alert('很抱歉，验证失败，请检查输入！'); } }); usernameInput.addEventListener('input', checkUsername); passwordInput.addEventListener('input', checkPassword); phoneInput.addEventListener('input', checkPhone); nicknameInput.addEventListener('input', checkNickname); ``` 这段代码主要做了以下几个事情： 1. 通过 `querySelector` 方法获取表单元素和相关的输入框和提示文本元素； 2. 分别编写了 4 个验证函数，用于验证用户名、密码、手机号和昵称的格式是否符合要求，并在验证失败时添加 `active` 类名以显示提示文本； 3. 编写了一个 `checkForm` 函数，用于检查整个表单是否通过验证； 4. 在表单提交事件中，阻止默认行为，调用 `checkForm` 函数检查表单是否通过验证，并根据结果显示相应的提示信息； 5. 在输入框的输入事件中，调用相应的验证函数进行实时验证。通过这样的代码实现，用户在输入时会实时得到验证的反馈，如果输入不合法，则会显示相应的提示文本。如果用户提交表单时，表单中有任何一个输入框不合法，则会提示用户重新检查输入。如果全部通过验证，则会提示用户验证通过。同时，不正确的输入会添加 `active` 类名来显示提示文本，让用户更加直观地了解错误原因。

开发一个美观大方的修改密码表单界面，包含3个表单项：旧密码、新密码和确认密码，监听表单提交事件，当表单提交时完成如下3种检查 1.要求输入的旧密码字符个数必须大于6个字符小于12个字符，否则在旧密码输入框的后面以红色字体提示“旧密码长度有误”； 2.要求输入的新密码和确认密码相同，否则在确认密码的下面以红色字体显示“新密码与确认密码不一致”； 3.新密码里必须包含数字、字母和特殊符号，否则在新密码输入框后面提示“必须包含数字、字母和特殊符号”。

以下是一个基本的修改密码表单界面，包含3个表单项，以及相应的检查提示和提交事件监听： ``` <!DOCTYPE html> <html> <head> <title>修改密码</title> <style> form { border: 1px solid #ccc; padding: 20px; width: 300px; margin: 0 auto; } input[type="password"] { width: 100%; padding: 10px; margin-bottom: 20px; } .error { color: red; font-size: 12px; margin-top: 5px; } .success { color: green; font-size: 12px; margin-top: 5px; } </style> </head> <body> <form id="password-form" action="#" method="post"> <h2>修改密码</h2> <label for="old-password">旧密码：</label> <input type="password" id="old-password" name="old-password"> <span class="error" id="old-password-error"></span> <label for="new-password">新密码：</label> <input type="password" id="new-password" name="new-password"> <span class="error" id="new-password-error"></span> <label for="confirm-password">确认密码：</label> <input type="password" id="confirm-password" name="confirm-password"> <span class="error" id="confirm-password-error"></span> <input type="submit" value="提交"> <span class="success" id="success-message"></span> </form> <script> const form = document.querySelector('#password-form'); const oldPasswordInput = document.querySelector('#old-password'); const newPasswordInput = document.querySelector('#new-password'); const confirmPasswordInput = document.querySelector('#confirm-password'); const oldPasswordError = document.querySelector('#old-password-error'); const newPasswordError = document.querySelector('#new-password-error'); const confirmPasswordError = document.querySelector('#confirm-password-error'); const successMessage = document.querySelector('#success-message'); form.addEventListener('submit', (event) => { event.preventDefault(); // 重置提示信息 oldPasswordError.textContent = ''; newPasswordError.textContent = ''; confirmPasswordError.textContent = ''; successMessage.textContent = ''; // 检查旧密码长度 if (oldPasswordInput.value.length < 6 || oldPasswordInput.value.length > 12) { oldPasswordError.textContent = '旧密码长度有误'; } // 检查新密码和确认密码是否相同 if (newPasswordInput.value !== confirmPasswordInput.value) { confirmPasswordError.textContent = '新密码与确认密码不一致'; } // 检查新密码是否包含数字、字母和特殊符号 const regex = /^(?=.*[0-9])(?=.*[a-zA-Z])(?=.*[@#$%^&+=])/ if (!regex.test(newPasswordInput.value)) { newPasswordError.textContent = '必须包含数字、字母和特殊符号'; } // 如果没有错误提示，则提交表单并显示成功信息 if (!oldPasswordError.textContent && !newPasswordError.textContent && !confirmPasswordError.textContent) { successMessage.textContent = '密码修改成功！'; form.reset(); } }); </script> </body> </html> ``` 该表单界面使用了 html、css 和 JavaScript，其中： - html 中包含了一个 form 元素和三个 input 元素（类型为 password），以及相应的 label 元素和提示信息的 span 元素； - css 中为表单界面设置了一些基本样式； - JavaScript 中对表单的提交事件进行了监听，然后进行了三种检查，根据检查结果显示相应的错误提示或成功信息。注意，以上只是一个基本的示例，实际情况中可能还需要对表单提交事件进行更多的检查和处理。

相关推荐

2.const对象-NULL和nullptr-C++中创建对象数组.docx

jiaochunxiao#fe-blog#Node.js入门教程-HTTP服务1

cutepig123#cutepig123.github.io#2021-07-22-如何写好代码1

html中文本输入的第一个字符必须是字母，并且字数不能超过20个不能小于6个，并且必须存在@，若文本输入框中内容输入错误后，并点击按钮提交后，如何在该文本输入框的末尾显示红色的"您输入错误"的文字

js监听一个input输入框，限制只能输入0以上的正整数

js如何判断input内容是否有表情

写一个input输入框校验规则，限制输入内容为金额格式

js监听一个input输入框，限制只能输入一个以0开头，最多保留2位的小数

帮我用vue 提取一下 这个a标签的网址和内容 规范性文件

input 输入框内不正确分隔符号变红

前端做模糊搜索

input实现邮箱验证

正则表达 input 只能输入数字且保留俩位小数

前端最多输入50个字符的正则，用代码举例

在一个表单中，要求输入正确格式的E-mail地址，要求在html页面中画出简单的表单输入，并运用正则表达式对其数据进行验证，并将验证结果以alert形式弹出。

js读取文件获取指定字符串

最新推荐

Last Loaded 8只数码管滚动显示数字串.DBK

yolo开发ention-model-for-networ笔记

微信小程序前端解密获取手机号

EXP2.html

zigbee-cluster-library-specification

管理建模和仿真的文件

MATLAB柱状图在信号处理中的应用：可视化信号特征和频谱分析

解释这行代码 c = ((double)rand() / RAND_MAX) * (a + b - fabs(a - b)) + fabs(a - b);

JSBSim Reference Manual

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

帮我用vue 提取一下这个a标签的网址和内容规范性文件