表单验证原生实现、input常用属性大全

1. input 标签常用属性大全input是表单核心控件type属性决定控件类型搭配各类属性实现不同功能1基础类型属性text单行文本输入框默认password密码输入框内容隐藏radio单选框同名互斥checkbox复选框submit提交按钮reset重置按钮button普通按钮无默认行为file文件上传hidden隐藏域存放静默提交数据2H5新增表单类型email邮箱输入框自带格式验证tel手机号输入框移动端唤起数字键盘number数字输入框date日期选择器url网址输入框search搜索输入框3通用核心属性name表单字段名后端获取数据的key必填value输入框默认值/提交值placeholder输入框占位提示文本required必填校验为空禁止提交maxlength/minlength最大/最小输入长度max/min数字/日期最大最小值readonly只读可提交、不可修改disabled禁用不可修改、不可提交autofocus页面加载自动聚焦autocomplete自动补全on/offpattern自定义正则校验规则2. 原生HTML表单验证实现无需JS纯HTML原生属性实现基础表单校验适合简单表单场景核心校验规则required 必填、maxlength 长度限制、pattern 正则匹配、type 格式校验!-- 原生表单验证完整示例 -- form action methodget !-- 手机号校验必填11位正则 -- input typetel namephone placeholder请输入手机号 required pattern^1[3-9]\d{9}$ !-- 邮箱校验原生格式校验必填 -- input typeemail nameemail placeholder请输入邮箱 required !-- 密码长度校验 -- input typepassword namepwd placeholder请输入密码 required minlength6 maxlength16 button typesubmit提交/button /form自定义提示文案H5通过 oninvalid、oninput 修改默认报错提示input typetel required pattern^1[3-9]\d{9}$ oninvalidthis.setCustomValidity(请输入正确的11位手机号) oninputthis.setCustomValidity()