iview 中表单爬坑

使用iview表单时候遇到的坑

后续继续整理和参考
https://www.jianshu.com/p/ffbd55a2c866
https://www.jianshu.com/p/ef97dbf4fcfe
https://www.jianshu.com/p/5f9300437038
https://blog.csdn.net/bluefish_flying/article/details/81909136

自带方式不能验证数字

这种方式并没有校验是否为数字

因为在type="number"这里就给禁止了，但是这种写法允许为空，而我们要求为必填

<FormItem label="班级：" prop="301">
  <Input v-model="parameter[301]" type="number">Input>
FormItem>

      ruleValidate: {
        "301": [
          {
            required: true,
            message: "这是必填项",
            trigger: "blur"
          },
          {
            type:"number",
            message:"请填入数字",
            trigger:"blur"
          }
        ]
      }

• iview中input默认输入的元素为string类型，如果只能输入数字，需要修改为type=number
• 去掉对于type的验证也和上面一样，不会校验必填

      ruleValidate: {
        "301": [
          {
            required: true,
            message: "这是必填项",
            trigger: "blur"
          }
        ]
      }

将type和require写入一个里面也不行

<FormItem label="班级：" prop="301">
  <Input v-model="parameter[301]" type="number">Input>
FormItem>

      ruleValidate: {
        "301": [
          {
            required: true,
            message: "必须填写数字",
            trigger: "blur",
            type:"number"
          }
        ]
      }

只写一个type验证也不行

依旧无法校验是否为数字，只能在input上面加入type=number

{ type: 'number', message: '请输入排序', trigger: 'blur' }

解决

<FormItem label="班级：" prop="301">
  <Input v-model="parameter[301]" type="number">Input>
FormItem>

      ruleValidate: {
        "301": [
          {
            required: true,
            message: "这是必填项",
            // trigger: "blur"
          },
          {
            validator: validateNum,
          }
        ]
      }

validateNum为自定义校验规则,直接放在data里面就可以

    const validateNum = (rule, value, callback) => {
      console.log("rule");

      console.log(rule);
      console.log("value");
      console.log(value);
      console.log("callback");
      console.log(callback);
      if (!Number.isInteger(+value)) {
        callback(new Error("请输入数字"));
      } else {
        callback();
      }
    };

这里有个问题，如果在require里面加入trigger: "blur",会导致第一次进来以后，有值的时候也会报错，所以我把他去掉，直接在提交的时候在校验