这个小的HTML5密码字段可以在没有oninvalid属性的情况下完美运行(该模式说:最少6个字符):
<form> <input type="password" name="user_password_new" pattern=".{6,}" required /> <input type="submit" name="register" value="Register" /> </form>
在这里查看jsFiddle 。
但是,当我添加一个oninvalid属性,当用户的输入不适合该模式时,该属性会发出自定义错误消息,整个字段永远不会有效,请参见此处的代码:
<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>
你能发现错误吗?
如果使用设置值,setCustomValidity()则该字段无效。设置非零长度的字符串会导致浏览器认为该字段无效。为了考虑任何其他验证的影响,您必须清除自定义有效性:
setCustomValidity()
<input type="password" name="user_password_new" pattern=".{6,}" required oninvalid="setCustomValidity('Minimum length is 6 characters')" oninput="setCustomValidity('')" />