His summary of the custom form validation of both methods (element-ui)

The first

    var vm = new Vue({
        el: '#coupon_goods_add',
        data() {
        var decimals = /^[0-9]+(\.[0-9]{1})?$/;
        var checkDecimals = (rule, value, callback) => {
            setTimeout(() => {
                if (!decimals.test(value)) {
                    callback(new Error('请输入大于0最多一位小数的数字值'));
                }else {
                    callback();
                }
            }, 500);
            };
            return  {      
            //利用正则或者一些相应的条件来规定验证规则
  discount_amount: [
                        { required: true, message: '请输入优惠额度',},
                        { validator:checkDecimals } //再将规则注入验证当中
                    ],

The second

Here Insert Picture Description

.hidden {
				display: hidden !important;
				}
-------------------------------------------------------------------------------
if(this.selectedNum == 0) {
                    $('.commodity_number').addClass('el-form-item__error');//此处类是element-ui原有的,直接拿来用的
                }
---------------------------------------------------------------------------------
 watch: {
            selectedNum:function(oldval, newval) {
              if(oldval != 0) {
                  $('.commodity_number').addClass('hidden');
              }
            }
        },
        //通过watch监听需要验证变量的变化,然后通过添加类来显示隐藏

The third

This second method is equivalent to just advanced: benefits that do not use jq operating dom
use v-bind: class to add the class attribute to hide and display the prompt effect

Guess you like

Origin blog.csdn.net/weixin_43565820/article/details/89916851
Recommended