饿了么UI的表单验证，有输入东西，但是一直无法通过验证。

以下是完整例子:需要注意以下几点:
:model一定要绑定一个对象本例子是editForm,同时要验证字段的v-model绑定数据一定要在editForm中.
同时prop绑定的名字要和v-model绑定的名字一样,这个是很重要,一般做法是 prop和rules规则还有v-model绑定的数据 所有的名称都一样
直观方便,且不容易出错.<el-form :model="editForm" ref="editForm" ：rules=“rules” label-position="left" label-width="100px"><el-row :gutter="24"><el-col :span="12"><el-form-item label="姓名"><el-input v-model="multipleSelectionStudent" placeholder="请选择"></el-input></el-form-item></el-col><el-col :span="12"><el-form-item label="地区" prop="selectSources"><el-cascader v-model="editForm.selectSources"placeholder="请选择":clearable="true":options="options.resourceGroup"change-on-select:props="cascaderProp"class="el-cascader-100p"></el-cascader></el-form-item></el-col></el-row>
<button @click="submit">提交</button>
</el-form>

export default {data() {editForm: {selectSources: [],},rules:{selectSources: [ required: true, message: '请选择', trigger: 'change']}}, methods: {submit() {this.$refs["editForm"].validate((valid) => {if(valid) console.log("提交")else console.log(提交失败)}

}}
}

饿了么UI的表单验证，有输入东西，但是一直无法通过验证。相关推荐

iview/view UI 表格+表单提交必填验证简单方案
在项目中,经常遇到表单嵌入表格的情况,因此必填验证的需求就比较麻烦了,记录下解决方案,先来上一张效果图: 先简单说下实现原理,这个是view UI form-item的源码: 重点就是框住的地方,g ...
关于iView UI的表单Form如何进行前端验证
使用iView UI组件进行表单设计的时候,需要进行到的前端验证. 一.引入iView组件二.表单结构设计完成三.确保表单元素Form相关指令正确设定 <Formstyle="bo ...
移动UI设计-表单设计
移动UI设计-表单设计登入表单注册表单核对表单计算表单搜索表单多步骤表单长表单
《产品经理心得》02：表单提示和输入验证方案
内容导航: 前言 1.作品案例 2.提示的类型 3.按照时间顺序划分 4.建议前言表单是Web设计中使用频次非常高的页面,那么,其用户体验也占据了整个产品体验的很大比例.因此,如何统一的设计表单提 ...
基于Ant Design和jQuery UI的表单设计器
基于Ant Design 和jQuery UI 的表单设计器 GitHub 地址概念 Comonent 组件 Layout 布局,一种特殊的Component Component Editor 组件 ...
php 表单录入,PHP 表单和用户输入
PHP 表单和用户输入介绍表单之前我们先来了解一下关于表单的基本知识点: 1.表单标签标签用于为用户输入创建 HTML 表单. 表单能够包含 input 元素,比如文本字段.复选框.单选框.提交按 ...
html5表单新增的输入类型,HTML5之表单新增类型介绍
1.html5的input标签的type类型新增介绍: 2.表单新增属性介绍: 3.代码示例: 1970 1980 1990 默认值: form="register" /> ...
下列关于html5表单的多样输入方式,IT兄弟连 HTML5教程 HTML5表单多样的输入类型1...
原标题:IT兄弟连 HTML5教程 HTML5表单多样的输入类型1 HTML5拥有多个新的表单输入类型,这些新特性提供了更好的输入控制和验证.并不是所有的主浏览器都支持新的input类型,不过我们可 ...
JEPaas代码_((表单）_输入字段值而改变值)
JEPaas代码_笔记((表单)_输入字段值而改变值) 我也是新手入门,不是很熟练JEPaas后台,正在学习中- var v=parseInt(value);console.warn('出库数量改变' ...

饿了么UI的表单验证，有输入东西，但是一直无法通过验证。

饿了么UI的表单验证，有输入东西，但是一直无法通过验证。相关推荐

最新文章

热门文章