elform 校验

    <!--模块新增编辑-->
    <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=" 70%;" readonly="readonly"></el-input>
        </el-form-item>
        <el-form-item label="模块(小写英文)" prop="module">
          <el-input style=" 70%;" v-model="moduleForm.module" minlength="1" >
          </el-input>
        </el-form-item>
        <el-form-item label="默认端口" prop="port">
          <el-input style=" 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('请输入小写英文字母'))
      }

        callback()

    }
    
    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('服务端出错')
    })
  }
})