vue+element 表单验证
效果图
注意:如果是弹窗式的表单验证,记得每次退出退出重置一下表单。否则会每次进去都跳出验证影响体验
<template> <div class="formValidator"> <div v-for="(item,index) in dataList" :key="index"> <el-form :model="dataList[index]" :rules="rules" ref="ruleForm" class="demo-ruleForm"> <el-form-item label="活动名称" prop="name"> <el-input v-model="dataList[index].name"></el-input> </el-form-item> <el-form-item label="活动形式" prop="desc"> <el-input v-model="dataList[index].desc"></el-input> </el-form-item> <el-form-item label="手机号码" v-for="(phoneItem,phoneIndex) in dataList[index].phoneNumbers" :key="phoneIndex" :rules="[{ required: true, validator: phoneNumberValidator, trigger: ['blur','change'] }]" :prop="'phoneNumbers.' + phoneIndex + '.phoneNumber'" > <el-input v-model.trim="phoneItem.phoneNumber" onkeyup="this.value=this.value.replace(/\D/g,'')" maxlength="11" ></el-input> <el-link v-if="item.phoneNumbers.length > 1" type="primary" :underline="false" style="margin-left:10px" @click.prevent="removePhoneNumber(index,phoneIndex)" >删除</el-link> </el-form-item> <el-form-item> <el-link type="primary" :underline="false" @click.prevent="addPhoneNumber(index)">增加手机号</el-link> </el-form-item> </el-form> </div> <el-button type="primary" @click="submitForm('ruleForm')">提交</el-button> <el-button @click="resetForm('ruleForm')">重置</el-button> </div> </template> <script> export default { name: "formValidator", data() { let that = this // 校验 input 的 函数 与rules里面 validator的参数 function nameValidator(rule, value, callback) { if (value.trim() === "") { callback(new Error("活动名称必填")); } else { callback(); } } function descValidator(rule, value, callback) { if (value.trim() === "") { callback(new Error("活动形式必填")); } else { callback(); } } function phoneNumberValidator(rule, value, callback) { // 判断手机号码是否重复 let repeatPhoneNum = that.dataList.map(item => { if(!!item.phoneNumbers){ return item.phoneNumbers.filter(itemFilter => itemFilter.phoneNumber === value).length > 1 } }) // console.log(repeatPhoneNum) if (value.trim() === "") { callback(new Error("手机号码必填")); } else if (value.length < 11) { callback(new Error("手机号格式错误")); } else if(repeatPhoneNum.includes(true)){ callback(new Error("新增号码重复")); }else { callback(); } } return { // 手机号验证 手机号验证是v-for循环 所以应用的是官网案例 单独v-for 的校验需要注意 :prop里的值 phoneNumberValidator: phoneNumberValidator, //数据列表 dataList: [ { name: "", desc: "", phoneNumbers: [ { phoneNumber: "" } ] } ], // 用来校验表单的rules rules: { name: [ { validator: nameValidator, required: true, trigger: ["blur", "change"] } ], desc: [ { validator: descValidator, required: true, trigger: ["blur", "change"] } ] } }; }, components: {}, created() {}, mounted() {}, methods: {
//点击保存按钮进行所有表单验证 submitForm(ref) { // 获取到表单 let el = this.$refs.ruleForm; let validate // 用来存放是否表单验证通过,true 通过 , false 不通过 if (el.length > 0) { el.forEach((item, index) => { item.validate(valid => { validate = valid }); }); }
//在里面可以打印一下 el 里面的mode 代表着form 表单中的所填写的字段及内容 console.log(el, validate); }, // 添加手机号 addPhoneNumber(index) { this.dataList[index].phoneNumbers.push({ phoneNumber: "" }); }, // 删除手机号 removePhoneNumber(index1,index2){ this.dataList[index1].phoneNumbers.splice(index2,1) } } }; </script>
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】博客园携手 AI 驱动开发工具商 Chat2DB 推出联合终身会员
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 一个超经典 WinForm,WPF 卡死问题的终极反思
· ASP.NET Core - 日志记录系统(二)
· .NET 依赖注入中的 Captive Dependency
· .NET Core 对象分配(Alloc)底层原理浅谈
· 聊一聊 C#异步 任务延续的三种底层玩法
· 互联网不景气了那就玩玩嵌入式吧,用纯.NET开发并制作一个智能桌面机器人(一):从.NET IoT入
· .NET 开发的分流抢票软件,不做广告、不收集隐私
· 一个超经典 WinForm,WPF 卡死问题的终极反思
· 开箱你的 AI 语音女友「GitHub 热点速览」
· 前端实现 HTML 网页转 PDF 并导出