element-表单验证el-form

1、el-form表单验证

 

<el-form :model="form" :rules="rules" ref="ruleForm">
  <el-form-item label="英文标识：" prop="flagEn">
      <el-input v-model="form.flagEn" placeholder="请输入" maxlength="20" show-word-limit></el-input>
  </el-form-item>
  <el-form-item label="状态：" prop="status">
      <el-radio-group v-model="form.status">
           <el-radio :label="1">显示</el-radio>
           <el-radio :label="2">隐藏</el-radio>
      </el-radio-group>
  </el-form-item>
</el-form>
 <el-button @click="submitForm('ruleForm')">保存</el-button>



data () {
 form: {},
 rules: {}, // 表单验证规则
}

methods: {
 ruleInitialize () { // 初始化验证规则
        this.rules = {
            flagEn: [{
                required: true,
                message: '请输入英文标识',
                trigger: 'blur'
            }],
            status: [{
                    required: true,
                    message: '请选择状态',
                    trigger: 'change'
                }]
        }
    },
     submitForm () {
        this.$refs['ruleForm'].validate((valid) => {
          if (valid) {
             // 表单验证通过后操作
          } else {
            // 表单验证未通过后操作
          }
        });
    }

},
created () {
 this.ruleInitialize()
}