Vue.js 做表单验证

布满荆棘的人生 2022-02-17 13:00 373阅读 0赞

> 使用 Vue.js 的计算属性（computed）做表单验证是一个非常省心省车事情，源码示例是一套简单的注册表单校验

效果图：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTMzNTA0OTU_size_16_color_FFFFFF_t_70][]

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>用 Vue.js 做表单验证</title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
        <meta name="author" content="helang.love@qq.com">
        <link rel="stylesheet" href="https://mydarling.gitee.io/resource/Bootstrap/css/bootstrap.min.css">
    </head>
    <body>
        <div class="container" style="padding-top: 20px;">
            <h3 class="text-danger">移动模式浏览效果</h3>
            <div class="row">
                <div class="col-xs-12 col-sm-4 col-sm-offset-4">
                    <div class="panel panel-primary">
                        <div class="panel-heading">注册</div>
                        <div class="panel-body">
                            <form id="register">
                                <div class="form-group">
                                    <label for="nikeName">用户名</label>
                                    <input type="text" class="form-control" id="nikeName" placeholder="请输入用户名" v-model="nikeName">
                                </div>
                                <div class="form-group">
                                    <label for="pwd">密码</label>
                                    <input type="password" class="form-control" id="pwd" placeholder="请输入密码" v-model="pwd">
                                </div>
                                <div class="form-group">
                                    <label for="pwd2">确认密码</label>
                                    <input type="password" class="form-control" id="pwd2" placeholder="请输入确认密码" v-model="pwd2">
                                </div>
                                <div class="form-group">
                                    <label for="email">联系邮箱</label>
                                    <input type="text" class="form-control" id="email" placeholder="请输入邮箱" v-model="email">
                                </div>
                                <div class="checkbox">
                                    <label>
                                        <input type="checkbox" v-model="consent"> <span>同意服务条款</span>
                                    </label>
                                </div>
                                <button type="button" class="btn btn-block" @click="submit" :class="verify.flag ? 'btn-primary' : 'btn-default'">确认注册</button>
                            </form>
                        </div>
                        <div class="panel-footer text-primary">© 2019 helang.love@qq.com</div>
                    </div>
                </div>
            </div>
        </div>
        <script type="text/javascript" src="https://mydarling.gitee.io/resource/vue/vue.min.js"></script>
        <script type="text/javascript" src="https://mydarling.gitee.io/resource/layer/mobile/layer.js"></script>
        <script type="text/javascript">
            new Vue({
                el: '#register',
                data: {
                    nikeName:'',
                    pwd:'',
                    pwd2:'',
                    email:'',
                    consent:false
                },
                computed:{
                    verify:function () {
                        if(!this.nikeName){
                            return {"flag":false,"msg":'请填写有效的用户名'};
                        }
                        if(this.pwd.length<6 || this.pwd.length>16){
                            return {"flag":false,"msg":'密码长度在6-16个字符之间'};
                        }
                        if(this.pwd != this.pwd2){
                            return {"flag":false,"msg":'两次输入的密码不一致'};
                        }
                        if(!/\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*/.test(this.email)){
                            return {"flag":false,"msg":'请填写有效的邮箱'};
                        }
                        if(!this.consent){
                            return {"flag":false,"msg":'请勾选[同意服务条款]'};
                        }
                        return {"flag":true,"msg":'ok'};
                    }
                },
                methods:{
                    submit:function () {
                        if(!this.verify.flag){
                            layer.open({
                                content: this.verify.msg,
                                skin: 'msg',
                                time: 2
                            });
                            return;
                        }
                        var loading=layer.open({
                            type: 2,
                            content: '正在注册中'
                        });
                        setTimeout(function () {
                            layer.close(loading);
                            layer.open({
                                content: '注册成功，去体验吗？',
                                btn: '立即体验',
                                yes:function () {
                                    layer.closeAll();
                                    setTimeout(function () {
                                        window.open('https://blog.csdn.net/u013350495');
                                    },500);
                                }
                            });
                        },2000);
                    }
                }
            })
        </script>
    </body>
    </html>

> 作者：[黄河爱浪][Link 1] QQ：1846492969，邮箱：helang.love@qq.com
> 
> 公众号：`web-7258`，本文原创，著作权归作者所有，转载请注明原链接及出处。
> 
> 更多精彩文章，请扫下方二维码关注我的公众号
> 
> ![20190512094840637.jpg][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTMzNTA0OTU_size_16_color_FFFFFF_t_70]: /images/20220217/61ba8adcd27345d182733f49bdbf8472.png
[Link 1]: https://blog.csdn.net/u013350495
[20190512094840637.jpg]: /images/20220217/5c3d264b4cb1428fa06617de28ee7aad.png