如何使用Vuelidate来限制文本输入的最小长度？

Question

如何使用Vuelidate来限制文本输入的最小长度？这是个子组件的子组件，在代码中，minLength = 4。在代码中，minLength = 4。似乎必须创建方法来处理产生的Vuelidate对象，以处理任何形式的错误？如果有任何帮助，我们将非常感激。

console.log(this.$v.message_text.$params.minLength.min); 输出 4.

Vue组件，其中Vuelidate验证正在进行。

<template>
        <div>
        <input type="text" name="message_text" id="message_text"
            class="form-control"
            placeholder="New message"
            v-model="message"
            @keyup.enter.prevent="sendMessage">
        </div>
</template>

<script>

import { required, minLength } from "vuelidate/lib/validators";

export default {
    props: ['activeChannel', 'username'],

    data() {
        return {
            message: '',
            message_text: ''
        };
    },


    validations: {
        message_text: {
          required,
          minLength: minLength(4)
        },
    },



    methods: {
        sendMessage() {
            let endpoint = `/channels/${this.activeChannel}/messages`;

            let data = {
                username: this.username,
                message: this.message
            };

            axios.post(endpoint, data);

            this.message = '';

            console.log(this.$v.message_text.$params.minLength.min);

        }
    }
}
</script>

<style>
</style>

以下是main app.js中的行。

import Vuelidate from 'vuelidate'
Vue.use(Vuelidate)

Answer 1

使用下面的代码，并在你开始使用vuelidate文档时阅读一下。我认为message_text数据属性是多余的，或者说不清楚你打算用它来做什么。

<template>
        <div>
        <input type="text" name="message_text" id="message_text"
            class="form-control"
            placeholder="New message."
            v-model="$v.message.$model"
            @keyup.enter.prevent="sendMessage">
        </div>
</template>

<script>

import { validationMixin } from 'vuelidate'
    import {
        required,
        maxLength
    } from 'vuelidate/lib/validators'


export default {
    props: ['activeChannel', 'username'],

    data() {
        return {
            message: '',
            message_text: ''
        };
    },


    validations: {
        message: {
          required,
           maxLength: maxLength(10)
        },
    },



    methods: {
        sendMessage() {
            let endpoint = `/channels/${this.activeChannel}/messages`;

            let data = {
                username: this.username,
                message: this.message
            };

            axios.post(endpoint, data);

            this.message = '';
        }
    }
}
</script>

Answer 2

答案在这里找到。https://jsfiddle.net/b5v4faqf/ 必须创建一个方法来处理Vuelidate识别的表单错误..:

<template>
        <div>
        <input type="text"
            class="form-control"
            placeholder="New message."
            v-model="$v.message.$model"
            :class="status($v.message)"
            @keyup.enter.prevent="sendMessage">
            <pre>{{ $v }}</pre>
        </div>
</template>

<script>

import { required, minLength } from "vuelidate/lib/validators";

export default {
    props: ['activeChannel', 'username'],

    data() {
        return {
            message: '',
        };
    },


    validations: {
        message: {
          required,
          minLength: minLength(4)
        },
    },



    methods: {

        status(validation) {
            return {
            error: validation.$error,
            dirty: validation.$dirty
            }
        },

        sendMessage() {

            // if its still pending or an error is returned do not submit
            this.$v.message.$touch();
            if (this.$v.message.$error) return;

            let endpoint = `/channels/${this.activeChannel}/messages`;

            let data = {
                username: this.username,
                message: this.message
            };

            axios.post(endpoint, data);

            this.message = '';

        }
    }
}
</script>

<style scoped>

input {
  border: 1px solid silver;
  border-radius: 4px;
  background: white;
  padding: 5px 10px;
}

.dirty {
  border-color: #5A5;
  background: #EFE;
}

.dirty:focus {
  outline-color: #8E8;
}

.error {
  border-color: red;
  background: #FDD;
}

.error:focus {
  outline-color: #F99;
}


</style>