欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

vue批量验证提交表单的数据是否合规

程序员文章站 2022-04-13 15:25:33
vue批量判定数据是否合规 主要用于数据的提交,批量判定是否有数据是否和规则 姓名: 年龄: ... ......
<!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>