Form 表单

Tags
htmlwebapi
Created
Dec 30, 2015 4:08 AM

requestSubmit // 模拟点击 sumit 按钮,触发验证

自定义和 <form> 互操作的表单元素:https://html.spec.whatwg.org/multipage/custom-elements.html#the-elementinternals-interface

form 的 post 请求默认是 application/x-www-form-urlencoded (跟get 请求的查询串相似),可以用 enctype 属性指定。有file表单控件应该用 multipart/form-data (浏览器自动添加,后面有一个 boundary 参数)。

image type 能提交你当时的点击位置和 value

form中 button 标签不指定 type 值,那么它会默认是 submit

form提交时只要存在 password 值浏览器就会弹是否记住的弹窗,跟自动填充属性完成没有关系。记住密码的作用是用于全自动填写密码和同步并自动登陆(Credential Management API)。

// firefox 只要点提交按钮就会弹出,Chrome 则需要发生 submit 事件

// Firefox 记住密码就是保存 type 为 password 字段和上一个 input 自动的内容。自动填充也是填充 password 字段和上一个 input

// Firefox 记住了密码 autocomplete=off 就无效

// 不用 form 的 submit 就可以完全浏览器弹窗

控件的自动完成属性能在表单提交时保存,下次填写时提供下拉选择;

// firefox 下没提交刷新也还在,强刷清除。

隐藏 field,submit 按扭会携带其自身的 name,value 提交到后台

form 表单的提交会造成页面刷新。可使用 iframe 代理。

input 控件或者 button 的 type 为 submit 时点击会默认执行 submit(),表单触发 submit 事件

执行地址是 form 表单的 action 属性,可以用 formaction 属性覆盖

form 属性表示元素关联的 form 元素

控件的 pattern(输入后离开控件生效) required(change生效) 属性实现验证, CSS 有相应伪类,可自定义简单错误信息

form 有不进行验证的属性 // novalidate

自定义错误信息 setCustomValidity 方法,x-moz-errormessage 属性,提交的后才会显示

实时验证显示准确提示可以在 change 事件发生时使用 DOM 属性 validity,里面有很多详细属性。

单选 radio 控件只要验证组中一个:i.checkValidity() 触发该组或者 form 的invalid事件

invalid 发生就不会发生 submit.

验证涉及到以下的以下属性,在每一个可以验证的元素上均可以调用对于的属性或通过接口进行操作:

  • willValidate (表明此元素在表单提交时是否会被验证)
  • checkValidity() (用于验证元素,返回 true 当验证通过,或者触发 invalid 事件)(可用于form元素)
  • validity (存储验证结果,包含下表内容)
  • validationMessage (显示验证异常信息)
  • setCustomValidity(message) (自定义验证错误信息)
名称
用途
用法
valueMissing
确保控件中的值已填写
将 required 属性设为true,<input type="text"required="required"/>
typeMismatch
确保控件值与预期类型相匹配
<input type="email"/>
patternMismatch
根据 pattern 的正则表达式判断输入是否为合法格式
<input type="text" pattern="[0-9]{12}"/>
toolong
避免输入过多字符
设置maxLength,<textarea id="notes" name="notes" maxLength="100"></textarea>
rangeUnderflow
限制数值控件的最小值
设置min,<input type="number" min="0" value="20"/>
rangeOverflow
限制数值控件的最大值
设置max,<input type="number" max="100" value="20"/>
stepMismatch
确保输入值符合min,max,step 的设置
设置 max min step,<input type="number" min="0" max="100" step="10" value="20"/>
customError
处理应用代码明确设置能计算产生错误
例如验证两次输入的密码是否一致
SuperMade with Super