HTML5利用约束验证API来检查表单的输入数据的代码实例


Posted in HTML / CSS onDecember 20, 2016

HTML5对于表单有着极大程度的优化,无论是语义,小部件,还是数据格式的验证。我猜你肯定会以浏览器兼容作为借口不愿意使用这些“新功能”,但这绝不应该成为使你停滞不前的原因,况且还有像Modernizr和ployfill这样的工具库帮助你在不支持Html5的浏览器上进行回退处理。当你真正试着使用这些表单的新功能时,我保证你会爱上它。如果说唯一的缺陷,就是提示框的样式是浏览器默认的,你无法改变,好吧,如果你相信浏览器厂商的设计师的审美水平的话(我相信他们的设计水平比绝大部分普通人要好,如果不考虑风格兼容的话),抓紧学就对了!

原生验证

input type

HTML5中为数据格式验证提供了很多原生的支持,例如:

<input type='email'/>

当点击提交按钮时,如果你输入的格式不符合email,则会导致无法提交,浏览器会提示你错误信息。

比如在chrome下:

HTML5利用约束验证API来检查表单的输入数据的代码实例

注意:

1、仅当你提交的时候会触发浏览器的验证

2、不同浏览器提示信息的行为样式不一样

3、当有多个input不符合要求时,只会提示一个错误,一般会提示表单中相对较前的Input的

不要理所应当的认为当input的type等于tel的时候,如果你输入的不是电话号码格式,在提交时也会被浏览器的阻挡并提示错误信息,type=’tel’在PC端只起到语义的作用,在移动端可以使产生的键盘为纯数字键盘,并不能起到数据验证的作用。

pattern

你可以使用pattern属性来对浏览器不提供原生验证的数据格式设置自定义格式验证。pattern属性的值是一个正则表达式(字符串):

<input type='tel' pattern='[0-9]{11}' title='请输入11位电话号码'>

点击提交时,如果你输入的数据不符合pattern里面正则的格式,那么浏览器会阻止表单提交,并提示:‘请与所请求的格式保持一致’+ title里的内容(小字)。但注意,当你的文本框中内容为空的时候,浏览器不会对其进行检查,会直接提交表单(因为浏览器认为这个框框不是必填项)。如果你想要这个框框必须有内容,请加上required属性。

通过HTML原生的验证系统,基本就能满足我们对表单提交的限定。但HTML5提供了更高级的功能来方便我们开发和提升用户体验。

约束验证API

默认提示信息

像‘请与所请求的格式保持一致’这样的浏览器提示信息字串藏在input DOM对象的validationMessage属性里,这个属性在大多数现代的浏览器中是只读的,即不可修改,比如下面的代码:

<input type="text" required id='input'/>

当提交时,如果Input内容为空,那么浏览器会提示‘请填写此字段’,我们可以在控制台把这句话打印出来:

var input = document.getElementById('input')
input.validationMessage // =>'请填写此字段'

如果想修改其中的内容,可以调用setCustomValidity接口改变validationMessage的值

input.setCustomValidity('这个字段必须填上哦');
// 下面这种做法适用于不支持setCustomValidity的浏览器,基本现代浏览器都不支持这样做
input.validationMessage = '这个字段必须填上哦'

注意,像required这样的HTML原生验证,虽然能改变其中信息,但无法把信息置为空字串,原因下面会讲到。

原理

HTML表单验证系统通过validationMessage属性检测该文本框的数据是否通过验证,如果其值为空字串,则表示通过了验证,否则,表示未通过,浏览器会把其值作为错误信息提示给用户。所以在原生验证时,用户无法把validationMessage的值设置为空字符串。

约束验证API的简单实例

约束验证API是在原生方法之上更灵活的表达方式,你可以自己设置数据是否通过,而不借助于正则表达式。原理很简单,通过if判断,如果数据格式使你满意,那么你就调用setCustomValidity使validationMessage的值为空,否则,你就调用setCustomValidity传入错误信息:

input.addEventListener('input', function () {
        if(this.value.length > 3){ // 判断条件完全自定义
            input.setCustomValidity('格式不正确');
        }else {
            input.setCustomValidity('')
        }
 });

每次键盘输入,代码都会判断格式是否正确,然后调用setCustomValidity设置validationMessage的值。不要妄想每按下键浏览器都会提示你结果是否正确,浏览器只有在点击提交按钮的时候才会提示validationMessage里的值(如果有的话)。

如果你还没有走思的话,一定会问,既然这样,为什么要为input绑定键盘事件,每输入一下都要进行判断呢?直接为表单绑定提交事件,在提交时再判断多好,别急,这么做是有好处的。

随着输入判断格式与样式

作为用户,我们当然想在得知我输入了错误的格式之后,文本框变红(或者有别的提示)。而在我每次输入一个字符,如果对了,文本框就恢复正常。我们可以使用CSS伪类来实现这个功能:

input:required {
            background-color: #FFE14D;
        }

    /*这个伪类通过validationMessage属性进行判断*/
    input:invalid {
        border: 2px solid red;
    }

上面的required伪类会给所以必填但值空的input提供一个黄色的背景色,而下面的invalid伪类则会为所有未通过验证的input添加一个2px的红边边。我们现在给我们的Input框加上input类即可。

这些伪类的判断条件正与浏览器判断你能否提交表单的条件一样,看validationMessage里的值,所以,我们上面设置每次键盘输入事件都会触发一次判断从而改变CSS伪类样式的渲染,用意正在于此。

更好的用户体验

还有一个缺点,就是当一个input设置为required的时候,在初始化时,因为其本身是空的,所以invalid伪类会对它起作用,这不是我们想看到的,因为我们什么还都没有干。

我们可以并在这些伪类前加上父选择器.invalid,这样,只有在父元素具有invalid类时,这些伪类才会起作用。可以设置一个submit事件,在表单提交因验证失败后,会触发input的invalid事件,给form添加invalid类:

form.addEventListener('invalid', function() {this.className = 'invalid'}, true)因为invaild是Input的事件,而不是form的事件,所以这里我们设置第三个参数为true采用事件捕获的方式处理之。这样,就大功告成了。

最终实例

好了,现在是时候总结一下我们所学的知识并创造最佳实践了:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>form</title>
    <style>
        input:required{
            background-color: #DCD4CE;
        }
        .invalid input:invalid{
            border: 2px solid red;
        }
    </style>
</head>
<body>
<form id="form">
    <label>email:<input type="email" required id="email"></label>
    <label>IDCard:<input required id="IDCard"></label>
    <input type="submit" id="submit">
</form>
<script>
    var email = document.getElementById('email');
    var IDCard = document.getElementById('IDCard');
    var form = document.getElementById('form');

    IDCard.addEventListener('input', function () {
        if(this.value.length != 6) {
            this.setCustomValidity('IDCard的长度必须为6')
        }else{
            this.setCustomValidity('')
        }
    });

    form.addEventListener('invalid', function () {
        this.className = 'invalid';
    }, true)
</script>
</body>
</html>

运行后截图如下:

HTML5利用约束验证API来检查表单的输入数据的代码实例

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

HTML / CSS 相关文章推荐
CSS3实现粒子旋转伸缩加载动画
Apr 22 HTML / CSS
利用CSS的Sass预处理器(框架)来制作居中效果
Mar 10 HTML / CSS
前端面试必备之CSS3的新特性
Sep 05 HTML / CSS
利用css3 translate完美实现表头固定效果
Feb 28 HTML / CSS
详解CSS3中使用gradient实现渐变效果的方法
Aug 18 HTML / CSS
css3动画效果小结(推荐)
Jul 25 HTML / CSS
CSS3 旋转立方体问题详解
Jan 09 HTML / CSS
CSS3 画基本图形,圆形、椭圆形、三角形等
Sep 20 HTML / CSS
基于zepto的插件之移动端无缝向上滚动并上下触摸滑动实例代码
Dec 20 HTML / CSS
使用phonegap克隆和删除联系人的实现方法
Mar 31 HTML / CSS
canvas实现烟花的示例代码
Jan 16 HTML / CSS
POST提交数据常见的四种方式
Jan 18 HTML / CSS
基于zepto的插件之移动端无缝向上滚动并上下触摸滑动实例代码
Dec 20 #HTML / CSS
html5 postMessage解决跨域、跨窗口消息传递方案
Dec 20 #HTML / CSS
详解HTML5中表单验证的8种方法介绍
Dec 19 #HTML / CSS
【HTML5】3D模型--百行代码实现旋转立体魔方实例
Dec 16 #HTML / CSS
使用spring mvc+localResizeIMG实现HTML5端图片压缩上传的功能
Dec 16 #HTML / CSS
详解移动端HTML5页面端去掉input输入框的白色背景和边框(兼容Android和ios)
Dec 15 #HTML / CSS
canvas与html5实现视频截图功能示例
Dec 15 #HTML / CSS
You might like
PHP与SQL注入攻击[一]
2007/04/17 PHP
php实现基于PDO的预处理示例
2017/03/28 PHP
js切换div css注意的细节
2012/12/10 Javascript
通过正则表达式实现表单验证是否为中文
2014/02/18 Javascript
jquery分页插件jpaginate在IE中不兼容问题
2014/04/22 Javascript
JS实现动态生成表格并提交表格数据向后端
2020/11/25 Javascript
使用NodeJs 开发微信公众号(三)微信事件交互实例
2016/03/02 NodeJs
Nodejs抓取html页面内容(推荐)
2016/08/11 NodeJs
Angular.js中用ng-repeat-start实现自定义显示
2016/10/18 Javascript
JavaScript实现的冒泡排序法及统计相邻数交换次数示例
2017/04/26 Javascript
JavaScript使用ZeroClipboard操作剪切板
2017/05/10 Javascript
Vue调试神器vue-devtools安装方法
2017/12/12 Javascript
vue使用axios实现文件上传进度的实时更新详解
2017/12/20 Javascript
VUE + UEditor 单图片跨域上传功能的实现方法
2018/02/08 Javascript
微信小程序实现左右联动的实战记录
2018/07/05 Javascript
详解如何为你的angular app构建一个第三方库
2018/12/07 Javascript
使用layui监听器监听select下拉框,事件绑定不成功的解决方法
2019/09/28 Javascript
浅谈Vue2.4.0 $attrs与inheritAttrs的具体使用
2020/03/08 Javascript
在vue中实现禁止回退上一步,路由不存历史记录
2020/07/22 Javascript
在Django的URLconf中使用多个视图前缀的方法
2015/07/18 Python
CentOS 6.5下安装Python 3.5.2(与Python2并存)
2017/06/05 Python
python使用配置文件过程详解
2019/12/28 Python
Python @property原理解析和用法实例
2020/02/11 Python
Python3读写Excel文件(使用xlrd,xlsxwriter,openpyxl3种方式读写实例与优劣)
2020/02/13 Python
TensorFlow的环境配置与安装教程详解(win10+GeForce GTX1060+CUDA 9.0+cuDNN7.3+tensorflow-gpu 1.12.0+python3.5.5)
2020/06/22 Python
宝拉珍选美国官网:Paula’s Choice美国
2018/01/07 全球购物
美国糖果店:Sugarfina
2019/02/21 全球购物
掌上明珠Java程序员面试总结
2016/02/23 面试题
初三学生个人自我评定
2014/04/06 职场文书
2015年重阳节活动总结
2015/03/24 职场文书
撤诉申请书法院范本
2015/05/18 职场文书
无违反计划生育证明格式
2015/06/24 职场文书
2016教师廉洁教育心得体会
2016/01/13 职场文书
爱国之歌(8首)
2019/09/29 职场文书
SqlServer: 如何更改表的文件组?(进而改变存储位置)
2021/04/05 SQL Server
python内置进制转换函数的操作
2021/06/02 Python