在Web开发过程中，表单验证是非常重要的一个环节，它可以保证用户输入的数据符合我们的要求，从而减少可能出现的错误。本文将介绍如何在Vue中使用Element-UI进行数据校验和表单验证。
1. 确认需要验证的表单项
在开始之前，我们需要确定哪些表单项需要被验证。通常来说，只有一些必填项需要进行验证，比如用户名、密码、手机号等。我们需要为这些表单项设置必填标识，并且在提交表单的时候进行验证。
1.1 设置必填标识
在HTML中，我们可以使用`required`属性来设置一个表单项为必填项。例如，下面的代码片段中，`input`元素被设置为必填项：
<input type="text" name="username" required>在Vue中，我们可以使用`rules`属性来设置某个表单项的验证规则。下面的示例代码中定义了一个`rules`对象，并为`username`表单项设置了必填规则：
export default {
data() {
return {
form: {
username: '',
password: ''
},
rules: {
username: [
{ required: true, message: '请输入用户名', trigger: 'blur' },
],
password: [
{ required: true, message: '请输入密码', trigger: 'blur' }
]
}
}
}
}
可以看到，我们定义了一个`rules`对象，该对象中包含了若干个验证规则。每个验证规则都是一个数组，数组中包含了一个或多个校验规则对象。在上面的示例中，`username`和`password`表单项都被设置为必填项，如果用户未输入相关数据，将在表单下方展示提示信息，让用户知道哪些项未填写。
1.2 提交表单时进行验证
在完成表单验证的前提下，我们需要在用户提交表单之前对表单进行二次验证。如果表单中存在错误的数据，我们需要阻止表单的提交，并在表单下方给出提示信息。下面的代码片段展示了如何通过`validate`方法来提交表单的时候进行验证：
export default {
methods: {
submitForm(formName) {
this.$refs[formName].validate((valid) => {
if (valid) {
// 执行表单提交逻辑
} else {
console.log('error submit!!');
return false;
}
});
}
}
}
在代码中，我们通过`refs`属性获取到表单的引用。在调用`validate`方法时，我们需要传入一个回调函数。当表单验证通过时，validate方法会将`valid`参数设为`true`，否则设为`false`。如果`valid`为`false`，我们需要把表单提交的方法的返回值设置为`false`，直接关闭表单提交，同时在控制台中打印出错误信息。
2. 使用Element-UI进行校验
现在，我们已经确定了需要验证的表单项，并且可以在提交表单时进行验证。接下来，我们将使用Element-UI中提供的输入框组件来进行表单验证。该组件可以通过简单的设置，自动生成表单验证规则，大大简化了表单验证的过程。
2.1 使用Element-UI输入框组件
Element-UI中的`el-form`和`el-form-item`组件可以帮助我们快速地搭建出表单界面，并且提供了表单验证所需的一些简单的规则设置。在下面的代码中，我们使用了`el-input`组件代替了普通的`input`元素：
<template>
<el-form :model="form" ref="form" label-width="80px" class="demo-ruleForm">
<el-form-item label="用户名" prop="username">
<el-input v-model="form.username" autocomplete="off"></el-input>
</el-form-item>
<el-form-item label="密码" prop="password">
<el-input type="password" v-model="form.password" autocomplete="off"></el-input>
</el-form-item>
</el-form>
</template>
通过Element-UI提供的`el-input`组件，我们可以快速地完成一个输入框的制作。为了联通输入框和表单验证，我们可以通过`prop`属性将输入框与表单验证关联起来。
2.2 设置验证规则
在使用Element-UI进行表单验证时，我们只需要在`el-form-item`组件中使用`rules`属性即可自动生成验证规则。下面的示例代码中，我们为`username`和`password`表单项设置了验证规则：
<template>
<el-form :model="form" ref="form" label-width="80px" class="demo-ruleForm">
<el-form-item label="用户名" prop="username" :rules="rules.username">
<el-input v-model="form.username" autocomplete="off"></el-input>
</el-form-item>
<el-form-item label="密码" prop="password" :rules="rules.password">
<el-input type="password" v-model="form.password" autocomplete="off"></el-input>
</el-form-item>
</el-form>
</template>
<script>
export default {
data() {
return {
form: {
username: '',
password: ''
},
rules: {
username: [
{ required: true, message: '请输入用户名', trigger: 'blur' },
{ min: 5, max: 10, message: '长度在 5 到 10 个字符', trigger: 'blur' }
],
password: [
{ required: true, message: '请输入密码', trigger: 'blur' },
{ min: 6, max: 12, message: '长度在 6 到 12 个字符', trigger: 'blur' }
]
}
}
}
}
</script>
在代码中，我们可以看到`rules`属性中的规则和前文中定义的规则非常相似。不同的是，我们可以使用更简单的方式设置规则。在示例代码中，我们使用了`min`和`max`属性来限制字符长度，这是Element-UI中提供的验证规则之一。
2.3 显示错误信息
在表单验证不通过时，我们需要向用户显示错误信息。在Element-UI中，可以使用`el-form-item`组件的`prop`属性来将验证结果与表单项产生联系，通过`validateState`属性来判断验证结果。下面的代码片段展示了如何在验证不通过的时候展示错误信息：
<template>
<el-form :model="form" ref="form" label-width="80px" class="demo-ruleForm">
<el-form-item label="用户名" prop="username" :validate-state="validateState('username')" :error-message="errorMessages.username">
<el-input v-model="form.username" autocomplete="off"></el-input>
</el-form-item>
<el-form-item label="密码" prop="password" :validate-state="validateState('password')" :error-message="errorMessages.password">
<el-input type="password" v-model="form.password" autocomplete="off"></el-input>
</el-form-item>
</el-form>
</template>
<script>
export default {
data() {
return {
form: {
username: '',
password: ''
},
errorMessages: {},
rules: {
username: [
{ required: true, message: '请输入用户名', trigger: 'blur' },
{ min: 5, max: 10, message: '长度在 5 到 10 个字符', trigger: 'blur' }
],
password: [
{ required: true, message: '请输入密码', trigger: 'blur' },
{ min: 6, max: 12, message: '长度在 6 到 12 个字符', trigger: 'blur' }
]
}
}
},
methods: {
// 根据验证结果设置状态
validateState(item) {
const formItem = this.$refs.form.fields[item]
return formItem ? formItem.validateState : ''
},
// 显示错误提示信息
showErrors() {
// 获取错误信息
this.errorMessages = {}
Object.keys(this.rules).forEach((key) => {
const errors = this.$refs.form.fields[key].validateMessage
if (errors) {
Object.assign(this.errorMessages, { [key]: errors.join('; ') })
}
})
}
}
}
</script>
在代码中，我们设置了`validate-state`属性和`error-message`属性。`validate-state`属性根据验证结果来决定验证状态，可以取值为success、error、warning。`error-message`属性用于展示错误信息。我们编写的`validateState`方法可以根据表单验证结果判断出验证状态。同样，我们编写的`showErrors`方法也使用Element-UI提供的方法来显示错误信息。
3.总结
在本文中，我们介绍了如何使用Vue和Element-UI进行表单验证。首先我们确定了需要验证的表单项，然后设置了表单的验证规则，并且编写了验证方法。我们使用了Element-UI提供的输入框组件和表单组件，它们可以快速地搭建出界面，并且提供了表单验证所需的一些简单的规则设置。最后，我们使用Element-UI提供的方法将验证结果和表单项产生关联，通过控制状态和显示错误信息的方式，使得用户可以快速地知道自己所填写的信息错误的地方，并及时做出修改。