這個小的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>在這里查看jsFiddle 。你能發現錯誤嗎？
3 回答
白衣染霜花
TA貢獻1796條經驗 獲得超10個贊
如果使用設置值，setCustomValidity()則該字段無效。設置一個非零長度的字符串會導致瀏覽器認為該字段無效。為了考慮任何其他驗證的影響，您必須清除自定義有效性：
<input type="password" name="user_password_new" pattern=".{6,}" required
oninvalid="setCustomValidity('Minimum length is 6 characters')"
oninput="setCustomValidity('')" />
子衿沉夜
TA貢獻1828條經驗 獲得超3個贊
由于我偶然發現了相同的問題，因此這是我的解決方案-經過測試，并與FF，Chrome，IE 10，Edge（2017年2月）一起使用。
<form>
<input pattern="1234" oninput="setCustomValidity(''); checkValidity(); setCustomValidity(validity.valid ? '' :'please enter 1234');">
<input type="email" required>
<input type="submit">
</form>
說明：
setCustomValidity(''); 刪除自定義錯誤字符串，否則將始終在驗證過程中導致無效字段。
checkValidity();進行手動驗證–與表單提交時一樣。結果存儲在中validity.valid。
第二個setCustomValidity(validity.valid ? '' :'please enter 1234');現在根據驗證結果設置錯誤字符串。如果該字段有效，則必須為空，否則可以設置自定義錯誤字符串。
- 3 回答
- 0 關注
- 926 瀏覽
添加回答
舉報
0/150
提交
取消