使用Vue + el-form + rules实现图书信息录入功能实战

**使用 Vue + El-Form + Rules 实现图书信息录入功能实战**

在前端开发中，表单验证是非常重要的一部分。Vue.js 提供了一个强大的库叫做 El-Form，可以帮助我们实现复杂的表单验证逻辑。在本文中，我们将使用 Vue + El-Form + Rules 实现图书信息录入功能实战。

**项目结构**

首先，我们需要创建一个新的 Vue项目。假设我们的项目名称是 `book-manager`，我们可以使用以下命令创建项目：

bashvue create book-manager

然后，我们需要安装必要的依赖包，包括 `el-form` 和 `rules`。

bashnpm install el-form rules

**图书信息录入组件**

接下来，我们需要创建一个新的 Vue 组件来实现图书信息录入功能。我们可以在 `src/components` 目录下创建一个新文件 `BookForm.vue`。

html<template>
 <div>
 <el-form ref="form" :model="book" label-position="left">
 <el-form-item label="书名" prop="name">
 <el-input v-model="book.name"></el-input>
 </el-form-item>
 <el-form-item label="作者" prop="author">
 <el-input v-model="book.author"></el-input>
 </el-form-item>
 <el-form-item label="出版日期" prop="publishDate">
 <el-date-picker type="date" v-model="book.publishDate" format="yyyy-MM-dd" value-format="yyyy-MM-dd"></el-date-picker>
 </el-form-item>
 <el-form-item label="价格" prop="price">
 <el-input v-model.number="book.price"></el-input>
 </el-form-item>
 </el-form>
 </div>
</template>

<script>
export default {
 data() {
 return {
 book: {
 name: '',
 author: '',
 publishDate: '',
 price: ''
 }
 }
 },
 methods: {
 submitForm(formName) {
 this.$refs[formName].validate((valid) => {
 if (valid) {
 console.log('submit!')
 } else {
 console.log('error submit!!')
 return false }
 })
 }
 }
}
</script>

在上面的代码中，我们定义了一个 `book` 对象来存储图书信息。我们使用 `el-form-item` 来创建表单项，分别对应着书名、作者、出版日期和价格。

**验证规则**

接下来，我们需要定义验证规则。我们可以在 `src/rules.js` 文件中定义以下规则：

javascriptexport default {
 name: [
 { required: true, message: '请输入书名', trigger: 'blur' }
 ],
 author: [
 { required: true, message: '请输入作者', trigger: 'blur' }
 ],
 publishDate: [
 { type: 'date', required: true, message: '请选择出版日期', trigger: 'change' }
 ],
 price: [
 { required: true, message: '请输入价格', trigger: 'blur' },
 { pattern: /^d+(.d+)?$/, message: '请输入正确的价格格式', trigger: 'blur' }
 ]
}

在上面的代码中，我们定义了四个验证规则，分别对应着书名、作者、出版日期和价格。

**使用 El-Form 实现表单验证**

最后，我们需要在 `BookForm.vue` 组件中使用 El-Form 来实现表单验证。

html<template>
 <div>
 <el-form ref="form" :model="book" label-position="left">
 <!-- ... -->
 </el-form>
 </div>
</template>

<script>
import rules from '../rules'

export default {
 // ...
 methods: {
 submitForm(formName) {
 this.$refs[formName].validate((valid) => {
 if (valid) {
 console.log('submit!')
 } else {
 console.log('error submit!!')
 return false }
 })
 }
 },
 mounted() {
 this.$nextTick(() => {
 this.$refs.form.clearValidate()
 })
 }
}
</script>

在上面的代码中，我们使用 `el-form` 来创建表单，分别对应着书名、作者、出版日期和价格。我们还定义了一个 `submitForm` 方法来实现表单验证。

**总结**

在本文中，我们使用 Vue + El-Form + Rules 实现图书信息录入功能实战。我们首先创建了一个新的 Vue项目，然后安装必要的依赖包，包括 `el-form` 和 `rules`。接下来，我们定义了一个 `book` 对象来存储图书信息，并使用 `el-form-item` 来创建表单项。然后，我们定义了验证规则，并在 `BookForm.vue` 组件中使用 El-Form 来实现表单验证。

**参考**

* [Vue.js]( />* [El-Form]( />* [Rules](