-
綁定的數(shù)據(jù)
:model="ruleForm"
-
校驗規(guī)則
: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詳解
參數(shù) 說明 類型 可選值 默認值 model 綁定的數(shù)據(jù) object — — rules 表單驗證的規(guī)則 object — — inline 行內(nèi)表單模式 boolean — false size 用于控制該表單內(nèi)組件的尺寸 string medium / small / mini — disabled 是否禁用該表單內(nèi)的所有組件。 boolean — false validate-on-rule-change 表單驗證規(guī)則觸發(fā)過就在觸發(fā)他一次 boolean — true status-icon 是否在輸入框中顯示校驗結(jié)果反饋圖標 boolean — false inline-message 是否以行內(nèi)形式展示校驗信息 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 -
自帶的回調(diào)函數(shù) Form Methods
方法名 說明 參數(shù) validate 校驗整個表單方法帕棉，參數(shù)為一個回調(diào)函數(shù)空盼。該回調(diào)函數(shù)會在校驗結(jié)束后被調(diào)用 Function(callback: Function(boolean, object)) validateField 對部分表單字段進行校驗的方法 Function(props: array | string, callback: Function(errorMessage: string)) resetFields 對整個表單進行重置，將所有字段值重置為初始值并移除校驗結(jié)果 — clearValidate 移除表單項的校驗結(jié)果姿搜。傳入待移除的表單項的 prop 屬性或者 prop 組成的數(shù)組寡润，如不傳則移除整個表單的校驗結(jié)果 Function(props: array | string) validate 任一表單項被校驗后觸發(fā) 被校驗的表單項 prop 值，校驗是否通過舅柜，錯誤消息（如果存在）
