element ui 表单验证

最新推荐文章于 2023-11-21 10:05:43 发布

Be____nice

最新推荐文章于 2023-11-21 10:05:43 发布

阅读量467

点赞数 1

分类专栏：前端文章标签： ui javascript 前端

本文链接：https://blog.csdn.net/qq_41681845/article/details/127223207

版权

前端专栏收录该内容

6 篇文章 0 订阅

订阅专栏

普通表单验证

<el-form-item label="活动名称" prop="name">
    <!-- validate-event属性的作用是: 输入时不触发表单验证.提交时再验证,也可以设置成动态验证 -->
    <el-input v-model="registData.name" :validate-event="false"></el-input>
  </el-form-item>

  rules: { // 表单验证规则
    name: [
      { required: true, message: '请输入活动名称' }, // 'blur'是鼠标失去焦点的时候会触发验证
      { min: 3, max: 5, message: '长度在 3 到 5 个字符' }
    ]
  }

自定义验证规则

在data中定义一个验证规则，在进行验证时使用validator进行引用
实例为验证邮箱，使用的是正则表达式

data() {
  //验证邮箱的规则
  var checkEmail = (rule, value, cb) => {
    const regEmail = /^\w+@\w+(\.\w+)+$/
    if (regEmail.test(value)) {
      return cb()
    }
    //返回一个错误提示
    cb(new Error('请输入合法的邮箱'))
  }
  //验证手机号码的规则
  var checkMobile = (rule, value, cb) => {
    const regMobile = /^1[34578]\d{9}$/
    if (regMobile.test(value)) {
      return cb()
    }
    //返回一个错误提示
    cb(new Error('请输入合法的手机号码'))
  }
  return {
    // 添加表单的验证规则对象
    addFormRules: {
      email: [
          { required: true, message: '请输入邮箱', trigger: 'blur' },
          { validator:checkEmail, message: '邮箱格式不正确，请重新输入', trigger: 'blur'}
      ],
      mobile: [
          { required: true, message: '请输入手机号码', trigger: 'blur' },
          { validator:checkMobile, message: '手机号码不正确，请重新输入', trigger: 'blur'}
      ]
    }
  }
}

数字类型验证

<el-form-item label="区域面积" prop="area">
    <!-- 输入的类型为Number时,需要加一个数字转换的修饰符,输入框默认的类型是String类型,但是我试了一下,发现并不能做验证,所以自己写了函数方法验证 -->
    <!-- <el-input v-model.number="registData.area" autocomplete="off"></el-input> -->
    <!-- keyup是鼠标弹起事件, autocomplete是input自带的原生属性,自动补全功能,on为开启,off为关闭 -->
    <el-input v-model="registData.area" @keyup.native="InputNumber('area')" autocomplete="off"></el-input>
  </el-form-item>

  area: [
      // 数字类型 'number', 整数: 'integer', 浮点数: 'float'
      // {type: 'number', message: '请输入数字类型', trigger: 'blur'},
      // {type: 'integer', message: '请输入数字类型', trigger: 'change'}, // 'change'是表单的值改变的时候会触发验证
      {required: true, message: '请输入区域面积', trigger: 'blur'}
    ],

    // 自己写的正则验证,限制用户输入数字以外的字符
    // 过滤输入的金额
    InputNumber (property) {
      this.registData[property] = this.limitInputPointNumber(this.registData[property])
    },

    // 验证只能输入数字
    limitInputNumber (val) {
      if (val) {
        return String(val).replace(/\D/g, '')
      }
      return val
    },

    // 限制只能输入数字(可以输入两位小数)
    limitInputPointNumber (val) {
      if (val === 0 || val === '0' || val === '') {
        return ''
      } else {
        let value = null
        value = String(val).replace(/[^\d.]/g, '') // 清除“数字”和“.”以外的字符
        value = value.replace(/\.{2,}/g, '.') // 只保留第一个. 清除多余的
        value = value.replace('.', '$#$').replace(/\./g, '').replace('$#$', '.')
        value = value.replace(/^(-)*(\d+)\.(\d\d).*$/, '$1$2.$3') // 只能输入两个小数
        return Number(value)
      }
    },

嵌套验证–独立验证

在这里插入图片描述

一行里有多个输入框或选择的情况,这里有两种方法,第一种是el-form嵌套写法,验证是独立的

<el-form-item label="活动时间" required>
    <el-col :span="11">
      <el-form-item prop="date1">
        <el-date-picker type="date" placeholder="选择日期" v-model="registData.date1" style="width: 100%;"></el-date-picker>
      </el-form-item>
    </el-col>
    <el-col class="line" :span="2">-</el-col>
    <el-col :span="11">
      <el-form-item prop="date2">
        <el-time-picker type="fixed-time" placeholder="选择时间" v-model="registData.date2" style="width: 100%;"></el-time-picker>
      </el-form-item>
    </el-col>
  </el-form-item>

  date1: [
    { type: 'date', required: true, message: '请选择日期', trigger: 'change' }
  ],
  date2: [
    { type: 'date', required: true, message: '请选择时间', trigger: 'change' }
  ],

嵌套验证–联动验证

在这里插入图片描述

<!-- region是一个对象,国家和城市是它的属性 -->
  <el-form-item label="活动区域" prop="region">
    <el-select v-model="registData.region.country" placeholder="请选择国家">
      <el-option label="国家一" value="USA"></el-option>
      <el-option label="国家二" value="China"></el-option>
    </el-select>
    <el-select v-model="registData.region.city" placeholder="请选择城市">
      <el-option label="城市一" value="shanghai"></el-option>
      <el-option label="城市二" value="beijing"></el-option>
    </el-select>
  </el-form-item>

  region: [
    {
      type: 'object',
      required: true,
      // 这里有两种处理,一种是自定义验证,拿到值后自己对属性进行验证,比较麻烦
      // validator: (rule, value, callback) => {
      //   console.log(55, value)
      //   if (!value.country) {
      //     callback(new Error('请选择国家'))
      //   } else if (!value.city) {
      //     callback(new Error('请选择城市'))
      //   } else {
      //     callback()
      //   }
      // },
      trigger: 'change',
      // 官网提供了对象的嵌套验证,只需要把需要验证的属性,放在fields对象里,就会按顺序进行验证
      fields: {
        country: {required: true, message: '请选择国家', trigger: 'blur'},
        city: {required: true, message: '请选择城市', trigger: 'blur'}
      }
    }
  ],

图片上传验证

图片上传是一个异步过程,属性值改变后不会去触发验证规则，所以需要在上传图片和删除图片时进行验证
（如果照片存入一个数组，也可以通过数组长度来验证）

<el-form-item label="活动图片" prop="fileUrl">
    <el-upload
      :action="action"
      :on-success="handleSuccess"
      :data="uploadData"
      :limit="20"
      list-type="picture-card"
      :on-preview="handlePreview"
      :on-remove="handleRemove">
      <i class="el-icon-plus"></i>
    </el-upload>
  </el-form-item>

  fileUrl: [
    { required: true, message: '请上传图片', trigger: 'change' }
  ],

  // 删除图片
  handleRemove (file, fileList) {
    this.registData.fileUrl = ''
    // 文件删除后也要触发验证,validateField是触发部分验证的方法,参数是prop设置的值
    this.$refs.registerRef.validateField('fileUrl')
  },

  // 图片上传
  handleSuccess (res, file, fileList) {
    // 这里可以写文件上传成功后的处理,但是一定要记得给fileUrl赋值
    this.registData.fileUrl = 'fileUrl'
    // 文件上传后不会触发form表单的验证,要手动添加验证
    this.$refs.registerRef.validateField('fileUrl')
  },