<!--模組新增編輯-->
    <el-dialog :title="moduleDialogName" :visible.sync="moduleDialog" :modal-append-to-body="false" center width="30%" >
      <el-form :model="moduleForm" label-width="160px" :rules="moduleFormRule" ref="moduleFormRuleRef">
        <el-form-item label="父模組" prop
 
="project">
          <el-input v-model="moduleForm.parentModule" placeholder="請輸入內容"  style="width: 70%;" readonly="readonly"></el-input>
        </el-form-item>
        <el-form-item label="模組(小寫英文)" prop="module">
          <el-input style="width: 70%;" v-model="moduleForm.module"
 
 minlength="1" >
          </el-input>
        </el-form-item>
        <el-form-item label="預設埠" prop="port">
          <el-input style="width: 70%;" v-model="moduleForm.port" minlength="1" >
          </el-input>
        </el-form-item>
      </el-form>
      <
 
div slot="footer" class="dialog-footer">
        <el-button size="mini" id="signs2" type="primary" @click="dealModuleData()" >提 交</el-button>
        <el-button size="mini" @click="moduleDialog = false">關閉</el-button>
      </div>
    </el-dialog>

data() { 
    var checkModuleName = (rule, value, callback) => {
      if (!value) {
        return callback(new Error('請輸入模組名'))
      }
      let pattern = new RegExp('[a-z]')
      if (!pattern.test(value)) {
        return callback(new Error('請輸入小寫英文字母'))
      }
    }
    
    return {
      moduleFormRule: {
        module: [
          { required: true, trigger: 'blur', validator: checkModuleName }
        ]
      }
    }
}

最後在方法里加上校驗：
self.$refs['moduleFormRuleRef'].validate(valid => {
  if (valid) {
    commData.addModuleName(param).then(data => {
      if (data.success) {
        this.moduleDialog = false
        // self.getModuleData(1, self.pageSize)
        if (self.projectObj) {
          self.getModuleTreeData()
        }
        self.$message({ message: '新增成功', type: 'success' })
      } else {
        self.$message.error(data.msg)
      }
    }).catch(e => {
      self.$message.error('服務端出錯')
    })
  }
})