<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>vue批量判定数据是否合规</title> </head> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <body> <div id="app"> <p>主要用于数据的提交，批量判定是否有数据是否和规则</p> <ul> <li> 姓名： <input type="text" v-model="name"> </li> <li> 年龄： <input type="number" v-model="age"> </li> <li> 体重： <input type="number" v-model="weight"> </li> <li> 手机： <input type="phone" v-model="phone"> </li> <li> 邮箱： <input type="email" v-model="email"> </li> <li> 地址： <input type="text" v-model="address"> </li> </ul> <button @click="btn()">点击测试数据是否正确</button> </div> <script> var app = new Vue({ el: '#app', data: { name: '', age: '', weight: '', phone: '', email: '', address: '' }, methods: { // 判定是否合规 have_empty: function (arr) { for (let key in arr) { console.log(arr[key].inspect) if (arr[key].inspect) { // 有值并且有规则执行验证 if(arr[key].reg){ let reg = new RegExp(arr[key].reg) var red_end = reg.test(arr[key].inspect) if( !red_end ){ alert('请输入正确的' + arr[key].msg) return false } } }else{ // 没值返回 fasle alert('请输入' + arr[key].msg) return false } } return true }, // 判定规则前传入参数 inspect: function () { var end = this.have_empty([ { inspect: this.name, // 待检测的字段 msg: '姓名', // 空值返回的提示 }, { inspect: this.age, msg: '年龄' }, { inspect: this.weight, msg: '体重' }, { inspect: this.phone, msg: '手机号', reg: '^[1][3,4,5,7,8][0-9]{9}$' }, { inspect: this.email, msg: '邮箱', reg: '^[a-z0-9]+([._\-]*[a-z0-9])*@([a-z0-9]+[-a-z0-9]*[a-z0-9]+.){1,63}[a-z0-9]+$' }, { inspect: this.address, msg: '地址' } ]) console.log(end) if (!end) return // 判定验证结果 console.log('执行提交的ajax函数') }, btn: function () { this.inspect() } }, mounted () { }, }) </script> </body> </html>