vue ElementUI 表單驗證 不能繫結多層次資料
阿新 • • 發佈:2019-02-15
elementUI 的 el-row元件提供了rules屬性來定製 各個el-form-item的驗證規則
程式碼如下,其中form的 :model必須繫結一個物件,然後form-item prop屬性繫結該物件下面的想要驗證的屬性,
注意!!! prop指定的屬性只能是物件的下一層屬性 ,例如物件 var data = {name:"",sex:"",config:{set:"",get:""}}
當:model繫結為data時,form-item prop屬性只能填name,sex,不能繫結config屬性下面的set和get屬性,即只能繫結一層屬性,不能繫結多層下的屬性,如果想要form-item prop想要繫結seth和get屬性,可以設定 :model=data.config,或者設定prop 為 config.set,config.get ,但此時繫結不了上一層的name和sex屬性
<el-form :rules="rules" :model="data.config" ref="ruleForm"> <el-row> <el-col :span="20"> <el-form-item label="名稱" prop="name" > <el-input v-model="data.config.name" auto-complete="off" ></el-input> </el-form-item> <el-form-item label="Percent_DPC_Time最大值" prop="Percent_DPC_Time"> <el-input v-model="data.config.Percent_DPC_Time" placeholder="0~100,為空條件不限制"></el-input> </el-form-item> <el-form-item label="Percent_Idle_Time最大值" prop="Percent_Idle_Time"> <el-input v-model="data.config.Percent_Idle_Time" placeholder="0~100,為空條件不限制"></el-input> </el-form-item> <el-form-item label="Percent_Interrupt_Time最大值" prop="Percent_Interrupt_Time"> <el-input v-model="data.config.Percent_Interrupt_Time" placeholder="0~100,為空條件不限制"></el-input> </el-form-item> <el-form-item label="Percent_Privileged_Time最大值" prop="Percent_Privileged_Time"> <el-input v-model="data.config.Percent_Privileged_Time" placeholder="0~100,為空條件不限制"></el-input> </el-form-item> <el-form-item label="Percent_Processor_Time最大值" prop="Percent_Processor_Time"> <el-input v-model="data.config.Percent_Processor_Time" placeholder="0~100,為空條件不限制"></el-input> </el-form-item> <el-form-item label="Percent_User_Time最大值" prop="Percent_User_Time"> <el-input v-model="data.config.Percent_User_Time" placeholder="0~100,為空條件不限制"></el-input> </el-form-item> </el-col> </el-row> </el-form>
checkPercent = (rule, value, callback) => { var reg = new RegExp("^(([0-9]+\.[0-9]*[1-9][0-9]*)|([0-9]*[1-9][0-9]*\.[0-9]+)|([0-9]*[1-9][0-9]*))$"); if (!value) { //可為空,代表條件不限制 return callback(); } setTimeout(() => { if (!reg.test(value)) { callback(new Error("請輸入正數")); } else { let num = Number(value); if (value > 100 || value < 0) { callback(new Error("0-100之間")); } else { callback(); } } }, 1000); };
rules: {
Percent_DPC_Time: [{ validator: checkPercent, trigger: "blur" }],
Percent_Idle_Time: [{ validator: checkPercent, trigger: "blur" }],
Percent_Interrupt_Time: [{ validator: checkPercent, trigger: "blur" }],
Percent_Privileged_Time: [{ validator: checkPercent, trigger: "blur" }],
Percent_Processor_Time: [{ validator: checkPercent, trigger: "blur" }],
Percent_User_Time: [{ validator: checkPercent, trigger: "blur" }],
name:[{required:true,message:'不能為空'}]
}