elform自定义校验规则

el-form自定义校验规则

 <el-form :model="moduleForm" label-width="160px" :rules="moduleFormRule" ref="moduleFormRuleRef">
  ...
    <el-form-item label="模块别名" prop="aliaName" size="mini">
          <el-input style=" 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('服务端出错')
            })
          }
        })