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

淩亂°似流年 2022-02-28 11:16 810阅读 0赞

# 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()
              }
    }