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>

欢迎分享本文,转载请保留出处:前端ABC » vue批量验证提交表单的数据是否合规

赞 (0)
分享到:更多 ()

发表评论 0