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

::: anchor :::

::: title 基础使用 :::

::: demo

写作 画画 编码 提交 <script> import { ref, reactive } from 'vue' import {layer} from '@layui/layer-vue' export default { setup() { const model = reactive({ username: "admin", password: "123456", specialty: "1" }) const submitClick = function(){ layer.open({ type: 1, title:"表单结果", content: `

${JSON.stringify(model)}

`, shade: false, isHtmlFragment: true, btn : [{ text: '确认', callback(index) { layer.close(index) }}], area : '500px' }); }; return { model, submitClick } } } </script>

:::

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

::: demo

> 写作 画画 编码 提交 清除校验 重置表单 <script> import { ref, reactive } from 'vue' import {layer} from '@layui/layer-vue' export default { setup() { const validateModel = reactive({ username: "", password: "", specialty: "1" }) const layFormRef = ref(null); // 校验 const validate = function() { layFormRef.value.validate((isValidate, model, errors) => { layer.open({ type: 1, title:"表单提交结果", content: `

是否通过 : ${isValidate}

表单数据 : ${JSON.stringify(model)}

错误信息 : ${JSON.stringify(errors)}

`, shade: false, isHtmlFragment: true, btn : [{ text: '确认', callback(index) { layer.close(index) }}], area : '500px' }); }); } // 清除校验 const clearValidate = function() { layFormRef.value.clearValidate(); } // 重置表单 const reset = function() { layFormRef.value.reset(); validateModel.specialty = "1" } return { validateModel, layFormRef, validate, clearValidate, reset } } } </script>

:::

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

::: demo

提交 <script> import { ref, reactive } from 'vue' import {layer} from '@layui/layer-vue' export default { setup() { const ruleDemo1 = reactive({ email: "", url: "", date: "", username: "", age: null, }) const rules = ref({ email : { type : 'email' }, url : { type : 'url' }, date : { type : 'date' }, username : { type : 'string', min : 8, max : 16 }, age : { validator(rule, value, callback, source, options){ if (value < 18) { callback(new Error(`${rule.field}太过于年轻`)); } else { return true; } } } }) const layFormRef1 = ref(null); // 校验 const validate1 = function() { layFormRef1.value.validate((isValidate, model, errors) => { layer.open({ type: 1, title:"表单提交结果", content: `

是否通过 : ${isValidate}

表单数据 : ${JSON.stringify(model)}

错误信息 : ${JSON.stringify(errors)}

`, shade: false, isHtmlFragment: true, btn : [{ text: '确认', callback(index) { layer.close(index) }}], area : '500px' }); }); } return { ruleDemo1, layFormRef1, validate1, rules } } } </script>

:::

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

::: demo

提交 <script> import { ref, reactive } from 'vue' import {layer} from '@layui/layer-vue' export default { setup() { const ruleDemo2 = reactive({ email: "", url: "", date: "", username: "", age: null, myEmail: "", }); const ageRules = { validator(rule, value, callback, source, options){ if (value < 18) { callback(new Error(`${rule.field}太过于年轻`)); return false; } return true; } }; const layFormRef2 = ref(null); // 校验 const validate2 = function() { layFormRef2.value.validate((isValidate, model, errors) => { layer.open({ type: 1, title:"表单提交结果", content: `

是否通过 : ${isValidate}

表单数据 : ${JSON.stringify(model)}

错误信息 : ${JSON.stringify(errors)}

`, shade: false, isHtmlFragment: true, btn : [{ text: '确认', callback(index) { layer.close(index) }}], area : '500px' }); }); } return { ruleDemo2, layFormRef2, validate2, ageRules } } } </script>

:::

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

::: demo

账户 提交 <script> import { ref, reactive } from 'vue' import {layer} from '@layui/layer-vue' export default { setup() { const submitModel = reactive({ username: "", password: "" }) const submit = function(isValidate, model, errors) { layer.open({ type: 1, title:"表单提交结果", content: `

是否通过 : ${isValidate}

表单数据 : ${JSON.stringify(model)}

错误信息 :
${JSON.stringify(errors)}

`, shade: false, isHtmlFragment: true, btn : [{ text: '确认', callback(index) { layer.close(index) }}], area : '500px' }) } return { submitModel } } } </script>

:::

::: 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 :::

::: previousNext form :::