這個(gè)小的HTML5密碼字段在沒(méi)有oninvalid屬性的情況下可以完美工作（模式說(shuō)：最少6個(gè)字符）：<form> <input type="password" name="user_password_new" pattern=".{6,}" required /> <input type="submit" name="register" value="Register" /></form>在這里查看jsFiddle 。但是，當(dāng)我添加一個(gè)oninvalid屬性，當(dāng)用戶(hù)的輸入不適合該模式時(shí)，該屬性會(huì)發(fā)出自定義錯(cuò)誤消息，整個(gè)字段從不生效，請(qǐng)參見(jiàn)此處的代碼：<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 。你能發(fā)現(xiàn)錯(cuò)誤嗎？
3 回答
白衣染霜花
TA貢獻(xiàn)1796條經(jīng)驗(yàn) 獲得超10個(gè)贊
如果使用設(shè)置值，setCustomValidity()則該字段無(wú)效。設(shè)置一個(gè)非零長(zhǎng)度的字符串會(huì)導(dǎo)致瀏覽器認(rèn)為該字段無(wú)效。為了考慮任何其他驗(yàn)證的影響，您必須清除自定義有效性：
<input type="password" name="user_password_new" pattern=".{6,}" required
oninvalid="setCustomValidity('Minimum length is 6 characters')"
oninput="setCustomValidity('')" />
子衿沉夜
TA貢獻(xiàn)1828條經(jīng)驗(yàn) 獲得超3個(gè)贊
由于我偶然發(fā)現(xiàn)了相同的問(wèn)題，因此這是我的解決方案-經(jīng)過(guò)測(cè)試，并與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>
說(shuō)明：
setCustomValidity(''); 刪除自定義錯(cuò)誤字符串，否則將始終在驗(yàn)證過(guò)程中導(dǎo)致無(wú)效字段。
checkValidity();進(jìn)行手動(dòng)驗(yàn)證–與表單提交時(shí)一樣。結(jié)果存儲(chǔ)在中validity.valid。
第二個(gè)setCustomValidity(validity.valid ? '' :'please enter 1234');現(xiàn)在根據(jù)驗(yàn)證結(jié)果設(shè)置錯(cuò)誤字符串。如果該字段有效，則必須為空，否則可以設(shè)置自定義錯(cuò)誤字符串。
- 3 回答
- 0 關(guān)注
- 921 瀏覽
添加回答
舉報(bào)
0/150
提交
取消