Vue是一款流行的JavaScript框架,具有易用性和高度可定制性。当我们在开发Vue应用程序时,客户端输入必须得到验证以确保数据的完整性和安全性。以下是Vue提供的一些验证技术:
1. 表单验证
<template>
<form @submit.prevent="submitForm">
<input type="text" v-model="name">
<span v-if="!nameValid">请填写名字</span>
<input type="email" v-model="email">
<span v-if="!emailValid">请填写电子邮件</span>
<button :disabled="!formValid">提交</button>
</form>
</template>
<script>
export default {
data() {
return {
name: '',
email: ''
}
},
computed: {
nameValid() {
return this.name !== '';
},
emailValid() {
return this.email !== '' && this.email.includes('@');
},
formValid() {
return this.nameValid && this.emailValid;
}
},
methods: {
submitForm() {
if (this.formValid) {
// 提交表单数据
}
}
}
}
</script>
2. 自定义指令验证
<template>
<input type="text" v-model="text" v-validate>
<span v-if="error">{{ error }}</span>
</template>
<script>
import { ValidationObserver, ValidationProvider } from 'vee-validate';
export default {
components: {
ValidationObserver,
ValidationProvider
},
data() {
return {
text: ''
}
}
}
</script>
3. 钩子函数验证
const validName = (name) => {
return name !== '';
}
const validEmail = (email) => {
return email !== '' && email.includes('@');
}
const validForm = (data) => {
const { name, email } = data;
return validName(name) && validEmail(email);
}
export default {
data() {
return {
name: '',
email: ''
}
},
methods: {
submitForm() {
const data = { name: this.name, email: this.email };
if (validForm(data)) {
// 提交表单数据
}
}
}
}