vuelidate 对于vueJs2.0的验证解决方案【细节总结】

案例参考：https://segmentfault.com/a/1190000008580275

案例参考：https://blog.csdn.net/latency_cheng/article/details/78580820

Vue表单校验官方文档：https://cn.vuejs.org/v2/cookbook/form-validation.html

vuelidate官网【前后分离模式】https://vuelidate.netlify.com/#getting-started

 

注意事项： 

A、这里的:class传值就是为了改变class是否会增加"error"选择器来改变错误提示是否显示-

B、vuelidate插件提供的校验事件方法：$touch()

@blur="$v.username$touch()"表示blur事件触发（失去焦点）时验证。

@input="$v.username.$touch()"表示input事件触发（输入内容发生变化）时验证。

本人总结的案例【结果官方文档一看就懂】

<template>
    <div class="login" :style='{height:$screen_height}'>
        <div class="form">
            <div class="title">用户注册</div>
            <div class="form-group">
                <!--这里的:class传值就是为了改变class是否会增加"error"选择器来改变错误提示是否显示-->
                <div class="message" :class="{error:$v.username.$error}">
                    <p v-if="!$v.username.required">用户名不能为空</p>
                    <p v-if="!$v.username.alphaNum">用户名必须是字母或数字</p>
                    <p v-if="!$v.username.minLength">用户名不能低于{{$v.username.$params.minLength.min}}位</p>
                    <p v-if="!$v.username.maxLength">用户名不能高于{{$v.username.$params.maxLength.max}}位</p>
                </div>
                <!--@input事件或@blur事件由插件vuelidate官方提供了$touch()方法执行校验-->
                <label><input type="text" placeholder="请输入用户名" v-model.trim="username"
                              @input="$v.username.$touch()"></label>
            </div>
            <div class="form-group">
                <div class="message" :class="{error:$v.email.$error}">
                    <p v-if="!$v.email.required">邮箱不能为空</p>
                    <p v-if="!$v.email.email">邮箱格式不正确</p>
                </div>
                <label><input type="email" placeholder="请输入邮箱" v-model.trim="email" @input="$v.email.$touch()"></label>
            </div>
            <div class="form-group">
                <div class="message" :class="{error:$v.password.$error}">
                    <p v-if="!$v.password.required">密码不能为空</p>
                    <p v-if="!$v.password.alphaNum">密码必须是字母或数字</p>
                    <p v-if="!$v.password.minLength">密码不能低于{{$v.password.$params.minLength.min}}位</p>
                    <p v-if="!$v.password.maxLength">密码不能高于{{$v.password.$params.maxLength.max}}位</p>
                </div>
                <label><input type="password" placeholder="请输入密码" v-model.trim="password"
                              @input="$v.password.$touch()"></label>
            </div>
            <div class="form-group">
                <div class="message" :class="{error:$v.password_again.$error}">
                    <p v-if="!$v.password_again.sameAsPassword">密码输入不一致</p>
                </div>
                <label><input type="password" placeholder="请重新输入密码" v-model="password_again"
                              @input="$v.password_again.$touch()"></label>
            </div>
            <div class="form-group">
                <div class="warning">注：如果没有助记词,请点击创建新钱包</div>
                <div class="message" :class="{ 'error': $v.mnemonic.$error }">
                    <p v-if="!$v.mnemonic.required">助记词不能为空</p>
                    <p v-if="!$v.mnemonic.minLength">助记词不能低于{{$v.mnemonic.$params.minLength.min}}位</p>
                </div>
                <label for="mnemonic">
                <textarea name="mnemonic" id="mnemonic" v-model.trim="mnemonic" rows="4"
                          placeholder="请输入钱包助记词" @input="$v.mnemonic.$touch()"></textarea>
                </label>
            </div>

            <div class="new-wallet">
                <div class="safe_info">重要提示：生成新的助记词务必保存好,如丢失平台一概不负责！！！</div>
                <a href="JavaScript:void(0)">创建新钱包</a>
            </div>
            <button @click="submit" :disabled="reg_bool">免费注册</button>
        </div>
    </div>

</template>

<script>
    import { required, minLength, maxLength, sameAs, alphaNum, email } from 'vuelidate/lib/validators';

    export default {
        name: 'login',
        data () {
            return {
                username: '',
                email: '',
                password: '',
                password_again: '',
                mnemonic: '',
                reg_bool: true,
            };
        },
        validations: {
            username: {
                required,
                alphaNum,
                minLength: minLength( 4 ),
                maxLength: maxLength( 15 ),
            },
            email: {
                required,
                email,
            },
            password: {
                required,
                alphaNum,
                minLength: minLength( 6 ),
                maxLength: maxLength( 15 ),
            },
            password_again: {
                sameAsPassword: sameAs( 'password' ),
            },
            mnemonic: {
                required,
                minLength: minLength( 24 ),
            },
        },
        methods: {
            checkForm () {
                window.setInterval( () => {
                    // 确保每一个输入框都没有错误
                    let error = this.$v.username.$error ||
                        this.$v.email.$error ||
                        this.$v.password.$error ||
                        this.$v.password_again.$error ||
                        this.$v.mnemonic.$error;

                    // 确保没有input标签还没@input事件就提交空值问题
                    let not_empty = this.username &&
                        this.username &&
                        this.email &&
                        this.password &&
                        this.password_again &&
                        this.mnemonic;

                    // 全部输入了,且没错误,才能激活注册按钮！
                    not_empty && !error ? this.reg_bool = false : this.reg_bool = true;
                }, 1000 );
            },
            submit () {
                console.log( this.$v.username.$error );
            },
        },
        mounted () {
            this.$nextTick( () => {
                this.checkForm();
            } );
        },
    };
</script>


<style lang="scss" scoped="scoped">
    .login {
        background: url("../assets/img/bg/login.jpg");
        display: flex;
        flex-direction: column;
        justify-content: center;
        text-align: center;

        .form {
            .title {
                height: 40px;
                font-size: 30px;
            }

            .message {
                display: none;
                text-align: left;

                p {
                    font-size: 12px;
                    color: #f40;
                }

                margin: 1px;
            }

            .error {
                display: block;
            }

            input, button, textarea {
                display: block;
                width: 98%;
                font-size: 18px;
                margin: 0 auto;
                margin-bottom: 20px;
                outline: none;
                border: 0;
                resize: none;

            }

            input, button {
                height: 50px;
            }

            button {
                background: #1d953f;
                font-size: 24px;
                margin-top: 20px;
            }

            div.warning {
                font-size: 18px;
                color: #ffe600;
                margin-bottom: 20px;
            }

            div.new-wallet {
                a {
                    font-size: 20px;
                    color: #00f;
                }

                .safe_info {
                    color: #f00;
                    margin-bottom: 10px;
                }

            }
        }

    }

</style>

扫描二维码关注公众号，回复： 6161701 查看本文章