Vue 计算属性做表单验证

最新推荐文章于 2024-06-03 10:35:55 发布

长沙彭小黑

最新推荐文章于 2024-06-03 10:35:55 发布

阅读量1.1k

点赞数 1

分类专栏： Vue 文章标签： vue

原文链接：https://blog.csdn.net/u013350495/article/details/89403412

版权

Vue 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

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

参考博客原址：https://blog.csdn.net/u013350495/article/details/89403412

效果图：
在这里插入图片描述

<!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">&copy; 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>

————————————————
小白上路，请多指教！！

长沙彭小黑

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
Vue 计算属性做表单验证

使用 Vue.js 的计算属性（computed）做表单验证是一个非常省心省车事情，源码示例是一套简单的注册表单校验参考博客原址：https://blog.csdn.net/u013350495/article/details/89403412效果图：<!DOCTYPE html><html lang="en"><head> <me...
复制链接

扫一扫