// 选择日期 <input type="date"/> // 选择时间 <input type="time"/> // 选择日期时间 <input type="datetime-local"/> // 选择月份 <input type="month"/> // 选择颜色 <input type="color"/> // 数字输入框 <input type="number" min="1" max="10"/> // 邮箱输入框 <input type="email"/> // 滑动条 <input type="range" min="1" max="10"/>
上面这些是最常用的、且都是 Chrome 浏览器支持的 type 值。像选择日期,时间,数字输入框等,在前端表单中经常用到,以前要加一个这样的组件还得引用一些第三方框架,现在直接使用就可以了。除了带来新功能的 type 属性,input 还增加了非常多有用的其他属性。这些属性扩展了 input 的能力,使表单提交越来越满足我们多样化的需求。
新加的常用属性如下:
autofocus:自动聚焦maxlength 是对普通字符串输入的限制,规定最多能输入多少个字符。
pattern 属性很有用,用正则表达式来自定义输入值的规则。比如要输入手机号,那么就可以写一个手机号的正则表达式赋值给 pattern,这样在表单提交时就会验证输入值是不是一个手机号。这个字段使表单项验证的灵活性大大提高。
接下来我们就实现一个包含验证功能的基本表单。
<form id="form1"> <input type='text' name="name" placeholder="输入姓名" maxlength="5" required/> <input type='number' name="age" placeholder="输入年龄" min="15" max="65" required/> <input type='text'name="sex" placeholder="输入性别" required disabled/> <input type="submit" value="提交"> </form>在上述代码中 <form> 元素的平级,增加一个 <input> 元素,并与该表单绑定:
<input form="form1" name="other" placeholder="输入额外信息" required>当点击提交的时候,首先第一个 input 的验证被触发了,如图所示:
经过试验验证,发现当元素被设为 disabled 时,表单的验证就会失效,将 disabled 换为 readonly 之后,效果也一样。说明在表单项只有可编辑的时候才会有表单验证,否则无效,这也是符合实际情况的。
在一些复杂的页面场景当中,有时候你的输入框可能并不会包裹在 form 元素之内,这个时候你就可以用 form 属性来为输入框绑定表单,和将其放置到 form 标签之内是一样的效果。
<form id="form1" onsubmit="onSubmit(this);return false;"> ... </form>这里首先调用一个 onSubmit() 方法,参数 this 代表 form 元素。这里最关键的是在最后面加一个 return false,它可以阻止默认的页面刷新。
function onSubmit(e) { let form_data = {} Array.from(e.children) .filter(el => el.name) .forEach(el => { form_data[el.name] = el.value }) console.log(form_data) }
这个代码中有两个部分需要注意:一是将 e.children 这个类数组转换成数组。第二是要用 fliter 过滤一下没有提供 name 属性的表单项,最后组合而成的就是我们想要的数据。当然,e.children 仅仅是获取直接子元素的方法,也可以用 querrySelector() 代替。