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 }
                ]
            },
   		}
   }
相关推荐
10年前端老司机43 分钟前
React无限级菜单:一个项目带你突破技术瓶颈
前端·javascript·react.js
前端小趴菜056 小时前
React - createPortal
前端·vue.js·react.js
晓13136 小时前
JavaScript加强篇——第四章 日期对象与DOM节点(基础)
开发语言·前端·javascript
烛阴7 小时前
JavaScript函数参数完全指南:从基础到高级技巧,一网打尽!
前端·javascript
军军君017 小时前
基于Springboot+UniApp+Ai实现模拟面试小工具四:后端项目基础框架搭建下
spring boot·spring·面试·elementui·typescript·uni-app·mybatis
chao_7898 小时前
frame 与新窗口切换操作【selenium 】
前端·javascript·css·selenium·测试工具·自动化·html
天蓝色的鱼鱼8 小时前
从零实现浏览器摄像头控制与视频录制:基于原生 JavaScript 的完整指南
前端·javascript
三原9 小时前
7000块帮朋友做了2个小程序加一个后台管理系统,值不值?
前端·vue.js·微信小程序
白仑色9 小时前
完整 Spring Boot + Vue 登录系统
vue.js·spring boot·后端
阳火锅10 小时前
Vue 开发者的外挂工具:配置一个 JSON,自动造出一整套页面!
javascript·vue.js·面试