zoukankan      html  css  js  c++  java
  • vue el-form多规则rules验证

    当我们在使用vue el-form的时候,经常会根据传入的值来动态验证表单信息,比如新建,编辑表单,不同的情况下,需要的验证方式不一样。根据这样的需求,我们有两种方法解决:

    1.在data()中定义两个rule规则,用computed根据值动态验证。

    <el-form class="dialog-body" :rules="rulesList" :model="temp">
    <!--这里为表单内容-->
    </el-form>
     
    <script>
    export default {
      data() {
        return {
          rules: {
            pay_type: [
              { required: true, message: '不能为空', trigger: 'change' }
            ],
            accno: [
              { required: true, message: '不能为空', trigger: 'blur' }
            ],
            accname: [
              { required: true, message: '不能为空', trigger: 'blur' }
            ],
            otp: [
              { required: true, message: '不能为空', trigger: 'blur' }
            ],
            username: [
              { required: true, message: '不能为空', trigger: 'change' }
            ],
            otp_id: [
              { required: true, message: '不能为空', trigger: 'change' }
            ]
          },
          rules2: {
            pay_type: [
              { required: true, message: '不能为空', trigger: 'change' }
            ]
          },
        }
      },
    computed: {
        rulesList: function() {
          if (this.temp.pay_type) {
            return this.rules
          } else {
            return this.rules2
          }
        }
      },

    2.在data()中定义多个rule规则,用三元表达式来判断当前需要的规则。

    <el-form class="dialog-body" ref="from" :rules="!form.id ? 'rules' : 'rules2'" :model="temp">
    <!--这里为表单内容-->
    </el-form>
     
    <script>
    export default {
      data() {
        return {
          rules: {
            pay_type: [
              { required: true, message: '不能为空', trigger: 'change' }
            ],
            username: [
              { required: true, message: '不能为空', trigger: 'change' }
            ]
          },
          rules2: {
            pay_type: [
              { required: true, message: '不能为空', trigger: 'change' }
            ]
          },
        }
      },
  • 相关阅读:
    linux下好用的软件
    linux下常见目录的介绍
    slam相关链接
    GPS 使用的三种坐标系 ECEF、ENU、LLA坐标系
    平面度计算 C++实现
    QT Cmake添加srv和msg
    pcl点云与ros之间的数据类型转换
    ROS分布式设置
    qt中播放视频和音频
    linux tips
  • 原文地址:https://www.cnblogs.com/atomgame/p/12791623.html
Copyright © 2011-2022 走看看