zoukankan      html  css  js  c++  java
  • element-ui--表单校验

     el-form-item绑定的prop必须和该item下的表单元素绑定的v-model值的名称一致。
     
    1.实现对一个表单进行两套或以上的验证
    花了一点时间摸索,我想:如果不像官方给的那样,rules="rules",然后在data下设置rules的值,而是把rules绑定一个函数,这个函数在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' }
            ],
          },
          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() {
        const validatePass = (rule, value, callback) => {
          if (this.option) {
            callback(new Error('请选择列表中已有的选项'))
          } else {
            callback()
          }
        }
        return {
            rules: {
                firstContract: [
                  { required: true, message: '不能为空', trigger: ['blur', 'change'] },
                  { required: true, trigger: 'blur', validator: validatePass }
                ],
            }
        }
    }
     

  • 相关阅读:
    05Linux系统常用命令
    04Linux系统目录结构
    02Linux文件系统基本结构
    01Linux_BASH基本操作
    [HTML] HTML常用标签及HTML语义化理解
    [Tools] MDN简介及如何使用MDN查找资料
    [HTTP] 初识HTTP
    [Git] Git 入门(常用命令使用)
    [CL](入门)命令行常用命令使用技巧
    IFE_part2_JavaScript_Ajax学习
  • 原文地址:https://www.cnblogs.com/absoluteli/p/14052374.html
Copyright © 2011-2022 走看看