-
绑定的数据
:model="ruleForm"
-
校验规则
:rules="rules"
//html :rules="rules" prop="account" //js rules：{ account: {required: true, message: "请输入您要注册的账号", trigger: "blur" }, {min: 6,max: 16, message: "账号应该由字母开头6~16位组成，不可使用特殊符号",trigger: "blur"} {required: true,pattern:/^[a-zA-z]\w{5,15}$/,message: "账号应该由字母开头6~16位组成",trigger: "blur"} }
-
绑定的表单
ref="ruleForm" 绑定过在下面通过下面方法来校验表单
['ruleForm']//一般代表表单名字 //全部验证 this.$refs['ruleForm'] .validate((vakid) =>{ if (vakid){ console.log("成功", ture);//通过校验 }eles{ console.log("error", false); //未通过校验 } }) //局部验证 ['ruleForm']//一般代表表单名字 ['Email']//要验证表单的那个要求 this.$refs['ruleForm'] .validate(['Email'] (vakid) =>{ if (vakid){ console.log("成功", ture);//通过校验 }eles{ console.log("error", false); //未通过校验 } }) -
Api详解
参数 说明 类型 可选值 默认值 model 绑定的数据 object — — rules 表单验证的规则 object — — inline 行内表单模式 boolean — false size 用于控制该表单内组件的尺寸 string medium / small / mini — disabled 是否禁用该表单内的所有组件。 boolean — false validate-on-rule-change 表单验证规则触发过就在触发他一次 boolean — true status-icon 是否在输入框中显示校验结果反馈图标 boolean — false inline-message 是否以行内形式展示校验信息 boolean — false show-message 是否显示校验错误信息 boolean — true hide-required-asterisk 是否显示必填字段的标签旁边的红色星号 boolean — false label-suffix 表单域标签的后缀 string — — abel-width 表单域标签的宽度，作为 Form 直接子元素的会继承该值。支持 auto string — — label-position 表单域标签的位置，如果值为 left 或者 right 时，需要设置 label-width string right/left/top right -
自带的回调函数 Form Methods
方法名 说明 参数 validate 校验整个表单方法，参数为一个回调函数。该回调函数会在校验结束后被调用 Function(callback: Function(boolean, object)) validateField 对部分表单字段进行校验的方法 Function(props: array | string, callback: Function(errorMessage: string)) resetFields 对整个表单进行重置，将所有字段值重置为初始值并移除校验结果 — clearValidate 移除表单项的校验结果。传入待移除的表单项的 prop 属性或者 prop 组成的数组，如不传则移除整个表单的校验结果 Function(props: array | string) validate 任一表单项被校验后触发 被校验的表单项 prop 值，校验是否通过，错误消息（如果存在）
