饿了么组件库element-ui正则表达式验证表单，后端验证表单。

0x584a 发布于2019-08-21 16:22 / 2255人阅读

摘要：要显示的错误提示则可以即可。写在最后的以上三点已经完全覆盖了所有表单验证的情况，可以实现非常复杂的验证。正式基于这些原因，我坚信是正确的选择。

前言

老是遇到一些朋友问一些element-ui组件使用相关的基础问题，因为官方文档上并没有提供所有琐碎的功能代码demo。从这里开始我会根据我实际遇到的问题记录一些常见的官方文档没有详述的功能代码，供给大家拓展思路。

1. 以中国大陆手机号验证为例

// 这是组价的代码

    


// 这是rules的代码
mobile: [
    { validator: validateMobile, trigger: "blur" },
    { required: true, message: "请输入手机号", trigger: "blur" },
    { pattern: /^1[34578]d{9}$/, message: "目前只支持中国大陆的手机号码" }
],

在element-ui的源码中搜索blur，你会很容易看到除了blur 还有focus、input，非常贴心基本满足了表单验证的入门需求。

2. 表单局部提交后端验证

在一些输入项目较多的表单提交中，比如说注册时填写的用户名，通常我们会对用户名是否重复进行验证，这是就需要调用服务来验证，这种略显复杂的验证，就需要自定义验证规则来实现。看下面的代码：

// 注意validatePass是属于data的，但不在return中。
data () {
let validatePass = (rule, value, callback) => {
    if (value.length >= 8) {
                let params = {
                    "account": value
                }
                axios.post("localhost:8080/verifyUserAccount", params)
                .then(function (response) {
                    if (response.data.err) {
                        callback(response.data.msg)
                    } else {
                        callback()
                    }
                })
                .catch(function () {
                    callback(new Error("服务异常"))
                })
            } else {
                callback()
            }
}

//这是验证规则，当然了你也可以同时使用基本的验证规则
account: [
    { validator: validatePass , trigger: "blur" }
]

注意：validatePass 自定义规则中每个执行流程中都必须附带callback()，这样才能明确通过验证的情况下去掉输入框上的loading。要显示的错误提示则可以new Error（“xxxx”）即可。

3. 综合来看

通常可以把所有规则都写在自定义的规则中，即可实现较为复杂的验证，实际上我们可以再validatePass里面调用根实例下所有data methods...，一个很简单的例子是实现两次输入的密码是否相同的验证，看下面的代码：

let validatePass = (rule, value, callback) => {
            if (value === "") {
                callback(new Error("请再次输入密码"))
            } else if (value !== this.ruleForm.password) {
                callback(new Error("两次输入密码不一致!"))
            } else {
                callback()
            }
        }

就这么简单就可以实现非vuejs情况下是非啰嗦的验证。而且样式也不会很丑，当然了任然可以选择自定义样式。这个以后再记录。

4. 写在最后的

以上三点已经完全覆盖了所有表单验证的情况，可以实现非常复杂的验证。正式基于这些原因，我坚信element-ui是正确的选择。我将会继续写一些剪短的文章补充文档的遗漏。同时如果你也跟我一样喜欢element-ui欢迎跟我探讨，我们新建了一个qq群478694438![图片描述][1]，方便大家交流。最后喊一下口号：不拘泥于原理，完全立足于实现！

5. 另
文中涉及到的源码我将会上传到讨论群中，不足之处持续更进，共同探讨。

GPU云服务器云服务器手机号正则表达式验证身份证验证正则表达式正则表达式验证身份证验证表单

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/88463.html

饿了么组件库，element-ui开发精美的后台管理系统系列之（一）开发伸缩菜单

摘要：先看这个值即为判断显示展开还是收缩状态的开关。这样就实现了展开状态下的菜单。如果有时间的话，我会把这个系列写完，知道朋友们能独立开发一个完整的的单页面后台管理程序。涉及到路由，权限等等相关内容的部分，跟本文主旨关系不大，所以我将会在另外一篇文章中详述，混在一起的话内容太多了基于element-ui的左侧可伸缩的菜单通过vuejs来开发支持展开收缩的菜单是非常简单的，只需要v-i...

whlong 2019-08-21 16:23 评论0 收藏0
前端窝 - 收藏集 - 掘金

摘要：毫无疑问，设计模式于己于他人于系统都是多赢的设计模式使代码编写真正工程化设计模小书前端掘金这是一本关于的小书。 JavaScript 常见设计模式解析 - 掘金设计模式（Design pattern）是一套被反复使用、多数人知晓的、经过分类编目的、代码设计经验的总结。使用设计模式是为了可重用代码、让代码更容易被他人理解、保证代码可靠性。毫无疑问，设计模式于己于他人于系统都是多赢的；设计...

李文鹏 2019-08-21 11:41 评论0 收藏0
自定义表单生成器form-create v2介绍

摘要：介绍是一个可以通过生成具有动态渲染数据收集验证和提交功能的表单生成器。并且支持生成任何组件。结合内置种常用表单组件和自定义组件，再复杂的表单都可以轻松搞定。介绍 form-create 是一个可以通过 JSON 生成具有动态渲染、数据收集、验证和提交功能的表单生成器。并且支持生成任何 Vue 组件。结合内置17种常用表单组件和自定义组件，再复杂的表单都可以轻松搞定。文档 | git...

lufficc 2019-08-23 18:16 评论0 收藏0
VUE UI框架对比 element-ui 与 iView

摘要：而则是用到到指令结合的方式去生成，批量生成元素。表格操作列自定义渲染的时，使用的是的函数，直接在中插入对应模板表格分页都需要引入分页组件配合使用两者总体比较，要比简洁许多。 element VS iview(最近项目UI框架在选型，做了个分析，不带有任何利益相关）主要从以下几个方面来做对比使用率（npm 平均下载频率，组件数量，star, issue…)API风格打包优化与设计师友...

ZHAO_ 2019-08-20 17:25 评论0 收藏0