vue-validator demo

最新推荐文章于 2023-03-14 16:31:32 发布

weixin_33905756

最新推荐文章于 2023-03-14 16:31:32 发布

阅读量261

点赞数

CC 4.0 BY-SA版权

文章标签： ui javascript ViewUI

原文链接：https://segmentfault.com/a/1190000005058807

本文介绍了一个基于Semantic UI和Vue.js构建的登录表单实例。该实例展示了如何利用Semantic UI的各种组件来美化表单，并通过Vue.js进行表单验证。文章详细介绍了表单的设计过程，包括样式设置、表单验证逻辑等。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">

    <link rel="stylesheet" type="text/css" href="http://cdn.bootcss.com/semantic-ui/2.1.8/components/reset.min.css" />
    <link rel="stylesheet" type="text/css" href="http://cdn.bootcss.com/semantic-ui/2.1.8/components/site.min.css" />
    <link rel="stylesheet" type="text/css" href="http://cdn.bootcss.com/semantic-ui/2.1.8/components/container.min.css" />
    <link rel="stylesheet" type="text/css" href="http://cdn.bootcss.com/semantic-ui/2.1.8/components/grid.min.css" />
    <link rel="stylesheet" type="text/css" href="http://cdn.bootcss.com/semantic-ui/2.1.8/components/header.min.css" />
    <link rel="stylesheet" type="text/css" href="http://cdn.bootcss.com/semantic-ui/2.1.8/components/image.min.css" />
    <link rel="stylesheet" type="text/css" href="http://cdn.bootcss.com/semantic-ui/2.1.8/components/menu.min.css" />
    <link rel="stylesheet" type="text/css" href="http://cdn.bootcss.com/semantic-ui/2.1.8/components/divider.min.css" />
    <link rel="stylesheet" type="text/css" href="http://cdn.bootcss.com/semantic-ui/2.1.8/components/segment.min.css" />
    <link rel="stylesheet" type="text/css" href="http://cdn.bootcss.com/semantic-ui/2.1.8/components/form.min.css" />
    <link rel="stylesheet" type="text/css" href="http://cdn.bootcss.com/semantic-ui/2.1.8/components/input.min.css" />
    <link rel="stylesheet" type="text/css" href="http://cdn.bootcss.com/semantic-ui/2.1.8/components/button.min.css" />
    <link rel="stylesheet" type="text/css" href="http://cdn.bootcss.com/semantic-ui/2.1.8/components/list.min.css" />
    <link rel="stylesheet" type="text/css" href="http://cdn.bootcss.com/semantic-ui/2.1.8/components/message.min.css" />
    <link rel="stylesheet" type="text/css" href="http://cdn.bootcss.com/semantic-ui/2.1.8/components/icon.min.css" />

    <style type="text/css">
        body {
            background-color: #DADADA;
        }

            body > .grid {
                height: 100%;
            }

        .image {
            margin-top: -100px;
        }

        .column {
            max-width: 450px;
        }
    </style>

</head>
<body>

    <div id="app" class="ui middle aligned center aligned grid">
        <div class="column">
            <h2 class="ui teal image header">
                <img src="http://www.semantic-ui.cn/examples/assets/images/logo.png" class="image">
                <div class="content">
                    Log-in to your account
                </div>
            </h2>
            <validator name="form">
                <form class="ui large form" :class="{ 'error': $form.invalid && trySubmit }" novalidate>
                    <div class="ui stacked segment">
                        <div class="field" :class="{ 'error': $form.email.invalid && trySubmit }">
                            <div class="ui left icon input">
                                <i class="user icon"></i>
                                <input type="email" v-model="item.email" placeholder="E-mail address" v-validate:email="{ required: true, email: true }">
                            </div>
                        </div>
                        <div class="field" :class="{ 'error': $form.password.invalid && trySubmit }">
                            <div class="ui left icon input">
                                <i class="lock icon"></i>
                                <input type="password" v-model="item.password" placeholder="Password" v-validate:password="{ required: true, minlength: 6 }">
                            </div>
                        </div>
                        <div @click="submit($form)" class="ui fluid large teal submit button">Login</div>
                    </div>
                    <div class="ui error message" v-if="trySubmit">
                        <ul class="list">
                            <li v-if="$form.email.required">Please enter your e-mail</li>
                            <li v-if="$form.email.email">Please enter a valid e-mail</li>
                            <li v-if="$form.password.required">Please enter your password</li>
                            <li v-if="$form.password.minlength">Your password must be at least 6 characters</li>
                        </ul>
                    </div>
                </form>
            </validator>
            <div class="ui message">
                New to us? <a href="#">Sign Up</a>
            </div>
        </div>
    </div>

    <script src="http://cdn.bootcss.com/vue/1.0.17/vue.min.js"></script>
    <script src="http://cdn.bootcss.com/vue-validator/2.0.0-alpha.22/vue-validator.min.js"></script>

    <script type="text/javascript">

        Vue.validator('email', function (val) {
            return /^[a-z0-9!#$%&'*+\/=?^_`{|}~.-]+@[a-z0-9]([a-z0-9-]*[a-z0-9])?(\.[a-z0-9]([a-z0-9-]*[a-z0-9])?)*$/i.test(val)
        })

        var vm = new Vue({
            el: '#app',
            data: function () {
                return {
                    item: {
                        email: null,
                        password: null,
                    },
                    trySubmit: false,
                }
            },
            methods: {
                onReset: function () {
                    this.$resetValidation()
                },
                submit: function (form) {
                    this.trySubmit = true
                    if (form.valid) {
                        this.$log('item')
                    }
                }
            }
        })
    </script>
</body>
</html>