本文转自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. C# 操作符与表达式

    C#保留了C++所有的操作符,其中指针操作符(*和->)与引用操作符(&)需要有unsafe的上下文.C#摈弃了范围辨析操作符(::),一律改为单点操作符(.).我们不再阐述那些保留的C ...

  2. BZOJ1491: [NOI2007]社交网络(Floyd 最短路计数)

    Time Limit: 10 Sec  Memory Limit: 64 MBSubmit: 2343  Solved: 1266[Submit][Status][Discuss] Descripti ...

  3. BZOJ3884: 上帝与集合的正确用法(欧拉函数 扩展欧拉定理)

    Time Limit: 5 Sec  Memory Limit: 128 MBSubmit: 3860  Solved: 1751[Submit][Status][Discuss] Descripti ...

  4. MySQL(mariadb)主从复制模式与复制过滤

    在前一篇文章<mysql多实例与复制应用>中只对mysql的复制做了简单的介绍,本篇内容专门介绍一下mysql的复制. MySQL复制 mysql复制是指将主数据库的DDL和DML操作通过 ...

  5. linux文件属性更改命令

    chown 当我们要改变一个文件的属主,我们所使用的用户必须是该文件的属主而且同时是目标属组成员,或超级用户.只有超级用户的才能改变文件的属主. chown语法: chown  [选项]...[所有者 ...

  6. Spring Security 简介

    本文引自:https://blog.csdn.net/xlecho/article/details/80026527 在 Web 应用开发中,安全一直是非常重要的一个方面.安全虽然属于应用的非功能性需 ...

  7. html之table&select不为人知的操作

    table标签和其它标签不一样,他有属性和方法! table属性: rows      可以得到table的row集合 cells      得到table所有单元格 table方法: insertR ...

  8. VS2013未能正确加载的问题【转载】

    今天使用电脑,关机重启时,WINDOWS提示“正在配置中,请勿关机” 的提醒,等重启后,打开VS2013就提示了未加载成功的问题,如下图: 我的解决方法是:找到VS2013开发人员命令提示:在窗口中输 ...

  9. php-5.6.26源代码 - PHP文件汇编成opcode（require、include的差异）

    文件 php-5.6.26/Zend/zend_language_scanner.c ZEND_API zend_op_array *compile_file(zend_file_handle *fi ...

  10. Deepin15.7 更改软件的jdk

    最近更新了系统,发现smartsvn.smartgit.Dbeaver都无法打开了,上网googlel一下,发现是java9的问题,需要把软件的java版本更改一下就可以了 先上jdk的位置 一.sm ...