Form 表单

概述

具有数据收集、校验和提交功能的表单，包含复选框、单选框、输入框、下拉选择框等元素。

代码示例

API

Form Methods

校验整个表单

this.$refs.formValidate.validate((valid, errors) => {
    console.log(valid, errors)
})

校验表单项

对部分表单字段进行校验的方法，field为需校验的 prop

this.$refs.formValidate.validateField("field", (valid, errors) => {
    console.log(valid, errors)
})

重置

重置校验结果, 如果传了filed则只重置这个，如果没有则重置所有

this.$refs.formValidate.resetFields(() => {
})
this.$refs.formValidate.resetFields("field", () => {
})

Form Props

属性	说明	类型	默认值
type	表单类型，可选值有normal和query	String	normal
rule	表单验证规则，具体配置查看async-validator (opens new window)	Boolean	false
labelPosition	表单域标签的位置，可选值为left、right、top	String	right
labelWidth	表单域标签的宽度	Number	80
showMessage	是否显示校验信息	Boolean	true
autocomplete	是否配置为自动完成功能，可选有on、off	Boolean	off

Form Events

事件名	说明	返回值
on-validate	对表单项进行校验后触发	(errors) => void
submit	提交时触发	(valid, errors) => void

FormItem Props

属性	说明	类型	默认值
prop	定义了prop才会被校验	String	null
label	FormItem项标签名称	String	null
rule	表单验证规则，具体配置查看async-validator (opens new window)	Boolean	false
labelPosition	表单域标签的位置，可选值为left、right、top	String	right
labelWidth	表单域标签的宽度	Number	80
showMessage	是否显示校验信息	Boolean	true
value	配置后，则根据此值进行校验	String, Number, Array, Boolean, Object	null