vue---rules表单校验规则取消
需求说明:在系统中,添加数据和编辑数据一般共用一个对话框,但存在个别项是添加数据中存在而编辑数据中不存在的项,那么这种情况下如何进行校验呢,如果直接在rules里写上该项的校验,那么提交编辑时将会提示缺少该项参数。解决方法:以用户管理中添加用户/编辑用户为例,当添加用户时需要输入密码,而编辑时后台不返回密码项,因此不需要密码项,如下图:(1)为el-form加上【:ru...
·
需求说明:
在系统中,添加数据和编辑数据一般共用一个对话框,但存在个别项是添加数据中存在而编辑数据中不存在的项,那么这种情况下如何进行校验呢,如果直接在rules里写上该项的校验,那么提交编辑时将会提示缺少该项参数。
解决方法:
以用户管理中添加用户/编辑用户为例,当添加用户时需要输入密码,而编辑时后台不返回密码项,因此不需要密码项,如下图:
(1)为el-form加上【:rules="userInfoFormRules"】,并在data中声明userInfoFormRules如下:
userInfoFormRules: {
username: [
{ required: true, message: "请输入用户名", trigger: "blur" }
],
realname: [{ required: true, message: "请输入姓名", trigger: "blur" }],
no: [{ required: true, message: "请输入工号", trigger: "blur" }],
password: [
{ required: true, message: "请输入密码", trigger: "blur" },
{
pattern: /^(?=.*\d)(?=.*[a-zA-Z])(?=.*[\W_]).{6,16}$/,
message: "请输入长度为6-16位包含数字、字母、特殊字符的密码",
trigger: "blur"
}
],
mobile: [
{
required: true,
message: "请输入手机号码",
trigger: "blur"
},
{
pattern: /^((1[3,5,8][0-9])|(14[5,7])|(17[0,5,6,7,8])|(19[7]))\d{8}$/,
message: "手机号码格式错误",
trigger: "blur"
}
],
email: [
{
required: true,
message: "请输入邮箱",
trigger: "blur"
},
{
validator: function(rule, value, callback) {
if (
/^\w{1,64}@[a-z0-9\-]{1,256}(\.[a-z]{2,6}){1,2}$/i.test(
value
) == false
) {
callback(new Error("邮箱格式错误"));
} else {
callback();
}
},
trigger: "blur"
}
]
},
(2)为密码加加上校验判断【:rules="this.userInfoFormTitle=='添加用户' ? userInfoFormRules.password:[]"】,只有当对话框标题为“添加用户”时才加入【userInfoFormRules.password】中的校验,否则校验为空【[]】
<el-form-item
v-show="this.userInfoFormTitle=='添加用户'"
prop="password"
:rules="this.userInfoFormTitle=='添加用户' ? userInfoFormRules.password:[]"
label="密码"
label-width="100px"
size="mini"
>
<el-input v-model="userInfoForm.password"></el-input>
</el-form-item>
更多推荐
已为社区贡献45条内容
所有评论(0)