本文介绍了“Vue中的表单是什么样的”的相关知识。 在实际案例操作过程中，很多人都会遇到这样的困境。 接下来就让小编带领大家学习一下如何处理这些情况。 ！ 我希望你能仔细阅读并学到一些东西！

形式

el的官方表格网站内容很多，光看就觉得累了。 但实际上使用起来还是非常方便的。 el为我们封装了各种组件，风格也比较流行。

一个简单的案例

代码如下（使用时请务必引入相关组件）

<script>  export default {    data() {      return {        form: {          name: '',          pwd:''        }      }    },    methods: {      onSubmit() {        console.log('submit!');      }    }  }</script>

看起来还是有很多线条，对吧？ 去掉一些必要的标签和一些声明，剩下的三个组件是：el-form、el-input、el-form-item。 el-form 是必要的并且影响布局。 el-form-item 是用作关联表单元素的文本，el-input 是我们的输入框。 布局已预设，您可以使用这三个来创建最基本的表单。 方便吗？

表单的主要组成部分

常用的表单组件有输入框、下拉框、单选按钮、多选框、文本字段，对应的组件有：Form、、Input、、、、Radio。

还有一些实用的组件，如()、日期选择器()、时间选择器()、单选按钮组()、多选框组()等。

表单组件的使用

无论哪个组件都是一样的，先将模块引入到main.js中，然后在页面中使用：

// main.jsimport {Form,FormItem,Input,CheckboxGroup,Radio, RadioGroup,Switch} from 'element-ui';Vue.use(Form)Vue.use(RadioGroup)Vue.use(Radio)Vue.use(FormItem)Vue.use(Input)// ...需要哪些引入哪些

假设用在form.vue中，读太多代码很烦人。 我只写了一个下拉框、开关和文本字段。 （这就叫献策，xixi）

<script>  export default {    data() {      return {        form: {          region: '',// 区域          delivery: false,// 是否及时配送          desc: '' //活动形式描述        }      }    },    methods: {      onSubmit() {        console.log('submit!');      }    }  }</script>

效果如下

内联表格

不难发现我们的组件都是排成一排的。 将组件制作成内联元素很容易。 只需在el-form组件中添加属性：=“true”（只有在属性前添加冒号，值true才会被视为布尔值，否则将被视为字符串）

结盟

**这里的对齐是指标签的文字对齐。 **同样加载在el-form组件的label-中

label-的可用值：left、right、top（top表示标签在顶部，组件显示在底部，而不是在同一行）。如下

表单验证

表单验证有3个要点：

在el-form组件中添加:rules="规则组对象"属性，值为验证规则的对象。

向表单组件添加 prop 属性，以指定组件的验证规则。 el-form-item 中添加 prop 属性

定义验证规则的对象

验证一般用于输入框

下面的代码：

<script>  export default {    data() {      return {        form: {          name: '',          url:'',        },        rules:{            name:[                { required: true, message: '请输入活动名称', trigger: 'blur' },                { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }            ],            u:[                { type: 'url', required: true, message: '必须为规范的url地址', trigger: 'change' }            ]        },      }    },    }  }</script>

值得一提的是，如果你想验证数字类型，那么。 您需要将 v-model 替换为 v-model.!!! 记住！ ！ ！

自定义验证规则

自定义验证和预定义验证的区别就一点（考验你，三个关键点是什么）：

自定义规则对象的书写形式

<script>export default {    data() {        let checkNum = (rules,val,callback)=>{            rules // 这里会得到定义的校验对象的属性            if(!Number.isInteger(val)){                // 如果要提示错误信息，那么通过第三个参数回调出去，参数值为Error实例                callback(new Error('请输入数值'))            }        }        return {           // 校验规则            rules:{            u:[                    { type: 'url', required: true, message: '必须为规范的url地址', trigger: 'change' },                    // 添加一条自定义的验证，值为函数名                    {validator:checkNum,targger:'change'}            ],        },        }    }}</script>

表单组件尺寸控制

通过给el-form添加size属性来指定form元素的大小。很简单，如下

尺寸的可用值：/small/mini

总结一下表单模块的属性属性值描述

模型

表单数据对象

规则

验证规则

默认 false

是否设置为内联元素

标签-

右/左/上默认右

表单字段标签对齐

标签宽度

例如150像素

标签标签（label）的宽度

尺寸

/小/迷你

表单组件尺寸

-图标

默认 false

是否显示验证结果的图标

默认 false

范围是整个表格，无需多解释

表单模块的 Form（官方文档，了解一下） 方法名称 描述 参数

验证整个表单的方法。 参数是一个回调函数。 验证完成后会调用该回调函数，传入两个参数：验证是否成功以及验证失败的字段。如果没有传入回调函数，则返回一个

(:(,))

如何验证某些表单字段

（道具：数组 | , : (: )）

重置整个表单，将所有字段值重置为其初始值并删除验证结果

—

从表单项中删除验证结果。传入要删除的表单项的 prop 属性或 props 数组。 如果未通过，整个表格的验证结果将被删除。

（道具：数组 | ）

如何使用这些方法？

<script>    // 重置表单    const from = this.$refs.f.resetFields()</script>

form-item模块属性参数参数值说明

支柱

模型中传递的字段。使用方法时需要此属性

标签

标签文本

标签宽度

例如150px。标签占用的帧

是必须的吗？

规则

表单验证规则

尺寸

/小/迷你

元件尺寸

展示-

默认 true

是否显示验证错误信息

-

默认 false

内嵌显示验证信息

“Vue 中的表单是什么？”的介绍到此结束。 感谢您的阅读。 如果您想了解更多行业资讯，可以关注编程网网站。 小编将会为大家输出更多优质实用文章！