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' }
            ]
          },
        }
      },
  • 相关阅读:
    WPF 对显示列顺序的缓存处理
    WPF DataGrid Header语言切换处理
    ini操作类
    C# 校验 正则
    TreeView 数据绑定及选中命令处理
    Sql server Compact 小型数据库损坏修复
    单例模式 与lock用法
    C#串口控制
    mysql group by 组内排序
    mysql general log开启
  • 原文地址:https://www.cnblogs.com/atomgame/p/12791623.html
Copyright © 2011-2022 走看看