校验规则 vue前端配置 代码
时间: 2024-05-12 13:19:38 浏览: 5
在Vue前端中,可以通过以下代码配置校验规则:
```javascript
<template>
<div>
<form @submit.prevent="submitForm">
<div>
<label for="name">Name</label>
<input type="text" id="name" v-model="name" :class="{ 'is-invalid': $v.name.$error }">
<div v-if="!$v.name.required">Name is required</div>
<div v-if="!$v.name.minLength">Name should have at least {{$v.name.$params.minLength.min}} characters</div>
<div v-if="!$v.name.maxLength">Name should have at most {{$v.name.$params.maxLength.max}} characters</div>
</div>
<div>
<label for="email">Email</label>
<input type="email" id="email" v-model="email" :class="{ 'is-invalid': $v.email.$error }">
<div v-if="!$v.email.required">Email is required</div>
<div v-if="!$v.email.email">Invalid email</div>
</div>
<button type="submit">Submit</button>
</form>
</div>
</template>
<script>
import { required, minLength, maxLength, email } from 'vuelidate/lib/validators';
export default {
data() {
return {
name: '',
email: '',
};
},
validations: {
name: {
required,
minLength: minLength(3),
maxLength: maxLength(20),
},
email: {
required,
email,
},
},
methods: {
submitForm() {
if (this.$v.$invalid) {
return;
}
// Submit form here
},
},
};
</script>
```
在上面的代码中,我们使用了vuelidate库来定义校验规则。该库提供了一些常用的校验器,如required、minLength、maxLength、email等。我们可以通过validations属性来定义校验规则,然后在模板中使用$v来访问校验结果,并根据结果来显示错误信息。最后,在提交表单时,我们可以使用$v.$invalid来判断表单是否合法。