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' }
            ]
          },
        }
      },
  • 相关阅读:
    jdk8 xp
    electron react
    electron install失败
    0511 Braft Editor和嵌套路由
    组播
    0427
    duilib自定义组件
    android 读写文件、列出根目录文件及新版本权限
    android Fragment使用RecyclerView
    Duilib 带xml的1
  • 原文地址:https://www.cnblogs.com/atomgame/p/12791623.html
Copyright © 2011-2022 走看看