iview 中表单爬坑

Myth丶恋晨 2022-02-04 08:09 283阅读 0赞

# 使用iview表单时候遇到的坑 #

后续继续整理和参考  
[https://www.jianshu.com/p/ffbd55a2c866][https_www.jianshu.com_p_ffbd55a2c866]  
[https://www.jianshu.com/p/ef97dbf4fcfe][https_www.jianshu.com_p_ef97dbf4fcfe]  
[https://www.jianshu.com/p/5f9300437038][https_www.jianshu.com_p_5f9300437038]  
[https://blog.csdn.net/bluefish\_flying/article/details/81909136][https_blog.csdn.net_bluefish_flying_article_details_81909136]

## 自带方式不能验证数字 ##

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

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

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`写入一个里面也不行 ###

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

### 只写一个type验证也不行 ###

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

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

### 解决 ###

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

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

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

##  ##

[https_www.jianshu.com_p_ffbd55a2c866]: https://www.jianshu.com/p/ffbd55a2c866
[https_www.jianshu.com_p_ef97dbf4fcfe]: https://www.jianshu.com/p/ef97dbf4fcfe
[https_www.jianshu.com_p_5f9300437038]: https://www.jianshu.com/p/5f9300437038
[https_blog.csdn.net_bluefish_flying_article_details_81909136]: https://blog.csdn.net/bluefish_flying/article/details/81909136