el-form-item中的el-input加上正则校验

 手机号校验为例

html  这边（ :rules="rules" 加一下）

           <el-form
              :model="ruleForm"
              :rules="rules"
              ref="ruleForm"
              label-width="150px"
              class="demo-ruleForm"
            >                       
              <el-form-item
                label="手机号码"
                prop="phone"
              >
                <el-input v-model="ruleForm.phone"></el-input>
              </el-form-item>
            </el-form>

vue的data中加上

  data () {

    var phoneNumber = (rule, value, callback) => {
      const reg = /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/
      if (!value) {
        this.judge = false
        callback(new Error('请输入手机号'));
      } else if (!reg.test(value)) {
        this.judge = false
        callback(new Error('请输入正确的手机号'));
      } else {
        this.judge = true
        callback();
      }
    };
    return {
    ruleForm: {
        phone: '',
      },
 
      rules: {
        phone: [
          { required: true, message: '请输入手机号码', trigger: 'blur' },
          {
            validator: phoneNumber, message: '请输入正确的手机号', trigger: 'blur'
          },
        ],
      },
    
    }
  },