这个小的HTML5密码字段完全符合oninvalid属性(模式说:最少6个字符):
<form> <input type="password" name="user_password_new" pattern=".{6,}" required /> <input type="submit" name="register" value="Register" /> </form>
看到jsfiddle here。
但是当我添加一个无效的属性,当用户的输入不符合模式时,会发出自定义错误消息,整个字段永远不会变为有效,请参见以下代码:
<form> <input type="password" name="user_password_new" pattern=".{6,}" oninvalid="setCustomValidity('Minimum length is 6 characters')" required /> <input type="submit" name="register" value="Register" /> </form>
看到jsfiddle here。
你能发现错误吗?
解决方法
如果使用setCustomValidity()设置值,则该字段无效。这是设置非零长度字符串导致浏览器将该字段视为无效。为了允许任何其他验证的效果,您必须清除自定义有效性:
<input type="password" name="user_password_new" pattern=".{6,}" required oninvalid="setCustomValidity('Minimum length is 6 characters')" oninput="setCustomValidity('')" />