element ui form中的正则校验

我就是我 2023-02-27 12:14 17阅读 0赞

<el-form
            ref="phoneDialogForm"
            :rules="rules"
            :model="phoneData"
            label-position="right"
            label-width="100px"
          >
            <el-form-item label="手机号码" prop="phone" style="width: 300px;">
              <el-input v-model="phoneData.phone" maxlength="11" />
            </el-form-item>
            <el-form-item label="手机验证码" prop="code" >
              <el-col :span="12">
                <el-input v-model="phoneData.sendcode" placeholder="请输入验证码" style="width: 200px;"  maxlength="4" />
              </el-col>
              <el-col :span="8">
                <el-button
                  v-if="disabled==false"
                  type="button"
                  :disabled="disabled"
                  @click="sendcode"
                >发送验证码</el-button>
                <el-button
                  v-if="disabled==true"
                  type="button"
                  :disabled="disabled"
                  @click="sendcode"
                >{
       { btntxt }}</el-button>
              </el-col>
            </el-form-item>
          </el-form>

rules: {
            phone: [
              { required: true, message: "请输入手机号", trigger: "blur" },
              {
                pattern: /^1[34578]\d{9}$/,    //正则校验不用字符串
                message: "请填写正确的手机号码", trigger: "blur"
              }
            ],
            code: [{ required: true, message: "请输入验证码", trigger: "blur" }]
          }

发表评论取消回复

表情：

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

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

相关阅读

相关 element ui 数组类型form校验

循环数组生成的表单校验 prop需要用原数组加序号的方式来访问，否则会报： please transfer a valid prop path to form item!

怼烎@/ 2024年02月19日 21:12/ 0 赞/ 95 阅读

相关 element ui form 表单校验upload是否有上传

查到资料可以绑定在一个多选上，校验此绑定的值 1 <el-form-item label="上传图片" prop="双向绑定值"> 2 <el-chec

叁歲伎倆/ 2023年06月05日 11:20/ 0 赞/ 43 阅读

相关 element-ui Form表单校验

使用element-ui自带的表单校验，注意几个点： 1.el-form通过rules属性，绑定校验规则 2.el-form-item的prop属性，设置为需要校验的字段名

本是古典何须时尚/ 2023年06月02日 07:42/ 0 赞/ 33 阅读

相关 element ui form中的正则校验

<el-form ref="phoneDialogForm" :rules="rules" :m

我就是我/ 2023年02月27日 12:14/ 0 赞/ 18 阅读

相关 JavaScript 正则校验

[包含用户姓名，手机号，密码，邮箱，搜索关键字等][Link 1] 由于手机网络一直在升级，手机号码更新快的原因，手机号码正则验证，我一般使用下面这段校验 expo

向右看齐/ 2023年01月06日 01:19/ 0 赞/ 211 阅读

相关 vue element form 默认校验

<template>   <el-form

骑猪看日落/ 2022年10月30日 00:33/ 0 赞/ 195 阅读

相关 Element UI 自定义正则表达式验证

//指定数据中心的验证表单valiForm，验证规则rules <el-form :model="valiForm" :rules="rules" ref="v

布满荆棘的人生/ 2022年06月10日 00:25/ 0 赞/ 236 阅读

相关 element 表单正则校验

1. Non-empty check only view <el-form ref="ruleForm" :model="ruleForm" :rules="rul

超、凢脫俗/ 2022年04月13日 04:48/ 0 赞/ 325 阅读

相关 element-ui+vue-treeselect校验

element-ui+vue-treeselect下拉框的校验问题陈述：在element-ui中有自带的表单验证，但是使用的vue-treeselect无法验证

Dear 丶/ 2021年12月20日 18:57/ 0 赞/ 820 阅读

相关 element ui 使用知识点记录 form表单校验

element ui 中form表单是非常重要的，表单的验证也是很重要的。以往我使用的时候，基本都是指定表单规则rules，这个规则会在表单输入时，如果不符合表单验证规则

╰半夏微凉°/ 2021年07月26日 00:58/ 0 赞/ 544 阅读