【element ui】element ui 使用正则表达式进行表单输入值的合法性验证

element ui的form表单通过rules属性传入约定的验证规则,达到表单验证的功能。rules属性中不仅可以验证非空、数值、邮件等,还可以结合正则表达式一起使用,验证自定义的规则。
例如:表单中有个字段是车牌号,要验证输入的车牌号的合法性,则可以在rules表单验证规则中结合正则表达式使用。

       <el-form ref="form" :rules="formRules" 
                :model="form" label-width="140px">
          <el-row :gutter="24">
            <el-col :span="12">
              <el-form-item prop="dbdh" label="调拨单号">
                <el-input v-model="form.dbdh" style="width:80%;" clearable/>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item prop="carNum" label="车牌号">
                <el-input v-model="form.carNum" style="width:80%;" clearable/>
              </el-form-item>
            </el-col>
          </el-row>
     
        </el-form>
 formRules: {
    dbdh: { required: true, message: '请输入调拨单号', trigger: 'blur' },
    carNum: [{ required: true, message: '请输入车牌号', trigger: 'blur' },
         { pattern: '^[京津沪渝冀豫云辽黑湘皖鲁新苏浙赣鄂桂甘晋蒙陕吉闽贵粤青藏川宁琼使领A-Z]{1}[A-Z]{1}[A-Z0-9]{4}[A-Z0-9挂学警港澳]{1}$',
            message: '车牌号不合法' }
        ]
      },

formRules中约定的车牌号carNum的验证规则,有两个,非空验证和合法性验证,其中合法性验证可以通过在pattern中书写正则表达式来验证。
pattern 属性规定了用于验证输入字段的模式(正则表达式)。

发布了23 篇原创文章 · 获赞 2 · 访问量 4252

猜你喜欢

转载自blog.csdn.net/weixin_45616483/article/details/101317786