label标签
label元素的作用是为控件提供可点击的文本标签，当用户点击标签时，相关的控件会获得焦点或执行相应的操作。
-
通过将
label元素的for属性设置为相关控件的id，可以将label与控件进行关联。这种方式允许用户通过点击标签来聚焦或选择相应的控件。示例代码如下：<label for="username">用户名：</label> <input type="text" id="username" name="username"> -
将控件直接放在
label元素内部，不需要使用for属性。这种方式不需要额外指定id属性，标签与控件之间的关联通过嵌套关系建立。示例代码如下：<label>用户名： <input type="text" name="username"> </label>
约束验证
validity属性
在HTML5中，validity（有效性）是一个用于验证表单字段的属性。它是在浏览器中内置的验证功能，用于检查用户输入的有效性并提供相应的反馈。
每个HTML5表单字段都具有一个validity属性，该属性包含一组布尔值，表示与字段的有效性相关的不同条件。这些条件包括以下几个方面：
-
valueMissing（值缺失）：如果字段是必填字段且没有提供值，则此属性为true。<input type="text" required> -
typeMismatch（类型不匹配）：如果字段的值与字段的预期类型不匹配（例如，邮箱字段中输入的不是有效的电子邮件地址），则此属性为true。<input type="email" required> -
patternMismatch（模式不匹配）：如果字段的值与通过正则表达式定义的模式不匹配，则此属性为true。模式可以使用pattern属性进行指定。<input type="text" pattern="[0-9]{3}-[0-9]{3}-[0-9]{4}" required> -
tooShort（长度过短）：如果字段的值长度小于通过minLength属性指定的最小长度，则此属性为true。<input type="text" minlength="6" required> -
tooLong（长度过长）：如果字段的值长度大于通过maxLength属性指定的最大长度，则此属性为true。<input type="text" maxlength="10" required> -
rangeUnderflow（范围过低）：如果字段的值小于通过min属性指定的最小值，则此属性为true。<input type="number" min="0" required> -
rangeOverflow（范围过高）：如果字段的值大于通过max属性指定的最大值，则此属性为true。<input type="number" max="100" required> -
stepMismatch（步骤不匹配）：如果字段的值不符合通过step属性指定的步长要求，则此属性为true。<input type="number" step="2" required>
setCustomValidity方法
在HTML5中，setCustomValidity是一个用于设置自定义验证消息的方法。它可以用于覆盖浏览器默认的验证消息，并根据自定义逻辑设置验证字段的有效性。
<form>
<input type="text" id="username" required>
<button type="submit">Submit</button>
</form>
<script>
const usernameInput = document.getElementById('username');
usernameInput.addEventListener('input', function() {
if (usernameInput.value.length < 6) {
usernameInput.setCustomValidity('Username must be at least 6 characters long.');
} else {
usernameInput.setCustomValidity('');
}
});
</script>此方法也可结合validity属性使用，可用validity属性中的字段的布尔值作为校验依据。
表单美化
CSS选择器
-
:required和:optional是CSS伪类选择器，用于选择表单元素（如input、select、textarea等）中的必填和可选项。:required伪类选择器选择需要填写的表单元素，即具有required属性的表单元素。这些元素在提交表单之前必须包含值，否则会触发HTML5验证，并阻止表单的提交。示例：
cssCopy codeinput:required { border-color: red; }上述CSS规则将选择所有带有
required属性的输入元素，并将其边框颜色设置为红色。:optional伪类选择器选择可选的表单元素，即没有required属性的表单元素。这些元素可以包含值，也可以为空。示例：
cssCopy codeinput:optional { opacity: 0.5; }上述CSS规则将选择所有没有
required属性的输入元素，并将其透明度设置为0.5。这些伪类选择器可以帮助我们根据表单元素的必填和可选状态来应用不同的样式或行为。
-
在css中设置label后的名称以及选中边框样式
示例：
input:optional{ content:"(选填)"; outline: 0 } input:required{ content:"(必填)" box-shadow: 0 0 3px 1px #aa0088 } -
:valid和:invalid是 CSS 伪类选择器，用于选择表单元素的验证状态。:valid伪类选择器匹配符合验证规则的表单元素，即通过验证的元素。这些元素可以包含有效的值，并满足其所定义的验证条件。示例：
cssCopy codeinput:valid { border-color: green; }上述 CSS 规则将选择所有通过验证的输入元素，并将其边框颜色设置为绿色。
:invalid伪类选择器匹配不符合验证规则的表单元素，即未通过验证的元素。这些元素包含无效的值或不满足其所定义的验证条件。示例：
cssCopy codeinput:invalid { border-color: red; }上述 CSS 规则将选择所有未通过验证的输入元素，并将其边框颜色设置为红色。
这些伪类选择器可以帮助我们根据表单元素的验证状态来应用不同的样式或行为。它们通常与 HTML5 的表单验证机制一起使用，可以基于浏览器自动验证的结果来进行样式调整或其他交互。
事件优化
-
使用
oninput和oninvalid设置验证结果示例：
<input type="text" name="tel" id="tel" autofocus required placeholder="Enter your name" pattern="^[0-9]{5}$" oninput="this.setCustomValidity('')" oninvalid="this.setCustomValidity('请输入正确的手机号码')"> -
使用JavaScript判断两次密码输入是否一致
示例：
function checkPassword(){ var password = document.getElementById('password').value; var RepeatPassword = document.getElementById('Repeat password').value; if(password != RepeatPassword){ RepeatPassword.setCustomValidity('两次输入的密码不一致'); } else{ RepeatPassword.setCustomValidity(''); } } -
去除默认起泡样式
示例：
// 用于替换表单的默认无效样式的函数 function replaceInvalidityUi(form) { // 为表单添加 'invalid' 事件监听器 form.addEventListener('invalid', function(event) { event.preventDefault(); // 阻止默认的无效表单提交行为 }, true); // 为表单添加 'submit' 事件监听器 form.addEventListener('submit', function(event) { if (!this.checkValidity()) { // 检查表单是否有效 event.preventDefault(); // 阻止表单提交 } }, true); // 在表单中找到提交按钮 var submitButton = form.querySelector('input[type="submit"]'); // 为提交按钮添加 'click' 事件监听器 submitButton.addEventListener('click', function(event) { // 在表单中找到所有无效字段 var invalidFields = form.querySelectorAll(':invalid'); // 在表单中找到所有错误消息元素 var errorMessages = form.querySelectorAll('.error-message'); // 从DOM中删除现有的错误消息 for (var i = 0; i < errorMessages.length; i++) { errorMessages[i].parentNode.removeChild(errorMessages[i]); } // 为每个无效字段添加错误消息 for (var i = 0; i < invalidFields.length; i++) { var invalidField = invalidFields[i]; invalidField.insertAdjacentHTML('afterend', '<div class="error-message">' + invalidField.validationMessage + '</div>'); } // 如果存在无效字段，则将焦点设置在第一个无效字段上 if (invalidFields.length > 0) { invalidFields[0].focus(); } }); } // 获取具有ID 'form' 的表单元素 var form = document.getElementById('form'); // 调用 replaceInvalidityUi 函数，为表单替换无效样式 replaceInvalidityUi(form);
