el-radio 规则校验必填不生效

 1.vue代码

     
          
            
             
          
        

2.规则代码

发现不生效,输入与否都不提示。

 // 表单校验
      rules: {
        orderStatus:[
          { required: true, message: '请选择工单状态', trigger: 'change' }
        ],
      },

3.原因分析

el-radio默认的值是0,导致规则校验 以为已经选择过了,导致规则报错不提示

4.调整办法

手动判断

     data() {

    var validateRadio = (rule, value, callback) => {
      if (value) {
         // 当值为0的时候当做没选择
         if (value==0) {
          callback(new Error('请选择工单状态'))
        }  else {
          callback();
        }
      } else {
        callback(new Error('请选择工单状态'));
      }
    };

    return { 

 // 表单校验
      rules: {
      
        orderStatus:[
          { validator: validateRadio, trigger: 'blur' },
        ],
      },
}

你可能感兴趣的:(elementui,vue.js,javascript)