网站快速成型工具

Element，一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库

指南

了解设计指南，帮助产品设计人员搭建逻辑清晰、结构合理且高效易用的产品。

查看详情
组件

使用组件 Demo 快速体验交互细节；使用前端框架封装的代码帮助工程师快速开发。

查看详情
主题

在线主题编辑器，可视化定制和管理站点主题、组件样式

查看详情
资源

下载相关资源，用其快速搭建页面原型或高保真视觉稿，提升产品设计效率。

查看详情

设计原则

一致

Consistency

反馈

Feedback

效率

Efficiency

可控

Controllability

一致性 Consistency

与现实生活一致：与现实生活的流程、逻辑保持一致，遵循用户习惯的语言和概念；
在界面中一致：所有的元素和结构需保持一致，比如：设计样式、图标和文本、元素的位置等。

反馈 Feedback

控制反馈：通过界面样式和交互动效让用户可以清晰的感知自己的操作；
页面反馈：操作后，通过页面元素的变化清晰地展现当前状态。

效率 Efficiency

简化流程：设计简洁直观的操作流程；
清晰明确：语言表达清晰且表意明确，让用户快速理解进而作出决策；
帮助用户识别：界面简单直白，让用户快速识别而非回忆，减少用户记忆负担。

可控 Controllability

用户决策：根据场景可给予用户操作建议或安全提示，但不能代替用户进行决策；
结果可控：用户可以自由的进行操作，包括撤销、回退和终止当前操作等。

              <el-form-item label="手机号" prop="receiver_phone"><el-inputv-model="listDialogForm.receiver_phone"maxlength="11"></el-input></el-form-item>import { validateMobile } from './config'data() {return {//列表对话框字段listDialogForm: {receiver_phone: '',},//列表对话框验证规则listDialogRules: {receiver_phone: [{ required: true, message: '请输入收货人手机号', trigger: 'blur' },{ validator: validateMobile.bind(this), trigger: 'blur' },],},}},

config.js:

const validateMobile = function (rule, value, callback) {let newValue = value.replace(/[^0-9]/gi, '')if (value !== newValue) {callback(new Error('请输入正确的手机号'))} else if (newValue.length !== 11) {callback(new Error('请输入正确的手机号'))} else {callback()}
}
export { validateMobile }

element ui Form 自定义校验规则,验证手机号相关推荐

vue element form 自定义校验1(表单校验)
通过ref属性获得表单对象,调用表单对象的validate函数进行表单的整体校验 <template><!--rule ...
vue element form 自定义校验1(字段校验)
<template><el-form :model="for ...
vue+element ui表单校验（邮箱、电话、工商信息）
vue+element ui表单校验(邮箱.电话.工商信息)) Html部分 <template><div><el-steps :active="active& ...
JSR303校验的简单使用以及自定义校验规则的代码编写
文章目录一.JSR303校验 1.简介 2.相关注解 3.JSR303依赖包二.JSR303自带的校验规则 1.在JavaBean上添加校验规则 2.生效校验规则 2.1 controller返回 ...
element 修改表单值后表单验证无效_element 表单自定义校验规则
首先在我们的vue + element 项目中,尤其是后台有关的项目或者涉及到大量操作数据的平台,重中之重的就是关于数据的验证,也就是关于我们表单的验证,如果在前端做好了这些,相当于在前后台交互数据的 ...
element form自定义校验_SpringBoot分组校验及自定义校验注解
前言在日常的开发中,参数校验是非常重要的一个环节,严格参数校验会减少很多出bug的概率,增加接口的安全性.在此之前写过一篇SpringBoot统一参数校验主要介绍了一些简单的校验方法.而这篇则是 ...
antd form rules字数限制_【React】antd的form表单的自定义校验规则的用法
在用到antd的Form组件的时候,可能会用到自定义的规则,以我的项目为例:在输入名称的时候需要请求接口,校验的内容是后台返回的内容,所以这个时候需要用到自定义的校验规则屏幕快照 2019-06-1 ...
element ui——Pagination 自定义分页样式
我们可以看到,element ui Pagination分页默认样式直接显示首页 - 中间页 - 末页,但当项目中数据量过大时,用户直接点击最后一页可能会导致后端elk崩溃.项目最后要求不能把 ...
element ui form循环嵌套表单及嵌套表单的验证方法（校验）
首先看看成果表单一级.二级嵌套的增加.删除一级.二级嵌套的表单的验证知识点一级嵌套循环:<div v-for="(item, index) in form.product ...

element ui Form 自定义校验规则,验证手机号

网站快速成型工具

指南

组件

主题

资源

设计原则

一致性 Consistency

反馈 Feedback

效率 Efficiency

可控 Controllability

element ui Form 自定义校验规则,验证手机号相关推荐

最新文章

热门文章