HTML5 表单中

input 属性

autofocus 页面加载时自动获得焦点

required 非空字段输入框

placeholder 提供一种提示（hint),输入域为空时显示。

pattern 规定验证input域的模式（正则表达式）

pattern="[a-zA-Z0-9],{6,10}"

pattern="[a-zA-Z0-9],{6,16}"

pattern="^1[34578][0-9](9)$"

height \width 仅仅用于image的input的属性

qq注册认证

validity属性

validity属性获取表单元素的valiityState对象，该对象包括8个方面的验证结果

var validityState=dom

<script>
var form=document.querySelector('form');
var nick=document.querySelector('#nick');
var vali=nick.validty;
console.log(vali);if(vali.valueMissing){nick.setCustomValidity("昵称不能为空”）；}

invalid 事件，只要发生表单的验证，所有未通过验证的表单元素都会收到一个invalid的事件form.addEventListener(invalid',function(event{var ekm=event.target;var vail=elm.validity;未通过验证的对象获取var name=elm.name;switch(name){case'nick';if(vali.valueMissing){elm.setCoustomValidity("昵称不能为空“）；}else if（vali.patternMIsmatch){elm.setCoustomvalidity('必须为英文');else{elm.setCoustomvalidity('');}break;

}

<style>input:valid{}验证通过时的样式input：invalid{}

validityState对象

valueMissing 目的：确保表单中的值已填写用法：将表单元素设置了required特性，则为必填项；如果必填项输入值为空，value Missing属性将返回true,否则返回false

typeMismatch 目的：保证输入值与预期类型相互匹配（url、Email等）

patternMismatch 目的：正则是否有效

转载于:https://www.cnblogs.com/Gavinzhong/p/6893970.html

HTML5 表单中相关推荐

html5表单验证没有效果,HTML5表单验证特性(知识点小结)
前台提交信息到后台一般两种常见提交方式: Form表单提交和 Ajax无刷新页面提交 placeholder 不是所有的input都支持,比如input date就不支持解决方案: 可以在date ...
实现跨浏览器html5表单验证
html5表单添加了很多类型的表单,而且还自带验证的功能.在移动端,手机等设备能够根据不同的input类型弹出不同的键盘,例如iphone弹的键盘 <input type="email ...
html5表单新增的输入类型,HTML5之表单新增类型介绍
1.html5的input标签的type类型新增介绍: 2.表单新增属性介绍: 3.代码示例: 1970 1980 1990 默认值: form="register" /> ...
下列关于html5表单的多样输入方式,IT兄弟连 HTML5教程 HTML5表单多样的输入类型1...
原标题:IT兄弟连 HTML5教程 HTML5表单多样的输入类型1 HTML5拥有多个新的表单输入类型,这些新特性提供了更好的输入控制和验证.并不是所有的主浏览器都支持新的input类型,不过我们可 ...
HTML5表单提交和PHP环境搭建
1. HTML5表单的创建 HTML表单 1.表单用于不同类型的用户输入 2.常用表单标签: <form> 表单 <input> ...
php form表单属性,HTML5 表单属性
HTML5 表单属性 HTML5 中新的表单属性 HTML5 的和标签添加了几个新属性,如下所示:新属性: autocomplete novalidate 新属性: autocomplete au ...
jQuery html5Validate基于HTML5表单验证插件
更新于2016-02-25 前面提到的新版目前线上已经可以访问: http://mp.gtimg.cn/old_mp/assets/js/common/ui/Validate.js demo体验狠狠地 ...
html5-5 HTML5表单元素和内嵌框架
html5-5 HTML5表单元素和内嵌框架一.总结一句话总结:单选框和多选框选的时候外面加label就可以实现选后面文字也可以选中了 1.html5如何实现文件上传? 必须加上enctype ...
html5 设计 form,为HTML5表单设计表单模板
为HTML5表单设计表单模板 AEM中的HTML5表单组件提供了将XFA表单模板渲染为HTML5格式的功能. 表单设计人员可以使用Forms Designer设计表单模板,并使用HTML5呈现功能. ...

HTML5 表单中

HTML5 表单中相关推荐

最新文章

热门文章

HTML5 表单 中

HTML5 表单 中相关推荐

最新文章

热门文章

HTML5 表单中

HTML5 表单中相关推荐