element-ui中rules使用正则验证、表单验证
阅读原文时间:2023年07月08日阅读:1
<template>
  <el-form :model="DataForm" label-position="top" :rules="dialogRules">
    <el-form-item label="年龄" prop="loseEfficacyReason">
      <el-input type="textarea" v-model="unuseForm.loseEfficacyReason" auto-complete="off"></el-input>
    </el-form-item>
  </el-form>
</template>
<script>
export default{
  data(){
    return {
      dialogRules: {
        loseEfficacyReason: [
          { required: true, message: '请输入原因', trigger: 'blur' },
          { type: 'number',min: 2, message: '请输入不少于2个字符', trigger: 'blur' },
          { pattern: /^[A-Za-z0-9\u4e00-\u9fa5]+$/, message: '不允许输入空格等特殊符号' },
          {validator:验证方法,trigger:验证触发}
          //参数解释:
          //required是不是必填项
          //message提示信息文字
          //min:2最少不能低于2    max:6最多不能高于6
          //pattern这是正则验证规则
          //trigger方式,trigger: 'blur' 在失去焦点的时候验证
          //type数据类型,input框输入的都是字符串类型,可以在v-model上加一个。namber修饰符
        ]
      }
    }
  }
}
</script>