el-form自定義校驗規則

el-form自定義校驗規則

 <el-form :model="moduleForm" label-width="160px" :rules="moduleFormRule" ref="moduleFormRuleRef">
  ...
    <el-form-item label="模塊別名" prop="aliaName" size="mini">
          <el-input style="width: 70%;" v-model="moduleForm.aliaName" minlength="1" >
          </el-input>
        </el-form-item>
</el-form>


  data() {
    var checkAliaName = (rule, value, callback) => {
      if (!value) {
        return callback(new Error('請輸入名稱'))
      } else {
        // if (value.indexOf('-') > -1) {
        //   value = value.replace(/-/g, '')
        // }
        let pattern = new RegExp('[_]')
        if (pattern.test(value)) {
          return callback(new Error('不可使用下划線，可用中杠-分隔'))
        }
      }
      callback()
    }
    return {
       moduleFormRule: {
        aliaName: [
          { required: true, trigger: 'blur', validator: checkAliaName }
        ]
　　　　// 簡單的是這種

     　　// port: [{ required: true, message: '請填寫端口', trigger: 'blur' }]

      }
   }
}   

方法中：

        this.$refs['moduleFormRuleRef'].validate(valid => {
          if (valid) {
            commData.addModuleData(param).then(data => {
              if (data.success) {
                this.moduleDialog = false
                if (self.projectObj) {
                  self.getModuleTreeData()
                }
                self.$message({ message: '添加成功', type: 'success' })
              } else {
                self.$message.error(data.msg)
              }
            }).catch(e => {
              self.$message.error('服務端出錯')
            })
          }
        })