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) {
this.rules.departName[0].validator = (rule, value, callback) => {
callback()
}
this.rules.systemCode[0].validator = (rule, value, callback) => {
callback()
}
}