vue+elementui给遍历生成表单添加效验

vue页面

javascript 复制代码
<el-form ref="form" :model="form" label-width="150px" :inline="true" :rules="formRules">
    <el-collapse-item
      :name="index + 1"
      v-for="(item, index) in form.list"
      :key="index"
    >
    <el-form-item
	 :prop="`list[${index}].peoples[${idx}].phone`"
	 :rules="formRules.phone"
	>
      <el-input v-model="i.phone"></el-input>
      </el-form-item>
       <el-form-item
         :prop="`list[${index}].peoples[${idx}].eamil`"
         :rules="[{ required: true, message: '请输入邮箱地址', trigger: 'blur' },
{ type: 'email', message: '请输入正确的邮箱地址', trigger: ['blur', 'change'] }]"
       >
   		<el-input v-model="i.eamil"></el-input>
 	</el-form-item>
   </el-collapse-item>
 </el-form>
                    

js 页面

javascript 复制代码
 data() {
        var checkPhone = (rule, value, callback) => {//手机号码校验
            const phoneReg = /^1[3|4|5|7|8|9][0-9]{9}$/
            console.log('vv',value);
            if (!value) {
              return callback(new Error('电话号码不能为空'))
            }
            setTimeout(() => {
              if (!Number.isInteger(+value)) {
                callback(new Error('请输入数字值'))
              } else {
                if (phoneReg.test(value)) {
                  callback()
                } else {
                  callback(new Error('电话号码格式不正确'))
                }
              }
            }, 100)
          }
        return {
            formRules:{
                'phone':[
                    { required: true,validator: checkPhone }
                ]
            },
   		}
   }
相关推荐
像风一样自由20204 小时前
HTML与JavaScript:构建动态交互式Web页面的基石
前端·javascript·html
浪裡遊5 小时前
React Hooks全面解析:从基础到高级的实用指南
开发语言·前端·javascript·react.js·node.js·ecmascript·php
幽络源小助理5 小时前
SpringBoot基于Mysql的商业辅助决策系统设计与实现
java·vue.js·spring boot·后端·mysql·spring
Liudef067 小时前
2048小游戏实现
javascript·css·css3
鱼樱前端8 小时前
今天介绍下最新更新的Vite7
前端·vue.js
独立开阀者_FwtCoder9 小时前
【Augment】 Augment技巧之 Rewrite Prompt(重写提示) 有神奇的魔法
前端·javascript·github
我想说一句9 小时前
事件机制与委托:从冒泡捕获到高效编程的奇妙之旅
前端·javascript
汤姆Tom9 小时前
JavaScript reduce()函数详解
javascript
小飞悟9 小时前
你以为 React 的事件很简单?错了,它暗藏玄机!
前端·javascript·面试
中微子9 小时前
JavaScript 事件机制:捕获、冒泡与事件委托详解
前端·javascript