怎么才能快速制作一个带有 valid 控制的 input 框？

2023-05-27 19:56:22

在 HTML 和 CSS 中轻松制作带有有效性控制的输入框

在构建用户界面时，我们经常需要创建带有输入验证功能的输入框。虽然看起来很简单，但使用 HTML 和 CSS 来实现它却可能令人头疼，特别是对于初学者来说。不过，掌握一些技巧，你就可以轻松实现带有有效性控制的输入框。

HTML 结构

首先，我们需要使用 HTML 创建一个输入框。以下是所需的 HTML 代码：

<label for="name">姓名：</label>
<input type="text" id="name" name="name" required>

<label> 标签创建一个标签，用于指示输入框的用途并将其与输入框关联。
<input> 标签创建输入框，其中 type="text" 指定它是一个文本输入框。
id 和 name 属性用于识别输入框，以便在 JavaScript 中轻松访问。
required 属性确保用户必须输入值才能提交表单。

CSS 样式

接下来，我们需要使用 CSS 来设置输入框的样式。以下是所需的 CSS 代码：

#name {
  width: 200px;
  padding: 5px;
  margin: 5px;
  border: 1px solid #ccc;
  border-radius: 5px;
}

#name:focus {
  border-color: #666;
}

#name:valid {
  border-color: #00ff00;
}

#name:invalid {
  border-color: #ff0000;
}

#name 选择器指定输入框的样式。
#name:focus 选择器在输入框获得焦点时应用样式。
#name:valid 和 #name:invalid 选择器分别在输入框包含有效值和无效值时应用样式。

有效性验证

为了实现有效性控制，我们可以使用 JavaScript 来检查输入值。下面是一个简单的示例：

const input = document.getElementById('name');

input.addEventListener('input', () => {
  if (input.validity.valid) {
    // 输入值有效
    input.classList.add('valid');
  } else {
    // 输入值无效
    input.classList.add('invalid');
  }
});