本文转自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. 前端jQuery之动画操作及相关演示

    1.显示动画 1.1无参数,直接让指定的元素显示出来 $("div").show(); 1.2通过控制宽高,透明度,display属性逐渐显示,指定时间现实完毕 $('div'). ...

  2. 页面跳转，A跳到B，B再返回A时自动定位到离开A时的位置

    <template> <div class="hello" @scroll="scrollLoad" id="myScrollBox ...

  3. 变量类型 ROWID 和 UROWID

    ROWID:    ROWID为该表行的唯一标识,是一个伪列,这个伪列可以用SELECT查看,但是不可以用INSERT, UPDATE来修改,不可以用DELETE来删除. UROWID: ROWID可 ...

  4. MyBatis单列工厂的实现

    MyBatis单列工厂的实现 SqlSessionFactoryUtils package com.utils; import org.apache.ibatis.io.Resources; impo ...

  5. php如何连接mysql，并操纵后台服务器运作的过程

    PHP,一个嵌套的缩写名称,是英文超级文本预处理语言(PHP:Hypertext Preprocessor)的缩写.PHP 是一种 HTML 内嵌式的语言,PHP与微软的ASP颇有几分相似,都是一种在 ...

  6. 【JS】window.print打印指定内容

    有时候网页用到打印但是不想打印所有内容,就需要只打印指定内容,下面简单演示下如何打印指定内容 1.在需要打印的指定内容的头部前面加“<!--startprint-->”,在尾部后面加上“& ...

  7. Optimization Tipss for Multi Vendor eCommerce Software to drive, retain more sales

    1. Make the Registration & Listing simple  - Only if you keep the registration process and produ ...

  8. Redis在windows下安装过程（转）

    (转)原文:http://www.cnblogs.com/M-LittleBird/p/5902850.html 要使redis在PHP下运行, 需在PHP文件下的ext扩展文件夹中添加扩展文件 ph ...

  9. python3爬取咪咕音乐榜信息（附源代码）

    参照上一篇爬虫小猪短租的思路https://www.cnblogs.com/aby321/p/9946831.html,继续熟悉基础爬虫方法,本次爬取的是咪咕音乐的排名 咪咕音乐榜首页http://m ...

  10. Codeforces Round #462 (Div. 2) C DP

    C. A Twisty Movement time limit per test 1 second memory limit per test 256 megabytes input standard ...