rules(校验)
rules 用于描述细致的、定制化的校验,用法与 antd 类似,因为 FormRenderVue 在底层使用了与 antd 相同的
async-validator
依赖。所以async-validator
文档 的所有 api 在 FormRenderVue 中都可支持。{ "type": "object", "properties": { "count": { // 基础属性 "title": "代号", "type": "string", "min": 6, // rules (补充校验信息) "rules": [ { "pattern": "^[A-Za-z0-9]+$", "message": "只允许填写英文字母和数字" } ] } } }
"zip": { "title": "zip code", "type": "string", "rules": [{ "len": 8, "message": "invalid zip" }] }
当常规字段不能满足时,可使用
validator
动态校验。详见async-validator
文档name: { type: 'string', required: true, rules: [{ validator: (rule, value) => value === 'muji' }] },
作为 FormRenderVue 书写的特别规则,由于以下个字段同时涉及到了展示和校验,所以已经放在“基础属性”中,而不需要在 rules 中特别注明
type format min max required
如果想定制一类校验的文案,建议使用
validateMessages
props 来统一覆盖校验信息FormRenderVue
为校验提供了默认的错误提示信息,可以通过配置validateMessages
属性,修改对应的提示模板。一种常见的使用方式,是配置国际化提示信息:const validateMessages = { required: '${title}是必选字段', // ... }; <Form validateMessages={validateMessages} />;
目前可以用的转义字段为
${title}
/${min}
/${max}
/${len}
/${pattern}
, 如果有更多需求请提 issue如果想定制单个组件必填的错误文案,请同时书写 required 和 rules:
"zip": { "title": "zip code", "type": "string", "required": true, "rules": [{"len": 8, "message": "invalid zip"},{"required": true, "message": "zip is required"}] }