html中文本输入的第一个字符必须是字母,并且字数不能超过20个不能小于6个,并且必须存在@,若文本输入框中内容输入错误后,并点击按钮提交后,如何在该文本输入框的末尾显示红色的"您输入错误"的文字
时间: 2024-03-02 14:49:34 浏览: 27
您可以使用JavaScript来实现这个功能。首先,使用`document.querySelector()`方法获取到该文本输入框的DOM元素,并获取到其输入的值。然后,使用正则表达式来验证输入值是否符合要求。如果不符合要求,可以使用`element.style.color`属性将文本输入框的文字颜色设置为红色,并在文本输入框的末尾使用`element.insertAdjacentHTML()`方法添加一段红色的错误提示文字。
以下是一个可能的实现代码:
```javascript
const inputBox = document.querySelector("#input-box"); // 获取文本输入框的DOM元素
const submitButton = document.querySelector("#submit-button"); // 获取提交按钮的DOM元素
submitButton.addEventListener("click", function() {
const inputValue = inputBox.value; // 获取文本输入框的值
// 使用正则表达式验证输入值是否符合要求
const regex = /^[a-zA-Z][a-zA-Z0-9@]{4,19}$/;
const isInputValid = regex.test(inputValue);
if (!isInputValid) {
inputBox.style.color = "red"; // 设置文本输入框的文字颜色为红色
inputBox.insertAdjacentHTML("afterend", "<p style='color: red;'>您输入错误</p>"); // 在文本输入框的末尾添加一段红色的错误提示文字
}
});
```