html 客户端验证,HTML5客户端端表单验证

HTML5客户端端表单验证

时间：2014-7-5

新输入类型确实有所益处,但或许HTML5为开发人员带来的最大好处是本地客户端错误检查,在提交表彰之前检查其内容对于安全性和可用性是极说罢重要的,而且到目前为止,虽然数以百计的JavaScript库都是为这个主题编写的,但始终没有一个可以实现上述功能的简单方法.

现在通过使用本地表单验证,许多浏览器会自动提醒用户其在输入中输入的值与输入类型不匹配,例如,在Firefox浏览器中,如果只在email输入中链接数字或在url输入中忽略URL开头的http://协议,那么围绕输入栏的鲜红线框将会提醒用户其输入值错误.

如果用户尝试提交表单,则会在屏幕上收到一个出错信息,如果出现错误信息,则证明用户的浏览器已经实现了客户端验证,每种已经实现这个功能的浏览器都有其自己的样式.

如果用户删除输入框内的内容,然后再次单击"提交",则不会出现错误提示,因为这一输入栏在默认情况下是可选的,所以不为其提供值是有效的,但格式不正确的值是无效和,为了使这个输入栏不可选 ,开发人员可以添加布尔型的属性required:

这个属性强制浏览器检查输入栏的值,空值或格式不正确的值是无效的,且浏览器返回一个错误,只有格式正确的值才允许用户提交表单.