DOM基础测试38 - 表单验证

[JaimeCheng]

题目： 原issue

回答：

// 我的回答 8分
// 1
const res1 = document.querySelectorAll('input[type="radio"]:required')
// 2
const res2 = document.querySelectorAll('input[type="radio"]:disabled')
//3 
const res3 = document.querySelectorAll('input[type="radio"]:checked')
// 4
const btn = document.getElementById('removeDisabled')
btn.onclick = function () {
  [...res2].forEach(el => {
    if (!el.getAttribute('disabled')) {
      document.querySelector('fieldset').removeAttribute('disabled')
    }
    el.removeAttribute('disabled')
  })
}

/* 5 */
input[type='radio']:invalid {
  outline: 3px dashed red;
}

高分回答1 | 高分回答2

总结：

1. 表单元素的味蕾不熟悉；
2. 不知道
   标签；
3. 也不熟悉原生js表单验证；

> 在线demo <

[JaimeCheng]

zxx: 本期要点

1. :required伪类，IE10+支持。和[required]属性选择器的区别，。
2. :disabled伪类，IE9+支持。和[disabled]属性选择器的区别，有些表单元素本身没有[disabled]属性，但是，自身是处于应用态的。这就是:disabled伪类设计的原因之一。
3. :checked伪类，IE9+支持。和[checked]属性选择器的区别，有些单复选框虽然有[checked]属性，但是本身并不是选中态。这就是:checked伪类设计的原因之一。
4. 可以disabled所有的表单元素，一次性，IE也是支持的。
5. 关于验证的：:invalid伪类可以查询到验证有误的元素，IE10+支持。radio.validity.valid可以知道一个表单元素当前的验证状态。以及item.checkValidity()验证方法（true或false）。 具体可以参见：https://www.zhangxinxu.com/wordpress/?p=8895
6. 省略3px才有可能得到满分，outline: dashed red，因为border, outline默认的线框计算值就是3px （medium）。
7. 关于上面伪类更多更深入的知识可以参见我的新书《CSS选择器世界》，如果想要签名版可以：微店 https://weidian.com/item.html?itemID=2996663073， 或者淘宝，买签名送书 https://item.taobao.com/item.htm?spm=a1z10.1-c-s.w4004-22121509848.2.5a4b7ff7jBa4wh&id=604865008086 只会讲大家不知道的知识。