vue elementui 表单验证问题

1、:rules=“saveRules” 表单验证规则

2、:ref=“saveForm” 保存时验证表单

3、下拉框表单验证时:el-select中的v-model=“tempContract.tempId”，

trmpId 必须和 saveRules 中的名字一样

	  
	  
      tempId: [
        { required: true, trigger: ["blur",'change'], message: '请选择模板' }
      ]

4、下拉框验证

    trigger: ["blur",'change']

<el-form :model="tempContract" label-position="right" :rules="saveRules" ref="saveForm"> 
        <el-form-item label="请选择模板" prop="tempId">
          <el-select v-model="tempContract.tempId" placeholder="请选择" @change="changeElement">
            <el-option
              v-for="item in tempOptions"
              :key="item.tempId"
              :label="item.name"
              :value="item.tempId">
            el-option>
          el-select>
        el-form-item>
        <el-form-item label="合同名称" >
          <el-input v-model="tempContract.contractName">el-input>
        el-form-item>
        <h2>填写模板信息
          <hr/>
        h2>
        <el-row :gutter="20">
          <el-form-item label="签署人" prop="username">
            <el-input placeholder="签署人" v-model="tempContract.username" @change="changeConsole2(tempContract.username)">el-input>
          el-form-item>
          <el-form-item label="订单编号">
            <el-input placeholder="订单编号(选填)" v-model="tempContract.orderNo">el-input>
          el-form-item>
          <el-form-item label="手机号" prop="phone">
            <el-input placeholder="乙方手机号" v-model="tempContract.phone" >el-input>
          el-form-item>
          <el-col :span="12" v-for="(item,index) in need" :key="index">
            <el-form-item :label="item.label">
              <el-input :placeholder="item.value" v-model="temp[index].value" @change="changeConsole">el-input>
            el-form-item>
          el-col>
        el-row>
      el-form>
      

      data() {
     
      return {
     
        saveRules: {
     
          tempName: [
            {
     
              required: true, message: '请选择模板', trigger: 'blur'
            }
          ],
          username: [
            {
     
              required: true, message: '请输入用户名', trigger: 'blur'
            }
          ],
          phone: [
            {
      required: true, trigger: 'blur', validator: validPhone }
          ],
          tempId: [
            {
      required: true, trigger: ["blur",'change'], message: '请选择模板' }
          ]
        },