嘿，你是否想要在表单验证方面展翅高飞呢？别担心，我来帮你一步步实现这个目标！
首先，我们来看看如何在Vue模板中使用表单。在模板中，我们可以使用v-model指令来绑定表单输入和Vue实例的数据。例如：
<template>
<form>
<label>
用户名：
<input type="text" v-model="username">
</label>
<label>
密码：
<input type="password" v-model="password">
</label>
<button type="submit">登录</button>
</form>
</template>
在这个例子中，我们创建了一个包含用户名和密码输入框的表单，并使用v-model指令将它们分别绑定到Vue实例的username和password属性上。当用户输入内容时，这些值会自动更新。
接下来，我们想要添加一些验证规则来确保用户输入了正确的信息。在Vue中，我们可以使用计算属性来验证表单输入。例如：
<template>
<form>
<label>
用户名：
<input type="text" v-model="username">
</label>
<label>
密码：
<input type="password" v-model="password">
</label>
<div v-if="!isValid">请检查您的输入</div>
<button type="submit" :disabled="!isValid">登录</button>
</form>
</template>
<script>
export default {
data() {
return {
username: '',
password: ''
}
},
computed: {
isValid() {
return this.username.length > 0 && this.password.length > 0
}
}
}
</script>
在这个例子中，我们创建了一个计算属性isValid来检查用户名和密码是否都已输入。如果输入不合法，计算属性将返回false，并显示一个错误消息和禁用的登录按钮。否则，它将返回true，错误消息将被隐藏，登录按钮将被启用。这样，我们就可以在表单提交之前进行验证了。
现在，让我们进一步探索如何在Vue中实现更复杂的表单验证。例如，我们可能想要确保用户名是唯一的，或者密码符合一定的强度要求。为了实现这些规则，我们可以使用Vue的v-on指令来监听表单提交事件，并在事件处理程序中执行验证逻辑。例如：
<template>
<form @submit.prevent="submit">
<label>
用户名：
<input type="text" v-model="username">
</label>
<label>
密码：
<input type="password" v-model="password">
</label>
<button type="submit">登录</button>
</form>
</template>
<script>
export default {
data() {
return {
username: '',
password: ''
}
},
methods: {
validateUsername() {
// 模拟异步验证用户名是否唯一
setTimeout(() => {
if (this.username === 'admin') {
alert('用户名已存在')
this.username = '' // 清空用户名输入框
}
}, 1000)
},
validatePassword() {
// 模拟异步验证密码强度是否符合要求
setTimeout(() => {
if (this.password.length < 8) {
alert('密码长度必须大于8位')
this.password = '' // 清空密码输入框
}
}, 1000)
}
},
watch: {
// 监听表单提交事件，先执行用户名验证，再执行密码验证，如果都通过才提交表单
'$route'() {
this.validateUsername() // 用户名验证通过才执行下面的逻辑，如果验证不通过，直接返回不提交表单
this.validatePassword() // 密码验证通过才执行下面的逻辑，如果验证不通过，直接返回不提交表单
// 如果表单验证都通过了，可以执行登录逻辑，例如：this.login()
}
}
}
</script>
在这个例子中，我们定义了两个方法validateUsername和validatePassword来分别验证用户名和密码是否符合要求。我们使用setTimeout模拟了异步验证的过程。如果验证失败，我们将相应的输入框清空并显示错误消息。如果验证成功，我们继续执行表单提交逻辑。在watch中，我们监听了路由变化事件，并在事件处理程序中执行了表单验证。如果表单验证都通过了，我们可以执行登录逻辑。否则，我们将阻止表单提交事件以防止错误的数据被提交。这样，我们就实现了一个具有更复杂验证逻辑的表单了！
写在 data 中验证
表单内容
<!-- 表单 -->
<el-form ref="rulesForm" :rules="formRules" :model="rulesForm" label-width="200px">
<el-form-item label="用户名称:" prop="userName">
<el-input v-model="rulesForm.userName" style="width:300px" maxlength="50"/>
</el-form-item>
</el-form>
代表这是一个表单
ref：表单被引用时的名称，标识
rules：表单验证规则
model：表单数据对象
abel-width：表单域标签的宽度，作为 Form 直接子元素的 form-item 会继承该值
：表单中的每一项子元素
label：标签文本
prop：表单域 model 字段，在使用 validate、resetFields 方法的情况下，该属性是必填的
输入框
v-model：绑定的表单数据对象属性
style：行内样式
maxlength：最大字符长度限制