技術標籤：表單 驗證

:rules="rules" 是動態繫結的rules，表單驗證規則

form表單

<template>
    <div class="short-visit">
      <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="130px" class="demo-ruleForm" v-if="textFlag">
        <el-form-item label="姓名" prop="name" class="form-height">
          <el-input
            v-model="ruleForm.name"
            :class="nameClass? '':'active'"
            :disabled="nameShell"
            @focus="nameFocus"
            maxlength="30"
          ></el-input>
        </el-form-item>
        <el-form-item class="submitBtn">
          <el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
        </el-form-item>
      </el-form >
      </div>
    </div>
</template>
 

驗證規則

 data (){
    return {
      ruleForm: {   // 存放資料的物件
        name: '', // 姓名
      },
      rules: { // 就是我們在el-form中繫結的rules，進行表單的驗證
        name: [ // 我們在el-form-item中繫結的prop，就是這裡的name，需要大家注意，這具有唯一性
          { required: true, message: '請輸入姓名', trigger: 'blur' }  // require:是否必填，如不設定，則會根據校驗規則自動生成;message:是提示的內容；trigger：是什麼事件觸發
        ]
      }
    }
  },
 

<el-table-column label="資料" show-overflow-tooltip align="center" min-width="150">
  <template slot-scope="scope">
    <div @click="invoicesLink(scope.row)" class="lookProcess">{{scope.row.orderNo}}</div>
  </template>
</el-table-column>
 

效果