direktori cari
导论 前言 为什么学习JavaScript JavaScript的历史 基本语法 语法概述 数值 字符串 对象 数组 函数 运算符 数据类型转换 错误处理机制 JavaScript 编程风格 标准库 Object对象 包装对象和Boolean对象 Number对象 String对象 Math对象 Date对象 RegExp对象 JSON对象 ArrayBuffer:类型化数组 面向对象编程 概述 封装 继承 模块化编程 DOM Node节点 document节点 Element对象 Text节点和DocumentFragment节点 Event对象 CSS操作 Mutation Observer 浏览器对象 浏览器的JavaScript引擎 定时器 window对象 history对象 Ajax 同域限制和window.postMessage方法 Web Storage:浏览器端数据储存机制 IndexedDB:浏览器端数据库 Web Notifications API Performance API 移动设备API HTML网页元素 Canvas API SVG 图像 表单 文件和二进制数据的操作 Web Worker 服务器发送事件 Page Visibility API Fullscreen API:全屏操作 Web Speech requestAnimationFrame WebSocket WebRTC Web Components HTML网页的API HTML网页元素 Canvas API SVG 图像 表单 文件和二进制数据的操作 Web Worker 服务器发送事件 Page Visibility API Fullscreen API:全屏操作 Web Speech requestAnimationFrame WebSocket WebRTC Web Components 开发工具 console对象 PhantomJS Bower:客户端库管理工具 Grunt:任务自动管理工具 Gulp:任务自动管理工具 Browserify:浏览器加载Node.js模块 RequireJS和AMD规范 Source Map JavaScript 程序测试 JavaScript高级语法 Promise对象 有限状态机 MVC框架与Backbone.js 严格模式 ECMAScript 6 介绍 附录 JavaScript API列表
watak

    • 表单的验证

      • HTML 5表单验证

      • checkValidity方法,setCustomValidity方法,validity对象

    • 参考链接

表单的验证

HTML 5表单验证

所谓“表单验证”,指的是检查用户提供的数据是否符合要求,比如Email地址的格式。HTML 5原生支持表单验证,不需要JavaScript。

<input type="date" >

上面代码指定该input输入框只能填入日期,否则浏览器会报错。

但有时,原生的表单验证不完全符合需要,而且出错信息无法指定样式。这时,可能需要使用表单对象的noValidate属性,将原生的表单验证关闭。

var form = document.getElementById("myform");
form.noValidate = true;

form.onsubmit = validateForm;

上面代码先关闭原生的表单验证,然后指定submit事件时,让JavaScript接管表单验证。

此外,还可以只针对单个的input输入框,关闭表单验证。

form.field.willValidate = false;

每个input输入框都有willValidate属性,表示是否开启表单验证。对于那些不支持的浏览器(比如IE8),该属性等于undefined。

麻烦的地方在于,即使willValidate属性为true,也不足以表示浏览器支持所有种类的表单验证。比如,Firefox 29不支持date类型的输入框,会自动将其改为text类型,而此时它的willValidate属性为true。为了解决这个问题,必须确认input输入框的类型(type)未被浏览器改变。

if (field.nodeName === "INPUT" && field.type !== field.getAttribute("type")) {
    // 浏览器不支持该种表单验证,需自行部署JavaScript验证
}

checkValidity方法,setCustomValidity方法,validity对象

checkValidity方法表示执行原生的表单验证,如果验证通过返回true。如果验证失败,则会触发一个invalid事件。使用该方法以后,会设置validity对象的值。

每一个表单元素都有一个validity对象,它有以下属性。

  • valid:如果该元素通过验证,则返回true。

  • valueMissing:如果用户没填必填项,则返回true。

  • typeMismatch:如果填入的格式不正确(比如Email地址),则返回true。

  • patternMismatch:如果不匹配指定的正则表达式,则返回true。

  • tooLong:如果超过最大长度,则返回true。

  • tooShort:如果小于最短长度,则返回true。

  • rangeUnderFlow:如果小于最小值,则返回true。

  • rangeOverflow:如果大于最大值,则返回true。

  • stepMismatch:如果不匹配步长(step),则返回true。

  • badInput:如果不能转为值,则返回true。

  • customError:如果该栏有自定义错误,则返回true。

setCustomValidity方法用于自定义错误信息,该提示信息也反映在该输入框的validationMessage属性中。如果将setCustomValidity设为空字符串,则意味该项目验证通过。

参考链接


Artikel sebelumnya: Artikel seterusnya: