Hyperscript中如何实现表单所有必填输入项合法后启用提交按钮

你需要在button标签的_属性中填写如下Hyperscript代码：

on input from closest form if it.checkValidity() then remove @disabled else set @disabled to true

逻辑说明 #

• 监听当前按钮最近的父级表单的input事件，姓名、邮箱输入框任意一个内容变更都会触发校验
• 调用HTML原生的checkValidity()方法完成自动校验，刚好匹配你的需求：
  • 校验姓名输入框非空（对应required属性规则）
  • 校验邮箱输入框格式合法（对应type="email"+required属性规则）
• 校验通过时移除disabled属性启用按钮，校验不通过时保留disabled属性禁用按钮

如果偏好更简洁的写法，也可以用这个版本，效果完全一致：

on input from closest form set @disabled to not it.checkValidity()

内容的提问来源于stack exchange，提问作者Johan