vue.js - vue2.0+element-ui有radio不能提交?

问题描述

问 题

必填项目没有填时,报错,如下图

没有radio时可以提交,注册成功,如下图

有radio时,不能提交,并且没有显示,如下图

HTML代码

  <div class="register-wrapper">
    <div class="register">
      <h3 class="title">用户注册</h3>
      <el-form class="registerForm" ref="registerForm" :model="registerForm" :rules="registerRules" :label-position="labelPosition" label-width="100px">
        <el-form-item label="证件选择:" prop="certificateType">
          <el-radio-group v-model="registerForm.certificateType">
            <el-radio label="0">警官证</el-radio>
            <el-radio label="1">身份证</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="证件号:" prop="certificateNumber">
          <el-input v-model="registerForm.certificateNumber" placeholder="请输入证件号"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="subRegForm('registerForm')" class="register-btn">注册</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>

js代码

  export default {
    data () {
       /*证件号选择验证*/
      let valCarSel = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请选择证件'));
        }
      };
      /*证件号验证*/
      let validateCard = (rule, value, callback) => {
        let cardRule = value.replace(/[0-9a-zA-Z]{6,16}/g,'');
        if (value === '') {
          callback(new Error('请输入证件号'));
        } else {
          if (cardRule) {
            callback(new Error('证件号为长度在 6 到 16 位的英文字母和数字'));
          }
          callback();
        }
      };
      return {
           registerForm: {
              certificateType: '0',  
              certificateNumber: '111111',  

           },
           registerRules: {
             certificateType: [
            { required:true, validator: valCarSel, trigger: 'change' }
          ],
          certificateNumber: [
            { required:true, validator: validateCard, trigger: 'blur' }
          ],
          }
     }

subRegForm () {
        this.$refs.registerForm.validate((valid) => {
          if (valid) {
            this.$message({
              message: '注册成功',
              type: 'success'
            });
          } else {
            this.$message({
              message: '注册失败',
              type: 'error'
            });
            return false;
          }
        });
      }

并且有radio的时候还没有报错,radio到底哪里错了啊?

解决方案

上面的验证函数改一下，多加一个else{callback()}，就可以了

let valCarSel = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请选择证件'));
        }else{
          callback();
        }
      };

这篇关于vue.js - vue2.0+element-ui有radio不能提交?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！