layui/example/docs/zh-CN/components/form.md

::: anchor :::

::: title 基础使用 :::

::: demo

写作 画画 编码 提交

:::

::: title 表单基本校验功能 :::

::: demo

> 写作 画画 编码 提交 清除校验 重置表单

:::

::: title 校验规则 - 通过表单配置 :::

::: demo

提交

:::

::: title 校验规则 - 通过表单子项配置 :::

::: demo

提交

:::

::: title 原生submit方式校验 -- 校验通过将提交表单 -- 不推荐使用 :::

::: demo

账户 提交

:::

::: title 表单(form)属性 :::

::: table

属性	描述	类型	可选值	默认值
v-model	表单绑定值	object	-	{}
required	是否必填	boolean	true false	false
rules	表单校验规则; 可查看async-validator	object	-	-
initValidate	是否一开始就校验表单	boolean	true false	false
useCN	是否使用中文错误提示	boolean	true false	false
requiredIcons	必填前缀图标class	string	-	*
required-erroer-message	必填错误提示信息	string	-	%s不能为空
validate-message	自定义校验错误提示信息; 由于内置了中文错误提示，可按需求增量增加 可查看 async-validator 内置错误提示 也可参考 layui-vue 内置中文错误提示	string	-	%s不能为空

:::

::: title 表单(form)事件 :::

::: table

属性	描述	回调参数
submit	提交事件(不推荐使用)	(isValidate, model, errors) isValidate: (boolean)是否校验通过 model: (object)表单绑定的值 errors: (Array)校验结果的错误信息

:::

::: title 表单(form)方法 :::

::: table

属性	描述	入参
validate	表单校验; 如果没有callback回调，会返回Promise, Promise参数为{isValidate, model, errors} 参数具体描述请看上面表单submit提交事件	(fields [可选], callback [可选]) fields: (string / string[] / function) 单独校验的字段， 该字段如果为function, 则认为callback入参，校验全部字段; callback: (function)校验之后的回调， 回调参数为(isValidate, model, errors)； 参数具体描述请看上面表单submit提交事件
clearValidate	清除表单校验	(fields[可选]) fields: (string / string[]) 需要进行清除校验的表单字段, 如果该字段为空则清除全部校验
reset	重置表单所有值	-

:::

::: title 表单项(form-item)属性 :::

::: table

属性	描述	类型	可选值	默认值
prop	在表单绑定值(model)中字段key	string	-	-
label	子项前边描述值，尽量填写，中文校验错误需要用到	string	-	-
required	是否必填	boolean	true false	false
rules	表单校验规则; 可查看async-validator	object	-	-
error-message	表单校验失败固定提示语	string	block inline	block
mode	表单项显示的模式，块元素 / 行元素	string	block inline	block

:::

::: title 表单项(form-item)方法 :::

::: table

属性	描述	入参
validate	表单校验;	(callback [可选]) callback: (function)校验之后的回调， 回调参数为(errors, fields)； errors: (Array)校验结果的错误信息； fields: (Array)当前校验的字段信息
clearValidate	清除表单校验	-

:::

::: title 表单项(form-item)插槽 :::

::: table

属性	描述	可使用参数
-	默认插槽	传递进来的props和表单绑定的值(model)
label	子项前边描述插槽 如果使用此插槽，props尽量也传递label参数	传递进来的props和表单绑定的值(model)
required	必填前缀插槽	* / 表单props 中的 requiredIcons

:::

::: title 关于 async-validator 的使用 :::

查看： https://github.com/yiminghe/async-validator
中文翻译： https://www.cnblogs.com/wozho/p/10955525.html

::: title async-validator 基本校验类型 :::

::: table

属性	描述	使用方式
number	数字	{type : 'number'}
boolean	布尔类型	{type : 'boolean'}
method	方法	{type : 'method'}
regexp	正则表达式	{type : 'regexp'}
integer	整型数字	{type : 'integer'}
float	浮点小数	{type : 'float'}
array	数组	{type : 'array'}
object	对象	{type : 'object'}
enum	枚举	{type : 'enum'}
date	日期	{type : 'date'}
url	url	{type : 'url'}
hex	十六进制	{type : 'hex'}
email	邮箱	{type : 'email'}
:::

::: title async-validator 中 validator参数使用 :::

{
  validator: (rule, value) => value === 'root'
}

::: title async-validator 中 asyncValidator参数使用 :::

{
  asyncValidator: (rule, value) => {
    return new Promise((resolve, reject) => {
      if (value < 18) {
        reject('too young');  // reject with error message
      } else {
        resolve();
      }
    });
  }
}

::: title form 配置 async-validator 的使用 :::

{
    key : rule // key为表单子项需要校验的对应key名称， rule为校验规则，格式为{}
}
// 例如 表单绑定值为 {email : 'xxx', username: 'xxxxx'}
// 需要校验邮箱,而邮箱输入框在表单绑定的值中key为email，
// 需要校验用户名长度为8到16之间,而用户名输入框在表单绑定的值中key为username，
{
  email : {
    type :  'email'
  },
  username : {
    type :  'string',
    min : 8,
    max : 16
  }
}

::: title form-item 配置 async-validator 的使用 :::

// 例如 表单绑定值为 {email : 'xxx', phone: 'xxxxx'}
// 需要校验邮箱,而邮箱输入框在表单绑定的值中key为email
{
  type :  'email'
}

::: comment :::