elementui form校验自定义正则表达式的写法

前言：

elementUI的文档中，在form组件的说明中介绍了校验规则（即rules）的写法，但是它的官方demo中只写了“必填、长度、类型”的校验例子，另外就是自定义校验函数。

所以一直以来，当我需要自己写正则来校验某个输入值的时候，我都是写的自定义校验函数……这其实根本没必要，因为实际上有很简单的写法。

 

---

事实上，正则表达式可以直接写在rules属性中

如下图，pattern后面写正则就行了。

      rules: {
          name: [
            {pattern: '^[0-9a-zA-Z_]{1,}$', message: '正则不对'}
          ],
         
        }

 

而且，和其他的校验规则一起用也是可以的。

<template>
  <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px">
    <el-form-item label="活动名称" prop="name">
      <el-input v-model="ruleForm.name"></el-input>
    </el-form-item>
  </el-form>
</template>

<script>
  export default {
    data(){
      return {
        ruleForm: {
          name: '',
        },
        rules: {
          name: [
            { required: true, message: '请输入活动名称', trigger: 'blur' },
            { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' },
            {pattern: '^[0-9a-zA-Z_]{1,}$', message: '正则不对'}
          ],
         
        }
      }
    }

  }
</script>