阅读量:0
HTML5中的
valid表示输入内容符合要求，invalid表示不符合要求，而required属性用于标记必填字段。在HTML5中，表单验证变得更加简便和高效，这主要得益于引入了三个关键属性：valid、invalid和required，这些属性极大地简化了前端表单验证的过程，减少了对JavaScript的依赖。
### valid属性
valid属性用于指示输入元素的值是否符合指定的条件，当输入字段满足所有约束时，该元素会被标记为有效，并触发:valid伪类，对于一个email类型的输入框，只有当用户输入符合电子邮件格式的字符串时，该输入框才会被标记为有效。
```html
```
在这个例子中，当用户在email输入框中键入内容时，会触发一个事件监听器，检查输入是否有效，并在控制台中打印相应的消息。
### invalid属性
invalid属性与valid属性相反，它用于指示输入元素的值不符合指定的条件，当输入字段不满足约束时，该元素会被标记为无效，并触发:invalid伪类，如果一个数字输入框中包含非数字字符，那么该输入框会被标记为无效。
```html
```
在这个例子中，当用户在年龄输入框中键入内容时，同样会触发一个事件监听器，检查输入是否有效，并在控制台中打印相应的消息。
### required属性
required属性是一个布尔属性，用于指示输入字段在提交表单之前必须被填写，如果一个输入元素带有required属性，而用户尝试提交表单时该字段为空，则浏览器会阻止表单的提交，并显示一条提示消息。
```html
```
在这个例子中，姓名字段被标记为必填项，如果用户未填写姓名就点击提交按钮，浏览器会阻止表单提交，并显示一条错误消息。
### valid、invalid和required的样式自定义
可以通过CSS来自定义valid和invalid状态的样式，可以改变有效或无效输入框的边框颜色，以直观地告诉用户哪些字段需要关注。
```css
input:valid {
border: 2px solid green;
input:invalid {
border: 2px solid red;
```
在这个CSS规则中，有效的输入框会有绿色的边框，而无效的输入框会有红色的边框。
HTML5中的valid、invalid和required属性为表单验证提供了强大的支持，使得开发者能够更轻松地实现复杂的验证逻辑，同时为用户提供更好的交互体验，通过合理使用这些属性，可以确保数据的准确性和完整性，提高Web应用的质量。
HTML5 中valid、invalid、required 的定义
1.required 属性
定义：required 属性用于指定一个表单字段是必填的。
使用场景：在创建表单时，如果某个字段是必须填写的，可以使用required 属性来强制用户填写。
示例：
```html
<input type="text" name="username" required>
```
在这个例子中，用户必须填写username 字段才能提交表单。
2.valid 属性
定义：valid 属性表示元素的内容是有效的。
使用场景：当用户输入的内容符合元素定义的验证规则时，valid 属性会被设置为true。
示例：
```html
<input type="email" id="email" name="email" required>
<script>
var email = document.getElementById('email');
if (email.checkValidity()) {
console.log('Email is valid');
} else {
console.log('Email is invalid');
}
</script>
```
在这个例子中，如果用户输入的电子邮件地址格式正确，valid 将返回true。
3.invalid 属性
定义：invalid 属性表示元素的内容是无效的。
使用场景：当用户输入的内容不符合元素定义的验证规则时，invalid 属性会被设置为true。
示例：
```html
<input type="email" id="email" name="email" required>
<script>
var email = document.getElementById('email');
if (email.checkValidity()) {
console.log('Email is valid');
} else {
console.log('Email is invalid');
}
</script>
```
在这个例子中，如果用户输入的电子邮件地址格式不正确，invalid 将返回true。
required 用于指定必填字段。
valid 用于表示字段内容有效。
invalid 用于表示字段内容无效。
这些属性提供了增强的表单验证功能，使得用户输入的数据更加准确和可靠。
