本文转自http://tid.tenpay.com/?p=3592

HTML5表单验证给前端人员带来了便利，但是在用户体验上存在一些缺陷，默认的提示对用户很不友好，无法准确的获取想要的信息。好在大牛们在接口设计的时候提供了setCustomValidilty方法可以自定义提示信息。这是一个好消息，但也存在一些弊端，需要让开人员做额外的一些处理才达到真正想要的目的。

接下来通过以下示例来阐述方法的应用。

未调用setCustomValidity()方法

 <!DOCTYPE html>

 <html>

 <head>

     <mata charset="utf-8">

     <title>form test</title>

 </head>

 <body>

     <form name="test" action="." method="post">

         <input type="text" required pattern="^\d{4}$" placeholder="请输入代码" >

         <button type="submit">Check</button>

     </form>

 </body>

 </html>

执行结果：

这两个结果都匹配了。但是不匹配这里的提示方案案与预想的不符合。

通过调用setCustomValidity方法来优化提示文案

<!DOCTYPE html>

<html>

<head>

    <mata charset="utf-8">

    <title>form test</title>

</head>

<body>

    <form name="test" action="." method="post">

        <input type="text" required pattern="^\d{4}$" placeholder="请输入代码" >

        <button type="submit">Check</button>

    </form>

<script type="text/javascript">

    document.querySelector("input").setCustomValidity("请输入4位数字的代码");

</script>

</body>

</html>

执行结果：

从三个操作来看，调用了setCustomValidity方法后，原生的表单验证罗辑都返回false了。悲剧。

再看看接口属性的变化

调用之前：

A）

B)

C)

调用之后：

A）

B)

C)

总结一下：
从面上可以看出，验证通过与否除了跟validity接口下的属性相关外，还跟validationMessage是否有值有关系。只有当validity接口下的属性（customError除外）都为false并且validationMessage为空时才算验证通过。

优化后的代码：

<!DOCTYPE html>

<html>

<head>

    <mata charset="utf-8">

    <title>form test</title>

</head>

<body>

    <form name="test" action="." method="post">

        <input type="text" required pattern="^\d{4}$" oninput="out(this)" placeholder="请输入代码" >

        <button type="submit">Check</button>

    </form>

<script type="text/javascript">

function out(i){

    var v = i.validity;

    if(true === v.valueMessing){

        i.setCustomValidity("请填写些字段");

    }else{

        if(true === v.patternMismatch){

            i.setCustomValidity("请输入4位数字的代码");

        }else{

            i.setCustomValidity("");

        }

    }

}

</script>

</body>

</html>

　　

HTML5应用：setCustomValidity(message)接口的更多相关文章

  1. 使用HTML5里页面可见性接口判断用户是否正在观看你的页面

    转自:http://www.webhek.com/page-visibility 长期以来我们一直缺少一个判断用户是否正在浏览某个指定标签页的方法.用户是否去看别的网站了?他们切换回来了么?现在,HT ...

  2. 《HTML5网页开发实例详解》连载（四）HTML5中的FileSystem接口

    HTML 5除了提供用于获取文件信息的File对象外,还添加了FileSystem相关的应用接口.FileSystem对于不同的处理功能做了细致的分类,如用于文件读取和处理的FileReader和Fi ...

  3. HTML5学习之FileReader接口

    http://blog.csdn.net/zk437092645/article/details/8745647 用来把文件读入内存,并且读取文件中的数据.FileReader接口提供了一个异步API ...

  4. html5视频常用API接口

    一.虽然有的属性是boolean类型,但仍旧建议按照XHTML书写(属性名=”属性值”)格式,避免出现错误 (下面加粗的属性为常用属性) 属性 值 功能描述 controls controls 是否显 ...

  5. HTML5 使用application cache 接口实现离线数据缓存

    1.配置缓存文件 cache manifest MIME TYPE:text/cache-manifest文件名称:name.appcache作用:用于配置需要缓存的文件 2.使用方法 在服务器上添加 ...

  6. HTML5 页面调用微信接口

    参考微信微信官方文档JS_SDK:https://mp.weixin.qq.com/wiki/7/aaa137b55fb2e0456bf8dd9148dd613f.html#JSSDK.E4.BD.B ...

  7. 深入HTML5 Web Worker应用实践：多线程编程

    HTML5 中工作线程(Web Worker)简介 至 2008 年 W3C 制定出第一个 HTML5 草案开始,HTML5 承载了越来越多崭新的特性和功能.它不但强化了 Web 系统或网页的表现性能 ...

  8. HTML5中表单验证的8种方法(转)

    在深人探讨表单验证之前,让我们先思考一下表单验证的真实含义.就其核心而言,表单验证是一套系统,它为终端用户检测无效的控件数据并标记这些错误.换言之,表单验证就是在表单提交服务器前对其进行一系列的检查并 ...

  9. html5自带表单验证-美化改造

    神奇的代码 暂且叫做html5.css /* === HTML5 validation styles === */ .myform select:required, .myform input:req ...

随机推荐

  1. Adobe CS2提供免费序列号

    据Adobe官方博客报道,自2012年12月13日起,因为技术故障,该公司已停止使用Creative Suite(CS2)产品及Acrobat 7的激活服务器. 这些产品大多是7年前发布,很多已经无法 ...

  2. 中小学信息学奥林匹克竞赛-理论知识考点--ASCII

    ASCII表说白了就是一张表. 表中记录着:字符 和 数字 的对应关系.比如:字符0对应的ASCII码是48,A对应的是65,a对应的是97. 只要记住这三个,其它的数字,大写,小写字母的ASCII码 ...

  3. orderBy 过滤器

    orderBy 过滤器根据表达式排列数组: <!DOCTYPE html><html><head><meta http-equiv="Content ...

  4. udp重发java实现

    最近在处理框架通讯方面的问题,通过积累的开发经验,其实在很多情况(尤其是实时大数据量),udp是占有很多优势的:不需要连接,只管发送,理论上要快很多; 另外在穿墙上占有很大优势: 但是最大的一个问题就 ...

  5. Windows API窗口绘图程序设计

    任务目标 设计一个简单的Windows 窗口程序,在程序窗口内任意位置按下鼠标左键,可绘制范围在10-100之间随机大小的正方形.并且显示的正方形用红色填充. 效果图 小结 程序先是触发鼠标左键点击事 ...

  6. 6-1 md5加密

    1.导入hashlib模块,使用它的md5方法进行加密 import hashlib # import md5 python2 s = 'admin123' # .将字符串类型转换成byte类型才能加 ...

  7. 【js】【跨域问题】前后端分离的跨域问题

    最近在研究nodejs,php的前后端分离相关东西,在调用接口的时候碰到一些跨域的问题,经过一段时间的摸索,总结出来的一些东西 php采用的是yii框架,登录的机制或者调用接口都需要前端传递cooki ...

  8. poj 3685 矩阵问题 查找第K小的值

    题意:N阶矩阵Aij= i2 + 100000 × i + j2 – 100000 × j + i × j,求第M小的元素. 思路:双重二分 考虑到,aij是跟着i递增的,所以i可以作为一个二分搜索 ...

  9. 笔记-python-调试

    笔记-python-调试 一般在pycharm下调试或使用log查看输出日志,有时小程序不想这么麻烦,也有一些方便使用的调试方式可以使用. 1.      idle调试 1.打开Python shel ...

  10. 笔记-git-git服务器安装及配置

    笔记-git-git服务器安装及配置 1.      GIT服务器简介 Git 可以使用四种主要的协议来传输数据:本地传输,SSH 协议,Git 协议和 HTTP 协议.下面分别介绍一下哪些情形应该使 ...