javascript - 如何识别HTML 5中调用无效事件的验证规则？

在HTML 5验证中，我可以使用setCustomValidity()函数设置自定义错误消息，但是当我为required设置属性<input type="email"/>时，可以设置“请输入您的电子邮件”。当required属性调用无效事件和“电子邮件格式不正确”时。对于type="email"调用的事件？

我的示例表格

<form>
    <h1>HTML 5 Custom Validation Message</h1>
    <hl>
    Email: <input type="email" id="email" required/> <br>
    Password: <input type="password" id="password" required/> <br>
    <input type="submit" value="Login" />
</form>

或by jsfiddle

最佳答案

将validity IDL属性用于该字段。它返回一个ValidityState对象，其中包含以下属性：


badInput
customError
patternMismatch
rangeOverflow
rangeUnderflow
stepMismatch
太长
类型不匹配
有效
价值缺失


根据错误的类型，每个属性的值将为true或false。对于电子邮件地址，无效的电子邮件地址将使validity.typeMatch true以及所有其他属性为false。缺少电子邮件地址将设置validity.valueMissing true，以及所有其他属性false。

使用jQuery，将是：

$("#email").on('invalid', function(e){
    var msg;
    if(e.target.validity.valueMissing){
      msg = 'Your email address is missing';
    }
    if(e.target.validity.typeMismatch){
      msg = 'Your email address is invalid';
    }
    e.target.setCustomValidity(msg);
});

Working example。

关于javascript - 如何识别HTML 5中调用无效事件的验证规则？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/22592249/