How can I set a rule for input to only allow two conditions:
- The input must be exactly 5 characters long.
- The input can also accept an empty string.
Here is what I've done so far:
new Vue({
el: '#app',
data: () => ({
code:"",
rules: {
codeRules: (v) =>(v ?? "").trim().length == 5 ||"code must be 5 chars!"
}
}),
methods: {
checkCode(){
if (this.$refs.form.validate()) {
alert('Everything goes well!')
}
}
}
})<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="087e7d6d7c616e714839263a263a">[email protected]</a>/dist/vuetify.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="e2949787968b849ba2d3ccd0ccd0">[email protected]</a>/dist/vuetify.min.js"></script>
<div id="app">
<v-app>
<v-form ref="form" lazy-validation>
<v-container bg fill-height grid-list-md text-xs-center>
<v-row>
<v-col cols="6">
<v-text-field
label="Code"
v-model="code"
:rules="[rules.codeRules]"
></v-text-field>
</v-col>
</v-row>
<v-row>
<v-col cols="6">
<v-btn color="blue darken-1" @click="checkCode">Ok
</v-btn>
</v-col>
</v-row>
</v-container>
</v-form>
</v-app>
</div>I have successfully implemented the first condition, BUT how can I also allow the input to accept an empty string?