elementUI自带的表单验证---解决特定情况下忽略指定表单项的验证

html部分

<el-form :model="form" :rules="rules" ref="form" label-width="100px">
        <el-form-item label="姓名" prop="name">
          <el-input v-model="form.name" placeholder="请输入姓名"></el-input>
        </el-form-item>
        <el-form-item label="账户" prop="username">
          <el-input v-model="form.username" placeholder="请输入账户"></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="password">
          <el-input type="password" v-model="form.password" placeholder="请输入密码"></el-input>
        </el-form-item>
        <el-form-item label="系统" prop="systemCode">
          <el-select v-model="selectedSys" multiple size="small" placeholder="请选择适用系统" @change="modifySys();">
            <el-option
              v-for="item in clientList"
              :key="item.label"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="部门" prop="departName">
          <el-input readonly type="text" placeholder="请选择部门" v-model="form.departName">
            <el-button slot="append" icon="el-icon-search" @click="openDepartDialog()"></el-button>
          </el-input>
        </el-form-item>
        <el-form-item label="性别">
          <el-select class="filter-item" v-model="form.sex" placeholder="请选择">
            <el-option v-for="item in  sexOptions" :key="item" :label="item" :value="item"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="描述">
          <el-input type="textarea" :autosize="{ minRows: 3, maxRows: 5}" placeholder="请输入内容"
                    v-model="form.description"></el-input>
        </el-form-item>
</el-form>

js代码

data() {
//自定义验证
      const validateDepart = (rule, value, callback) => {
        if (!this.form.departName) {
          callback(new Error('请选择部门'))
        } else {
          callback()
        }
      }

      const validateSystemcode = (rule, value, callback) => {
        if (!this.form.systemCode) {
          callback(new Error('请选择系统代码'))
        } else {
          callback()
        }
      }


      const validatePassword = (rule, value, callback) => {
        if (!validatePWD(value)) {
          callback(new Error('密码中必须包含字母、数字、特称字符,至少8个字符,最多30个字符'))
        } else {
          callback()
        }
      }

      return {
        selectedSys: "",
        clientList: [{
          value: 'scxt',
          label: '生产系统'
        }, {
          value: 'yxxt',
          label: '营销系统'
        }],

        form: {
          username: undefined,
          name: undefined,
          sex: '男',
          password: undefined,
          description: undefined,
          departName: undefined,
          departId: undefined,
          systemCode: undefined
        },
        rules: {
          name: [
            {
              required: true,
              message: '请输入用户',
              trigger: 'blur'
            },
            {
              min: 3,
              max: 20,
              message: '长度在 3 到 20 个字符',
              trigger: 'blur'
            }

          ],
          username: [
            {
              required: true,
              message: '请输入账户',
              trigger: 'blur'
            },
            {
              min: 3,
              max: 20,
              message: '长度在 3 到 20 个字符',
              trigger: 'blur'
            }
          ],
          password: [
            {
              required: true,
              message: '请输入密码,密码最短8位,且需要由数字、字母和特殊字符组成',
              trigger: 'blur',
              validator: validatePassword
            }
          ],
          departName: [
            {
              required: true,
              message: '请选择部门',
              trigger: 'blur',
              validator: validateDepart
            }
          ],
          systemCode: [
            {
              required: false,
              message: '请选择系统代码',
              trigger: 'blur',
              validator: validateSystemcode
            }
          ]
        },
        sexOptions: ['男', '女'],
        dialogFormVisible: false,
        dialogDepartVisible: false,
        dialogStatus: '',
        userManager_btn_edit: false,
        userManager_btn_del: false,
        userManager_btn_add: false
      }
    }

重点(修改自定义验证方法validator,直接返回,不进行验证)

 update(formName) {
        // debugger
          this.rules.departName[0].validator = (rule, value, callback) => {
              callback()
          }
          this.rules.systemCode[0].validator = (rule, value, callback) => {
              callback()
          }
}
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值