本文转自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. sql server 基础

    1 .左连接 select a.* ,b.* from student as aleft join hobby as bon a.hobbyid=b.hobbyid 2. 右 连接 select a. ...

  2. CSS 负边距读后感

    最近看到一篇讲解CSS 负边距的文章: http://segmentfault.com/a/1190000003750411?utm_source=Weibo&utm_medium=share ...

  3. C#获取包括一二级汉字的拼音 首字母

    C#获取包括一二级汉字的拼音 首字母 声母 汉字拼音转换 using System; using System.Collections.Generic; using System.Linq; usin ...

  4. Java删除文件或目录及目录下所有文件

    一直在做C++相关开发的工作.突然某一天一时兴起,想学习下Java开发.然后再网上找到一本Java简明教程,入门是够用了.看到文件IO这一章,想起之前用C++做的删除文件或目录的练习,于是打算用Jav ...

  5. 【软件笔记】 ◆笔记·I◆ 各类冷门函数细解

    [软件笔记·I] 各类冷门函数细解 ■题外话■ 总觉得作为一个志向远大的 coder (٩(◕‿◕｡)۶),我觉得单单只会做题是不够的所以我开始尝试自己编写软件!初入道的我并不知道C++其实并不太适合 ...

  6. Windows下MySQL数据库的安装与关闭开机自启动

    我在学习java,安装数据库时找了很多教程,现在在这里总结一下我安装数据库的过程,我安装的是mysql-5.6.42-winx64版本的. 数据官方下载地址:https://dev.mysql.com ...

  7. 基于Xtrabackup恢复单个innodb表

      Preface       We all know that Xtrabackup is a backup tool of percona for innodb or Xtradb.It's us ...

  8. 【整理】PHP获取客户端真实IP地址详解

    php获取客户端IP地址有四种方法,这五种方法分别为REMOTE_ADDR.HTTP_CLIENT_IP.HTTP_X_FORWARDED_FOR.HTTP_VIA. REMOTE_ADDR 是你的客 ...

  9. Linux下MySQL安装及配置

    Linux下MySQL安装及配置 安装MySQL Ubuntu系统中,直接使用apt install的方式去安装MySQL的服务端和客户端,MySQL的客户端必须安装,否则无法通过命令连接并操作MyS ...

  10. Codeforces Round #392 (Div. 2) Unfair Poll

    C. Unfair Poll time limit per test 1 second memory limit per test 256 megabytes input standard input ...