vue_iview表单动态验证，发送请求

最新推荐文章于 2023-11-17 15:23:33 发布

流浪-人杰

最新推荐文章于 2023-11-17 15:23:33 发布

阅读量831

点赞数

分类专栏： VUE+iview 文章标签： vue js javascript

本文链接：https://blog.youkuaiyun.com/weixin_44671162/article/details/105774601

版权

VUE+iview 专栏收录该内容

10 篇文章

订阅专栏

本文介绍了一种在动态表单中实现前后端双重验证的方法，通过Vue.js中的自定义验证函数validatePass，确保输入的域名格式正确且非空。此方法增强了数据准确性，适用于需要动态收集信息的场景。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

需求

动态填写数据前端验证后后台再次验证。

动态表单代码

<FormItem
      v-for="(item,index) in aloneForm.additionalDomainIP"
      :key="index"
      :prop="'additionalDomainIP.'+index+'.domainName'"
      :rules="[{required: true,validator: validatePass,trigger:'blur'}]"
    >
 </FormItem>

方法 validatePass

    validatePass(rule, value, callback) {
      let vm = this
      let resDomainName = /^(?=^.{3,255}$)[a-zA-Z0-9][-a-zA-Z0-9]{0,62}(\.[a-zA-Z0-9][-a-zA-Z0-9]{0,62})+$/
      if (value === '') {
        callback(new Error(vm.$t('Can not be empty')))
      } else {
          if (!resDomainName.test(value)) {
            callback(new Error(vm.$t('Please enter the correct address')))
          } else {
            // 调用接口判断是否使用
          }
      }
    }