乘风原创程序

  • vue elementUI实现自定义正则规则验证
  • 2022/3/11 14:25:46
  • 项目场景:

    常见的表单填写中都会遇到,比如新增信息,修改信息等,如下图

    相信大家对上面的验证都非常熟悉了,不多哔哔 本篇文章主要 想写 验证规则自定义 相关的内容

    验证是否是合法手机号(举例)

    实现下图所示:

    实现步骤:

    step 1

    step 2

    model 和 ref 最好一致

    prop验证的phone_number 和 v-model 绑定的phone_number 的字段名也要一致 注意细节

    step 3

    总结:

    • 电话号码如此,其他都是一样的,举一反三而已
    • 具体业务具体分析,有些是非必填项正则验证,有些相反
    • 如果表单域需要自定义布局,不想使用饿了么自带的局部效果的话,最好把el-form包在最外层,不然也许会出现无法触发验证回调的可能

    到此这篇关于vue elementui实现自定义正则规则验证的文章就介绍到这了,更多相关vue elementui 正则规则验证内容请搜索本教程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持本教程网!