目录

hymn

忽有故人心头过,回首山河已是秋。

vue elementui 表单验证问题

  1. :rules="saveRules" 表单验证规则
  2. :ref="saveForm" 保存时验证表单
  3. 下拉框表单验证时:el-select中的v-model=“tempContract.tempId”,

trmpId 必须和 saveRules 中的名字一样
<el-select v-model="tempContract.tempId" placeholder="请选择" @change="changeElement">

<el-select v-model="tempContract.tempId" placeholder="请选择" @change="changeElement">  


     tempId: [
                  { required: true, trigger: ["blur",'change'], message: '请选择模板' }
             ]
  1. 下拉框验证

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: '请选择模板' }
          ]
        },

标题:vue elementui 表单验证问题
作者:hymn
地址:https://dxyhymn.com/articles/2020/07/02/1593662027016.html