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 }
                ]
            },
   		}
   }
相关推荐
codingandsleeping16 小时前
使用orval自动拉取swagger文档并生成ts接口
前端·javascript
白水清风17 小时前
微前端学习记录(qiankun、wujie、micro-app)
前端·javascript·前端工程化
用户221520442780018 小时前
new、原型和原型链浅析
前端·javascript
阿星做前端18 小时前
coze源码解读: space develop 页面
前端·javascript
叫我小窝吧18 小时前
Promise 的使用
前端·javascript
用户516816614584119 小时前
Vue Router 路由懒加载引发的生产页面白屏问题
vue.js·vue-router
前端康师傅19 小时前
JavaScript 作用域
前端·javascript
前端缘梦19 小时前
Vue Keep-Alive 组件详解:优化性能与保留组件状态的终极指南
前端·vue.js·面试
云枫晖19 小时前
JS核心知识-事件循环
前端·javascript
Simon_He19 小时前
这次来点狠的:用 Vue 3 把 AI 的“碎片 Markdown”渲染得又快又稳(Monaco 实时更新 + Mermaid 渐进绘图)
前端·vue.js·markdown