element-ui自定义非必填字段的格式校验

小灰灰 2021-09-03 04:50 700阅读 0赞

# 场景 #

`element` 表单里非必填的字段需要校验格式时使用

# 注意 #

`rules` 里面非必填字段不要加上 `required` 属性

<template>
      <div class="container">
        <el-form ref="elForm" :inline="true" :model="form" :rules="rules" size="small">
          <el-form-item label="姓名" prop="name">
            <el-input v-model.trim="form.name" maxlength="20" placeholder="请输入姓名"/>
          </el-form-item>
       	  <el-form-item label="手机号码" prop="phone">
            <el-input v-model.trim="form.phone" maxlength="20" placeholder="请输入手机号码"/>
          </el-form-item>
        </el-form>
      </div>
    </template>
    export default { 
      components: { },
      data() { 
    	var checkPhone = (rule, value, callback) => { 
          const phoneReg = /^1[3|4|5|6|7|8][0-9]{9}$/
          // 当数据为空时，不进行校验
          if (!value) { 
            return callback()
          }
          setTimeout(() => { 
            if (phoneReg.test(value)) { 
              callback()
            } else { 
              callback(new Error('请输入正确的手机号码'))
            }
          }, 100)
        }
        return { 
          form: { 
            name: null,
            phone: null
    	  },
    	  rules: { 
    	    name: {  required: true, message: '请输入姓名'},
    	    phone: {  validator: checkPhone, message: '请输入正确的手机号码'}
    	  }
        }
      }
    }

发表评论取消回复

表情：

评论列表（有 0 条评论，700人围观）

还没有评论，来说两句吧...

相关阅读

相关 [Ext JS ] 动添切换字段的必填与非必填

Ext JS的字段支持必填的设置，通过设置allowBlank 属性设置这个字段不能为空，在失去焦点或是调用字段的valid 方法才进行检查，如果字段位于Form 中，调

- 日理万妓/ 2024年04月06日 12:07/ 0 赞/ 96 阅读

相关 Dynamics 365 前台必填字段校验

使用场景：自定义按钮时不会像保存按钮那样自动校验必填字段，所以需要我们自己做一些校验。可以通过如下方法来做校验。这个可以当作参考，使用setNotification估计没有

野性酷女/ 2024年03月27日 11:59/ 0 赞/ 78 阅读

相关邮政编码，格式校验：@ZipCode（自定义注解）

目标自定义一个用于校验`邮政编码格式`的注解`@ZipCode`，能够和现有的 `Validation` 兼容，使用方式和其他校验注解保持一致（使用 `@Valid`

Dear 丶/ 2024年02月22日 07:00/ 0 赞/ 42 阅读

相关手机号码，格式校验：@Phone（自定义注解）

需求 `新增接口` 和 `修改接口` 中，`手机号码`的格式校验是普遍需要的。在每个`手机号码`字段上添加`正则表达式校验注解`来实现校验，重复书写，容易出错；在不同

超、凢脫俗/ 2023年10月16日 16:56/ 0 赞/ 77 阅读

相关 ElementUI：关于 el-form 必填项的校验规则

<el-form ref="ruleForm" :model="ruleForm" :rules="rules" label-width="100px" class="

我会带着你远行/ 2023年03月02日 13:22/ 0 赞/ 10 阅读

相关 vue + elementUI 的表单实现部分必填项校验

接手过一个vue + element 项目，要求对 from 表单进行部分校验；两个按钮点击分别校验表单里面的不同项。主要用到了 elementUI 的 form 表单提供

灰太狼/ 2023年01月02日 06:26/ 0 赞/ 173 阅读

相关 elementui form必填项显示红色星号但不触发校验

封装的form组件父组件传rules,必填项显示红色星号但不触发校验 ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_s

阳光穿透心脏的1/2处/ 2022年10月16日 06:06/ 0 赞/ 22 阅读

相关 Caffe | 自定义字段和层

1.自定义字段最近在老版本的caffe上跑resnext网络的时候出现如下所示的bug，正如我们上一篇文章[Caffe | 核心积木Layer层类详解][Caffe _

绝地灬酷狼/ 2022年03月25日 10:24/ 0 赞/ 294 阅读

相关 lay-verify进行非必填项校验

它默认都验证了！需要调整源码！`form.js`,`layui.all.js` this.config = { veri

客官°小女子只卖身不卖艺/ 2021年11月09日 02:08/ 0 赞/ 528 阅读

相关 element-ui自定义非必填字段的格式校验

场景 `element` 表单里非必填的字段需要校验格式时使用注意 `rules` 里面非必填字段不要加上 `required` 属性

小灰灰/ 2021年09月03日 04:50/ 0 赞/ 701 阅读