1、在Form-item提示填写信息
<Form-item label="分类名称" prop="name">
<Tooltip content="只能输入中英文字符且长度为0-40" placement="bottom-start">
<Input name="name" v-model="formObj.name" placeholder="请输入名称" style="width: 408px"></Input>
</Tooltip>
</Form-item>
效果如图:
2.验证表单:验证不为空和字符长度限制。
<Form id="edit-form" ref="formObj" :model="formObj" :rules="ruleValidate" :label-width="80">
<Form>
<script>
export default {
data() {
const validateName = (rule, value, callback) => {
const reg = /[\u4E00-\u9FA5_a-zA-Z]+$/;
if (value === "") {
callback(new Error('分类名称不能为空!'));
} else {
if (!reg.test(value)) {
callback(new Error('请输入中文或英文字符!'));
} else {
callback();
}
}
};
return {
id: '',
ruleValidate: {
name: [{required: true, validator:validateName, trigger: 'blur'},
{max:100, message: '分类名称不能超过40字符', trigger: 'blur'}
],
remark: [{max:100, message: '备注不能超过100字符', trigger: 'blur'}],
},
}
}
}
</script>