ip 表单验证 vue iview

Posted 2023-04-18 彭成刚_Reciter | 技术博客

ip 表单验证 vue iview

template

<Row v-show="config.bindIP">
          <Col span="12">
          <FormItem label="绑定IP："
                    prop="userPhoto"
                    :rules="[ required: true, validator: this.validateIPAddress, trigger: \'blur\' ]">
            <Input placeholder="请输入"
                   v-model="formData.userPhoto"
                   :maxlength="20" />
          </FormItem>
          </Col>
        </Row>

methods

validateIPAddress (rule, value, callback) 
      if (value == null) 
        return callback(new Error(\'IP地址不能为空\'))
      
      let regexp = /^((2(5[0-5]|[0-4]\\d))|[0-1]?\\d1,2)(\\.((2(5[0-5]|[0-4]\\d))|[0-1]?\\d1,2))3$/
      let valdata = value.split(\',\')
      let isCorrect = true
      if (valdata.length) 
        for (let i = 0; i < valdata.length; i++) 
          if (regexp.test(valdata[i]) === false) 
            isCorrect = false
          
        
      
      if (!isCorrect) 
        callback(new Error(\'请输入正确的IP地址\'))
       else 
        callback()
      
    ,

参考地址：
vue 关于IP地址的校验
https://blog.csdn.net/Aku_2020/article/details/126172034

---------------------------------------------
生活的意义并不是与他人争高下，而在于享受努力实现目标的过程，结果是对自己行动的嘉奖。
↑面的话，越看越不痛快，应该这么说：

生活的意义就是你自己知道你要做什么，明确目标。没有目标，后面都是瞎扯！

新博客 https://www.VuejsDev.com 用于梳理知识点

2019-03-28 重置iview表单错误提示

参考技术A 此坑是在做项目的时候，多次遇到，具体的描述就是，在一个表单进行赋值，并且有可能会被修改，但是没有被修改的情况下，提交表单验证，部分type类型对不上的就会报错，但是表单值都是完整的，因为修改的时候进行了默认赋值，解决这个问题，直接将验证中的trigger删掉就行了，问题得到解决；

但是，当你这么做的时候，当重新打开新表单，没有赋值的时候，会进行一次表单验证，注意是在已赋值过后，再次打开这个新表单，此时是添加，不是修改，表单就一个，表单复用；这个时候上一次不知道什么原因造成的验证错误留在了页面上；

这里的解决方法就是，重置那几条出现错误的input，下面是原理，具体的我没仔细看，也是从别的博文上看到的，反正我就复制了下面的解决办法；

查看iView的resetFields方法的源码，这个方法是这样写的，就只有一句话：
resetFields:function()this.fields.forEach(function(e)e.resetField())

*从这个forEach我们可以联想出整个表单的域是通过循环一个个重置的，每个域通过resetField这个方法进行重置，真正执行重置的是forEach里面的resetField方法。
那么这个fields应该就是所有域的集合了，console.log()一下，果不其然。
可以先看一下整个结构

console.log(this.$refs [name])

也可以直接看域的array

console.log(this.$refs [name].fields)

在每个属性的域中都有prop属性，可以通过这个属性去重置表单

这个意思就是使用ressetField方法去重置一个域为abc的FormItem;