提供客户端验证与警报____20160429


说明

此技巧用来在客户端验证用户输入数据的正确性,通过使用客户端脚本。如果找到错误,警告窗口会弹出,用文本告知用户错误的地方,一旦用户关闭警告窗口,将使用JS将键盘焦点定位到错误区域。


样例

样例1:使用事件处理器来检查单独的控件;


效果

样例2:当用户提交表单时检查多个控件;

下面的例子展示了一个表单的多个控件,表单控件使用onsubmit属性来执行检查脚本当用户提交表单的时候。如果检查成功,将会返回true,且表单继续提交,如果发现错误,将会显示出错误信息,返回false来取消提交,让用户修改错误;
注:这个例子为了简化,只展示了警告。更加有用的告知应该是错误控件高亮,将错误信息添加到网页,还有告知怎样导航到错误区域;这个例子使用onsubmit属性来检查,正常的情况是创建一个submit事件监听器当网页被加载时;

脚本代码:


html代码:


在线样例


无障碍效果

各读屏、各浏览器的支持效果

测试人:

争渡、IE11:
永德、IE11:
NVDA、IE11:
永德、chrome:
NVDA、chrome:
NVDA、Firefox:
voiceover、chrmoe:
voiceover、Safari: