表单 – HTML5验证

发布时间:2020-01-14 发布网站:脚本之家
脚本之家收集整理的这篇文章主要介绍了表单 – HTML5验证脚本之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我想知道HTML5是否具有双重条目的表单验证(写入2个相同的密码),并且可以编写自己的异常?

Thanx提前!

解决方法

如果你想要一些更好的和HTML5的利用,请尝试:
http://www.html5rocks.com/en/tutorials/forms/html5forms/
<label>Password:</label>
<input type="password" id="password" name="password">
<label>Confirm Password:</label>
<input type="password" id="passwordconf" name="passwordconf" oninput="check(this)">
<script language='javascript' type='text/javascript'>
function check(input) {
    if (input.value != document.getElementById('password').value) {
        input.setCustomValidity('The two passwords must match.');
    } else {
        // input is valid -- reset the error message
        input.setCustomValidity('');
   }
}
</script>

通过将它添加到您的CSS(下图)来使其变幻莫测.当HTML5验证失败时,它会在不利的输入字段周围放置一个红色的边框.

:invalid {
     border: 2px solid #ff0000;
}

全做完了.您仍然应该使用alert()或服务器端验证来确保用户正确输入两个密码.不要依靠客户端任何东西.

总结

以上是脚本之家为你收集整理的表单 – HTML5验证全部内容,希望文章能够帮你解决表单 – HTML5验证所遇到的程序开发问题。

如果觉得脚本之家网站内容还不错,欢迎将脚本之家网站推荐给程序员好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您喜欢交流学习经验,点击链接加入脚本之家官方QQ群:1065694478
脚本之家官方公众号

微信公众号搜索 “ 程序精选 ” ,选择关注!

微信公众号搜索 “ 程序精选 ”
精选程序员所需精品干货内容!