新增表单控件
| 控件名称 | 含义 |
|---|---|
| type:datetime | 显示完整日期 |
| type:datetime-local | 显示完整日期，不含时区 |
| type:time | 显示时间，不含时区 |
| type:date | 显示日期 |
| type:week | 显示周 |
| type:month | 显示月 |
| type:search | 搜索类型，有清空文本的按钮 |
| type:range | 特定范围内的数值选择器，属性：min、max、step |
| type:number | 只能包含数字的输入框 |
| type:color | 颜色选择器 |
| type:email | email 地址类型，当格式不符合 email 格式时，提交是不会成功的，会出现提示 “只有当格式相符时，提交才会通过”， 在移动端获焦的时候会切换到英文键盘 |
| type:tel | 电话类型，在移动端获焦的时候会切换到数字键盘 |
| type:url | url 类型，当格式不符合 url 格式时，提交是不会成功的，会出现提示 “只有当格式相符时，提交才会通过” |
示例代码
<form>
<p>
<span>datetime-local</span>
<input type="datetime-local" />
</p>
<p>
<span>date</span>
<input type="date" />
</p>
<p>
<span>time</span>
<input type="time" />
</p>
<p>
<span>week</span>
<input type="week" />
</p>
<p>
<span>number</span>
<input type="number" /><!-- chrome支持，Safari，IB不支持 -->
</p>
<p>
<span>email</span>
<input type="email" />
</p>
<p>
<span>color</span>
<input type="color" />
</p>
<p>
<span>range</span>
<input type="range" min="1" max="100" name="range" /><!-- chrome, Safaris -->
</p>
<p>
<span>search</span>
<input type="search" name="search" /><!-- chrome支持，Safari支持一点，IE 不支持 -->
</p>
<p>
<span>url</span>
<input type="url" />
</p>
<p>
<span>submit</span>
<input type="submit" />
</p>
</form>
效果展示
新增表单属性
| 表单属性名称 | 含义 |
|---|---|
| placeholder | 输入框提示信息，适用于 type 为 text、search、url、tel、email、password 类型的 input |
| autofocus | 指定表单获取输入焦点 |
| required | 此项必填，不能为空 |
| pattern | 正则验证 pattern=“\d{1,5}” |
| form 中 action | 在 submit 里定义提交地址 |
| list 和 datalist | 为输入框构造一个选择列表，list 值为 datalist 标签的 id |
示例代码
<form>
<p>
<span>placeholder</span>
<input type="url" placeholder="请输入 url" />
</p>
<p>
<span>autofocus</span>
<input type="url" autofocus />
</p>
<p>
<span>pattern</span>
<input type="text" pattern="\d{1,5}" />
</p>
<p>
<span>required</span>
<input type="url" required />
</p>
<p>
<span>list、datalist</span>
<input name="email" type="email" list="emaillist" />
<datalist id="emaillist">
<option value="test1@test.com">test1@test.com</option>
<option value="test2@test.com">test2@test.com</option>
</datalist>
</p>
<p>
<span>submit</span>
<input type="submit" />
</p>
</form>
效果展示
表单验证反馈
| 表单验证 | 含义 |
|---|---|
| valueMissing | 输入值为空时返回 true |
| typeMismatch | 控件值与预期类型不匹配返回 true |
| patternMismatch | 输入值不满足 pattern 正则返回 true |
| tooLong | 超过 maxLength 最大限制返回 true |
| rangeUnderflow | 验证的 range 最小值返回 true |
| rangeOverflow | 验证的 range 最大值返回 true |
| stepMismatch | 验证 range 的当前值是否符合 min、max 及 step 的规则返回 true |
| customError | 不符合自定义验证返回 true |
示例代码
<body>
<form>
<p>
<span>email</span>
<input type="email" value="sb" />
</p>
<p>
<span>submit</span>
<input type="submit" value="提交" />
</p>
</form>
<section>
<p>展示 validity 对象 <strong>ValidityState</strong></p>
<section id="content"></section>
</section>
<script type="text/javascript">
window.onload = function() {
var inputEl = document.querySelector("input");
var content = document.querySelector("#content");
inputEl.addEventListener("invalid", function() {
// this.validity 不可枚举，改用此方法
const validityState = {
valueMissing: this.validity.valueMissing,
typeMismatch: this.validity.typeMismatch,
patternMismatch: this.validity.patternMismatch,
tooLong: this.validity.tooLong,
tooShort: this.validity.tooShort,
rangeUnderflow: this.validity.rangeUnderflow,
rangeOverflow: this.validity.rangeOverflow,
stepMismatch: this.validity.stepMismatch,
customError: this.validity.customError,
valid: this.validity.valid
};
content.innerHTML = Object.entries(validityState).map(([k, v]) => `<p><span>${k}:</span><span>${v}</span></p>`).flat(Infinity).join('');
if (inputEl.value === 'sb')
inputEl.setCustomValidity('请不要输入敏感词！');
else
inputEl.setCustomValidity('');
})
}
</script>
</body>
效果展示
关闭验证
在 form 标签上加 novalidate 属性，可以禁用 h5 默认的表单验证效果
打赏作者
您的打赏是我前进的动力
微信
支付宝
HTML5 简介
上一篇
评论
