赞
踩
<script>
export default {
data() {
return {
formData: {
userName: '',
},
// 校验规则
rules: {
userName: [
{
required: true, //是否必填
message: '用户名不能为空', //规则提示
trigger: 'blur' //何事件触发
},
//可以设置多重验证标准
{
min: 3,
max: 5,
message: '长度在 3 到 5 个字符'
},
{
pattern: /^[\u4E00-\u9FA5]+$/, //正则
message: '用户名只能为中文'
}
]
}
}
}
}
</script>
提交按钮 需要加判断
this.$refs["form"].validate(valid => {
})
对象嵌套对象
<el-form-item label="店铺名称" :rules="rules.shopName" :prop="'cardDTOList.shopName'" >
<el-input placeholder="请输入店铺名称" v-model="form.cardDTOList.shopName"/>
</el-form-item>
for循环中的表单验证
每个都需要加 红色字样
<div v-for="(dict,index) in form.cardDTOList"> <el-form-item label="样式" :rules="rules.style" :prop="'cardDTOList.'+index+'.style'"> <el-input placeholder="请输入样式" v-model="dict.style"/> </el-form-item> </div>
form: { cardDTOList: [{ style: '', } ], },
// 表单校验 rules: { style: [ { required: true, message: "卡卷样式不能为空", trigger: "blur" } ], }
自定义表单验证
rules: { projectsList: [ {required: true, validator: validatePass, trigger: "change"} ], }
data() { var validatePass = (rule, value, callback) => { if (this.projectsList.length <= 0) { callback(new Error('请选择主营项目')); } else { callback(); } };
<el-form-item label="主营项目" prop="projectsList">
<treeselect
:disable-branch-nodes="true"
:multiple="true"
:normalizer="normalizer"
:options="appUserProjectOptions"
placeholder="请选择主营项目"
v-model="projectsList"/>
</el-form-item>
Copyright © 2003-2013 www.wpsshop.cn 版权所有,并保留所有权利。