::: title 基础使用 ::: ::: demo ::: ::: title 表单基本校验功能 ::: ::: demo ::: ::: title 校验规则 - 通过表单配置 ::: ::: demo ::: ::: title 校验规则 - 通过表单子项配置 ::: ::: demo ::: ::: title 原生submit方式校验 -- 校验通过将提交表单 -- 不推荐使用 ::: ::: demo ::: ::: title 表单(form)属性 ::: ::: table | 属性 | 描述 | 类型 | 可选值 | 默认值 | | ------------- | -------------------------------------------------------------- | --------- | -------------- | ------- | | model | 表单绑定值 | `object` | - | {} | | required | 是否必填 | `boolean` | `true` `false` | `false` | | rules | 表单校验规则;
可查看[async-validator](https://github.com/yiminghe/async-validator) | `object` | - | - | | initValidate | 是否一开始就校验表单 | `boolean` | `true` `false` | `false` | | useCN | 是否使用中文错误提示 | `boolean` | `true` `false` | `false` | | requiredIcons | 必填前缀图标`class` | `string` | - | `*` | | required-erroer-message | 必填错误提示信息 | `string` | - | `%s不能为空`| | validate-message | 自定义校验错误提示信息;
由于内置了中文错误提示,可按需求增量增加
可参考 [layui-vue 内置中文错误提示](https://gitee.com/layui-vue/layui-vue/tree/master/src/module/formItem/cnValidateMessage.ts) | `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](https://github.com/yiminghe/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参数使用 ::: ```javascript { validator: (rule, value) => value === 'root' } ``` ::: title async-validator 中 asyncValidator参数使用 ::: ```javascript { asyncValidator: (rule, value) => { return new Promise((resolve, reject) => { if (value < 18) { reject('too young'); // reject with error message } else { resolve(); } }); } } ``` ::: title form 配置 async-validator 的使用 ::: ```javascript { 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 的使用 ::: ```javascript // 例如 表单绑定值为 {email : 'xxx', phone: 'xxxxx'} // 需要校验邮箱,而邮箱输入框在表单绑定的值中key为email { type : 'email' } ``` ::: comment :::