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 }
                ]
            },
   		}
   }
相关推荐
Jedi Hongbin32 分钟前
Three.js shader内置矩阵注入
前端·javascript·three.js
超人不会飛1 小时前
vue3 markdown组件|大模型应用专用
前端·vue.js·人工智能
VillenK1 小时前
用插件的方式注入Vue组件
前端·vue.js
掘金安东尼1 小时前
Node.js 如何在 2025 年挤压 I/O 性能
前端·javascript·github
得物技术2 小时前
前端日志回捞系统的性能优化实践|得物技术
前端·javascript·性能优化
ZKshun2 小时前
[ 前端JavaScript的事件流机制 ] - 事件捕获、冒泡及委托原理
javascript
等什么君!2 小时前
如何 正确使用 nrm 工具 管理镜像源
vue.js
warder2 小时前
字典状态管理:基于 Vue3 + Pinia 的工程化实践
vue.js
薛定谔的算法2 小时前
JavaScript栈的实现与应用:从基础到实战
前端·javascript·算法
魔云连洲2 小时前
React中的合成事件
前端·javascript·react.js