序言
前端开发的童鞋在写网页页面时, 都不能防止的总会踩到 表单认证 这个坑. 这时候候, 大家就要跪了, 由于要写1堆 js 来查验. 可是自从 H5 出現后, 许多普遍的 表述认证 , 它都早已帮大家完成了, 让大家减轻了许多压力, 就仿佛下面的:
电子邮箱详细地址认证:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF⑻">
<title>Test</title>
</head>
<body>
<form action="">
<label >
电子邮箱: <input type="email">
</label>
<input type="submit">
</form>
</body>
</html>
电子邮箱认证是 H5 本身适用的, 可是大家要认证的情景和状况是多种多样多样的, 那应该怎么办? 用回 Js 吗? 很显著没这么蛋疼, 由于 H5 出示了 pattern 特性, 让大家自立更生! 大家能够在 pattern 特定正则表达式表述式, 要是正则表达式写的好, 认证就没苦恼!
正则表达式限制11位数据:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF⑻">
<title>Test</title>
</head>
<body>
<form action="">
<label >
数据: <input type="text" pattern="^\d{11}$">
</label>
<input type="submit">
</form>
</body>
</html>
难题
大伙儿能够尝试下, 在键入非11位的数据, 都会出错, 这便是 pattern 的贡献. 可是不知道道大伙儿发现了1个蛋疼的状况没? 便是假如我们应用 pattern 的方法去认证表单, 在认证不成功时, 它的提醒全是 请与所恳求的文件格式维持1致 , 我的天, 大家的客户如何了解所恳求的文件格式是甚么鬼, 总不可以让她们去看源代码吧, 要真这样, 大家连网页页面都无需写了, 立即让她们把钱给大家得了, 开个玩笑话~
处理计划方案
有难题, 我们就得处理, 在朝向谷歌程序编写好久, 终究觅得1良方:
oninvalid：递交的input元素的值为失效值时（这里是正则表达式认证不成功），开启
oninvalid恶性事件。oninvalid属于Form 恶性事件。
setCustomValidity()：这个是HTML5内嵌的JS方式，用来自定提醒信息内容
原先能够根据 oninvalid 和 setCustomValidity 来自定提醒, 那这就好办了, 改动源码以下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF⑻">
<title>Test</title>
</head>
<body>
<form action="">
<label >
数据: <input type="text" pattern="^\d{11}$" oninvalid="setCustomValidity('请键入11位数据')">
</label>
<input type="submit">
</form>
</body>
</html>
結果:
终究并不是那个蛋疼的"文件格式"了, 如今表单认证提醒早已很确立的告知大家, 这里应当键入的是甚么样的数据信息, 这样客户就可以更好的改动自身的键入了!
以上所述是网编给大伙儿详细介绍的HTML5 表单认证不成功的提醒语难题，期待对大伙儿有一定的协助，假如大伙儿有任何疑惑请给我留言，网编会立即回应大伙儿的。在此也十分谢谢大伙儿对脚本制作之家网站的适用！