在前端开发中，表单验证和数据校验是非常重要的一环。Vue.js 是一款流行的前端框架，它提供了一些内置的表单验证方法，但是对于复杂的表单验证和数据校验，我们需要借助一些第三方库来实现。其中，ElementUI 是一个非常优秀的 UI 组件库，它提供了丰富的表单验证和数据校验功能，本文将介绍如何在 Vue.js 中使用 ElementUI 实现表单验证和数据校验。
ElementUI 简介
ElementUI 是饿了么前端团队推出的一款基于 Vue.js 的 UI 组件库，它包含了丰富的组件和功能，可以帮助我们快速构建美观、易用的前端界面。其中，表单验证和数据校验是 ElementUI 的核心功能之一，它提供了多种验证规则和错误提示方式，可以满足我们各种验证需求。
表单验证
在 Vue.js 中，表单验证可以通过在表单元素上绑定验证规则来实现。ElementUI 提供了多种验证规则，包括必填、数字、邮箱、手机号、身份证号等等，我们可以根据需要选择相应的规则来进行验证。
必填验证
必填验证是最基本的验证规则，它可以确保用户必须填写某个表单项才能提交。在 ElementUI 中，必填验证可以通过在表单元素上添加 required 属性来实现，示例代码如下：
<el-form-item label="用户名" prop="username" required> <el-input v-model="username"></el-input> </el-form-item>
在上面的代码中，<el-form-item> 组件表示一个表单项，label 属性表示表单项的标签，prop 属性表示表单项对应的数据模型属性名，required 属性表示该表单项必填。<el-input> 组件表示一个文本框，v-model 指令表示将文本框的值绑定到 username 数据模型属性上。
数字验证
数字验证可以确保用户输入的是数字类型的值。在 ElementUI 中，数字验证可以通过在表单元素上添加 type="number" 属性来实现，示例代码如下：
<el-form-item label="年龄" prop="age"> <el-input v-model.number="age" type="number"></el-input> </el-form-item>
在上面的代码中，type="number" 属性表示该表单项必须输入数字类型的值，v-model.number 指令表示将文本框的值转换成数字类型并绑定到 age 数据模型属性上。
邮箱验证
邮箱验证可以确保用户输入的是合法的邮箱地址。在 ElementUI 中，邮箱验证可以通过在表单元素上添加 type="email" 属性来实现，示例代码如下：
<el-form-item label="邮箱" prop="email"> <el-input v-model="email" type="email"></el-input> </el-form-item>
在上面的代码中，type="email" 属性表示该表单项必须输入合法的邮箱地址。
手机号验证
手机号验证可以确保用户输入的是合法的手机号码。在 ElementUI 中，手机号验证可以通过在表单元素上添加自定义验证规则来实现，示例代码如下：
<el-form-item label="手机号" prop="phone"> <el-input v-model="phone"></el-input> </el-form-item>
// javascriptcn.com 代码示例
export default {
data() {
return {
phone: ''
}
},
methods: {
validatePhone(rule, value, callback) {
const reg = /^1[3-9]\d{9}$/
if (value && !reg.test(value)) {
callback(new Error('请输入正确的手机号码'))
} else {
callback()
}
}
}
}在上面的代码中，<el-input> 组件表示一个文本框，v-model 指令表示将文本框的值绑定到 phone 数据模型属性上。validatePhone 方法是自定义的验证方法，它接收三个参数：rule 表示当前验证规则，value 表示当前表单项的值，callback 表示验证结果回调函数。在 validatePhone 方法中，我们使用正则表达式判断手机号码是否合法，如果不合法则调用 callback 函数返回错误信息。
数据校验
除了表单验证，数据校验也是非常重要的一环。在 Vue.js 中，数据校验可以通过在数据模型上定义校验规则来实现。ElementUI 提供了多种校验规则和校验方式，我们可以根据需要选择相应的规则和方式来进行校验。
表单校验
表单校验可以确保所有表单项都符合要求后才能提交表单。在 ElementUI 中，表单校验可以通过在 <el-form> 组件上添加 ref 属性和 rules 属性来实现，示例代码如下：
// javascriptcn.com 代码示例
<template>
<el-form ref="form" :model="form" :rules="rules">
<el-form-item label="用户名" prop="username" required>
<el-input v-model="form.username"></el-input>
</el-form-item>
<el-form-item label="年龄" prop="age">
<el-input v-model.number="form.age" type="number"></el-input>
</el-form-item>
<el-form-item label="邮箱" prop="email">
<el-input v-model="form.email" type="email"></el-input>
</el-form-item>
<el-form-item label="手机号" prop="phone">
<el-input v-model="form.phone"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="submitForm">提交</el-button>
</el-form-item>
</el-form>
</template>
<script>
export default {
data() {
return {
form: {
username: '',
age: '',
email: '',
phone: ''
},
rules: {
username: [
{ required: true, message: '请输入用户名', trigger: 'blur' }
],
age: [
{ type: 'number', message: '年龄必须为数字', trigger: 'blur' }
],
email: [
{ type: 'email', message: '请输入正确的邮箱地址', trigger: 'blur' }
],
phone: [
{ validator: this.validatePhone, trigger: 'blur' }
]
}
}
},
methods: {
validatePhone(rule, value, callback) {
const reg = /^1[3-9]\d{9}$/
if (value && !reg.test(value)) {
callback(new Error('请输入正确的手机号码'))
} else {
callback()
}
},
submitForm() {
this.$refs.form.validate(valid => {
if (valid) {
alert('提交成功')
} else {
alert('提交失败')
}
})
}
}
}
</script>在上面的代码中，<el-form> 组件表示一个表单，ref 属性表示该表单的引用名称，rules 属性表示该表单的校验规则。在 rules 属性中，我们定义了各个表单项的校验规则，包括必填、数字、邮箱、手机号等等。其中，phone 表单项的校验规则是自定义的验证方法，它使用了 validatePhone 方法进行校验。在 submitForm 方法中，我们使用 $refs.form.validate 方法对表单进行校验，如果校验通过则提交表单，否则提示校验失败。
数据校验
数据校验可以确保数据模型中的数据符合要求。在 ElementUI 中，数据校验可以通过在数据模型属性上定义校验规则来实现，示例代码如下：
// javascriptcn.com 代码示例
<template>
<el-form :model="form">
<el-form-item label="用户名" prop="username">
<el-input v-model="form.username"></el-input>
</el-form-item>
<el-form-item label="年龄" prop="age">
<el-input v-model.number="form.age" type="number"></el-input>
</el-form-item>
<el-form-item label="邮箱" prop="email">
<el-input v-model="form.email" type="email"></el-input>
</el-form-item>
<el-form-item label="手机号" prop="phone">
<el-input v-model="form.phone"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="validateForm">校验</el-button>
</el-form-item>
</el-form>
</template>
<script>
export default {
data() {
return {
form: {
username: '',
age: '',
email: '',
phone: ''
},
rules: {
username: [
{ required: true, message: '请输入用户名', trigger: 'blur' }
],
age: [
{ type: 'number', message: '年龄必须为数字', trigger: 'blur' }
],
email: [
{ type: 'email', message: '请输入正确的邮箱地址', trigger: 'blur' }
],
phone: [
{ validator: this.validatePhone, trigger: 'blur' }
]
}
}
},
methods: {
validatePhone(rule, value, callback) {
const reg = /^1[3-9]\d{9}$/
if (value && !reg.test(value)) {
callback(new Error('请输入正确的手机号码'))
} else {
callback()
}
},
validateForm() {
this.$refs.form.validate(valid => {
if (valid) {
alert('校验通过')
} else {
alert('校验失败')
}
})
}
},
watch: {
form: {
deep: true,
handler(newVal, oldVal) {
this.$refs.form.validate()
}
}
}
}
</script>在上面的代码中，我们在 data 中定义了 rules 对象，其中包含了各个数据模型属性的校验规则。在 methods 中，我们定义了 validatePhone 方法作为 phone 属性的校验方法，以及 validateForm 方法用于校验整个数据模型。在 watch 中，我们使用 $refs.form.validate 方法对整个数据模型进行校验，当数据模型发生变化时会自动触发校验。
总结
本文介绍了如何在 Vue.js 中使用 ElementUI 实现表单验证和数据校验。通过本文的学习，我们可以了解到 ElementUI 提供了丰富的验证规则和校验方式，可以帮助我们快速实现各种验证和校验需求。同时，本文提供了详细的示例代码和指导意义，可以帮助读者快速掌握相关知识和技能。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/6586a4fcd2f5e1655d10c3e0