饿了么ui关于表单新增的校验，关于自定义的element-ui表单组件的校验
大家好，今天来为大家解答饿了么ui关于表单新增的校验这个问题的一些问题点，包括关于自定义的element-ui表单组件的校验也一样很多人还不知道，因此呢，今天就来为大家分析分析，现在让我们一起来看看吧！如果解决了您的问题，还望您关注下本站哦，谢谢~
elementui自定义form组件校验,解决不触发校验事件
el-form绑定model并添加rules，el-form-item绑定prop属后，默认的el-input或者el-select值变更时候可以通过表单校验
<el-form ref="form5":model="form":rules="rules">
<el-form-item label="name" prop="name">
<el-input v-model="form.name"/>
</el-form-item>
rules:{
name: [{ required: true, message:"必须填写", trigger:"blur"}]
}
自定义的组件比如图片上传之类不触发，
可以通过值变更时候触发上级El-Form-Item校验,吧value传进去即可,如下：把文件上传返回的url值传递到校验对象上去
handleUploadSuccess(res, file){
this.dispatch("ElFormItem","el.form.change",[res.url])
}
dispatch是\element-ui\src\mixins\emitter.js的函数，这个可以递归找到最近的父节点方法，并触发事件；
如果需要this用法，可以如下方式引入
import emitter from'element-ui/src/mixins/emitter';
mixins:[emitter],
props:{//和props同级
.....
ui设计规范有人知道吗
一、一致性原则
坚持以用户体验为中心设计原则，界面直观、简洁，操作方便快捷，用户接触软件后对界面上对应的功能一目了然、不需要太多培训就可以方便使用本应用系统。
在整个平台中创造一致性，颜色、按钮、字体、品牌一致性，给用户安全感与熟悉感，同时解决设计师因为个人特征导致界面不统一问题。
1、字体
保持字体及颜色一致，避免一套主题出现多个字体;不可修改的字段，统一用灰色文字显示。
界面中出现最多的内容字体，字体除了传统意义上大小之外，还有字间距、行间距、字重对比、字体颜色等等
a)字重，顾名思义就是字体粗细，通过字重可以加强层级
b)字体大小以及运用场景，字体在界面中什么样场景运用多大字号，以及对应的字间距，行间距等等都是需要我们去定义的。
c)字体颜色，什么时候用品牌色，成功，错过，超链接出错等等各个状态的颜色如何去定义，后面文章我会详细说明。
2、对齐
保持页面内元素对齐方式的一致，如无特殊情况应避免同一页面出现多种数据对齐方式。
3、表单录入
在包含必须与选填的页面中，必须在必填项旁边给出醒目标识;各类型数据输入需限制文本类型，并做格式校验如电话号码输入只允许输入数字、邮箱地址需要包含“@”等，在用户输入有误时给出明确提示。
4、鼠标手势
可点击的按钮、链接需要切换鼠标手势至手型;
5、保持功能及内容描述一致
避免同一功能描述使用多个词汇，如编辑和修改，新增和增加，删除和清除混用等。建议在项目开发阶段建立一个产品词典，包括产品中常用术语及描述，设计或开发人员严格按照产品词典中的术语词汇来展示文字信息。
6、效率
提升效率，对于一些我们经常用到的组件、颜色、分割线、按钮、图标、字体、tab、表单等组件，如果提前设计统一好，能大大减少重复性设计，能让设计师更加专注在设计品质上加强，提升效率，对于基础的颜色、字体、间距可以提前开发好，减少重复性开发。
7、多平台统一
我们现在处于一个各种设备的时代，各种屏幕尺寸，平板电脑，笔记本，各种安卓机器，各种厂商自定义的系统等等，我们的设计需要在这些平台上运行，就必须保证设计的统一性。
8、投影
在设计系统中我们需要定义好投影关系，投影需要去定义不同的强度大小，以满足页面中需要，一般通过透明度，以及投影远近来定义。
9、图文关系
图片和文字在界面中如何处理，多色调如何运用，黑色图片上放文字怎么处理，白色图片放文字如何处理都是需要我们去详细定义的。
10、色彩系统
设计中三大元素，色彩，字体，图形，那么第一步我们在建立一个系统时候，色彩是很重要一部分，我们需要定义好我们整个系统的色彩架构体系，色彩体系一旦建立好，后面我们的设计都将围绕这些色彩进行设计，色彩包括：品牌色、辅助色、字体黑白灰颜色、不可用颜色、超链接颜色、成功或失败颜色等等。
二、准确性原则
使用一致的标记、标准缩写和颜色，显示信息的含义应该非常明确，用户不必再参考其它信息源。
显示有意义的出错信息，而不是单纯的程序错误代码。
避免使用文本输入框来放置不可编辑的文字内容，不要将文本输入框当成标签使用。
使用缩进和文本来辅助理解。
使用用户语言词汇，而不是单纯的专业计算机术语。
高效地使用显示器的显示空间，但要避免空间过于拥挤。
保持语言的一致性，如“确定”对应“取消”,“是”对应“否”。
三、可读性原则
1、文字长度
文字的长度，特别是在大块空白的设计中很重要，太长会导致眼睛疲惫，阅读困难。太短又经常会造成尴尬的断裂效果，断字的使用也会造成大量的复合词，这些断裂严重的影响了阅读的流畅性。
2、空间和对比度
每个字符同线路长度，间距也是重要的。所以每个字符之间的空间至少等于字符的尺寸，大多数数字设计人员习惯选择一个最小的文字大小的150%为空间距离，这就可以留下足够的空间。当每一行中读取大段的文字，且线路长度过多或线之间的空间太少，都会造成理解困难。
3、对齐方式
无论是在文本中心，还是偏左，或者是沿着一个文件的右侧对齐，文本的对齐相当重要，可以极大地影响可读性。一般而言，文本习惯向左对齐，因为它反映了你的阅读方式–从左至右。你熟悉每一行开始和结束的地方。
四、布局合理化原则
在进行设计时需要充分考虑布局的合理化问题，遵循用户从上而下，自左向右浏览、操作习惯，避免常用业务功能按键排列过于分散，以造成用户鼠标移动距离过长的弊端。多做“减法”运算，将不常用的功能区块隐藏，以保持界面的简洁，使用户专注于主要业务操作流程，有利于提高软件的易用性及可用性。
相关推荐
ui设计规范大全
ui设计培训四个月骗局
零基础学ui设计真他妈惨
ui设计培训后失业
现在学ui设计都是傻子
从小白到ui设计大咖进阶指南
关于自定义的element-ui表单组件的校验
TSS自定义了基础组件 ElTreeSelect。在 el-form中使用时，会出现异常现象：
选择数据后，关闭并重置表单（resetFields），会触发 ElTreeSelect表单项的校验，导致再次打开表单时，表单项 ElTreeSelect有校验提示（比如：必填）
组件 ElTreeSelect内部引用了 el-input组件，其在 value props变化时会触发 el-form表单的 validate表单校验。源码：
给组件 ElTreeSelect内部的 el-input组件设置 props: validate-event=false。
表单项 ElTreeSelect的校验在 change、blur时不会如期望触发，只会在点击表单提交时校验才会触发。
组件 ElTreeSelect在 value props变化时，没有触发 el-form表单的 validate表单校验。
照葫芦画瓢，同 element-ui表单组件一样，在 value监听器中校验值变化，并触发表单校验。
需要依赖的方法和工具函数可以从官方源码中获取。
