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:'不能為空'}]
      }