zent
Version:
一套前端设计语言和基于React的实现
244 lines (238 loc) • 6.74 kB
Markdown
order: 4
zh-CN:
title: 表单校验
name: 昵称
namedescription: 正则校验
nameValidationError1: 请填写昵称
nameValidationError2: 昵称只能是字母
password: 密码
pwdescription: 非空校验
pwValidationError: 请填写密码
comfirmPw: 确认密码
comfirmPwdescription: 自定义校验函数
comfirmValidatiaonError: 两次填写的密码不一致
email: 邮件
emailHelodesc: 邮件校验
emailValidationError: 请填写正确的邮件
url: 个人网站链接
urldescription: 超链接校验
urlValidationError: 请填写正确的网址
id: 证件号码
iddescription: 自定义校验函数
idValidationError1: 证件号码必须是数字
idValidationError2: 证件号码是10位或者15位数字
hobbies: 兴趣标签
hobbiesdescription: 长度校验
hobbiesValidationError: 请至少选择两个
hobbiesText1: 电影
hobbiesText2: 书籍
hobbiesText3: 旅行
remark: 备注
remarkDesc: 文本输入
remarkValidationError: 备注不能超过10个字符
singleUploadText: 单文件上传
singleUploadTips: 文件大小不超过 2M
singleUploadValidationError: 请上传文件
uploadText: 文件上传
uploadTips: 单个文件不超过 2M
uploadValidationError: 请上传文件
imageUploadText: 图片文件上传
imageUploadTips: 单个文件不超过 2M
imageUploadValidationError: 请上传图片
submit: 获取表单值
reset: 重置表单值
en-US:
title: Common valiations of form
name: Name
namedescription: regular validation
nameValidationError1: Please enter the name.
nameValidationError2: Name can only be letters.
password: Password
pwdescription: non-empty validation
pwValidationError: Please enter the password.
comfirmPw: Comfirm password
comfirmPwdescription: validations of comparing with other field
comfirmValidatiaonError: The password you enter the second time is not the same as the one you first filled in.
email: Email
emailHelodesc: validation of email
emailValidationError: Please enter the right email.
url: Personal website
urldescription: validation of website link
urlValidationError: Please enter the right website link.
id: ID Number
iddescription: custom validations
idValidationError1: ID number can only be numbers.
idValidationError2: ID number is 10 or 15 digits.
hobbies: hobbies
hobbiesdescription: length validation
hobbiesValidationError: Please select at least two hobbies.
hobbiesText1: movie
hobbiesText2: book
hobbiesText3: travel
remark: remark
remarkDesc: remark（textarea）
remarkValidationError: Please input no more than 10 words.
singleUploadText: Single file upload
singleUploadTips: File size no more than 2M
singleUploadValidationError: Please upload file.
uploadText: Files upload
uploadTips: Single File no more than 2M
uploadValidationError: Please upload file.
imageUploadText: Image files upload
imageUploadTips: Single File no more than 2M
imageUploadValidationError: Please upload image.
submit: submit
reset: reset
```jsx
import {
Form,
FormStrategy,
Radio,
Checkbox,
Notify,
Validators,
FormNumberInputField,
FormInputField,
FormSingleUploadField,
} from 'zent';
/**
* 自定义表单校验，内置组件接受 renderError 参数，若不传默认会显示 message
*/
function equalsPassword(value, ctx) {
if (value !== ctx.getSectionValue('password').password) {
return {
name: 'passwordEqual',
message: '{i18n.comfirmValidatiaonError}',
};
}
return null;
}
function idLength(value) {
if (value.length !== 10 && value.length !== 15) {
return {
name: 'idLength',
message: '{i18n.idValidationError2}',
};
}
}
function App() {
const form = Form.useForm(FormStrategy.View);
const resetForm = useCallback(() => {
form.resetValue();
}, [form]);
const onSubmit = React.useCallback(form => {
const value = form.getValue();
console.log(value)
}, []);
return (
<Form
form={form}
layout="vertical"
scrollToError
onSubmit={onSubmit}
>
<FormInputField
name="name"
label="{i18n.name}："
required
helpDesc="{i18n.namedescription}"
validators={[
Validators.required('{i18n.nameValidationError1}'),
Validators.pattern(/^[a-zA-Z]+$/, '{i18n.nameValidationError2}'),
]}
/>
<FormInputField
name="password"
label="{i18n.password}："
required
helpDesc="{i18n.pwdescription}"
validators={[Validators.required('{i18n.pwValidationError}')]}
props={{
type: 'password',
}}
/>
<FormInputField
name="confirmPw"
label="{i18n.comfirmPw}："
required
helpDesc="{i18n.comfirmPwdescription}"
validators={[equalsPassword]}
props={{
type: 'password',
}}
/>
<FormInputField
name="email"
label="{i18n.email}："
helpDesc="{i18n.emailHelodesc}"
validators={[Validators.email('{i18n.emailValidationError}')]}
/>
<FormInputField
name="remark"
label="{i18n.remark}："
helpDesc="{i18n.remarkDesc}"
props={{ type: 'textarea', showCount: true, maxCharacterCount: 10 }}
validators={[Validators.maxLength(10, '{i18n.remarkValidationError}')]}
/>
<FormNumberInputField
name="id"
label="{i18n.id}："
required
helpDesc="{i18n.iddescription}"
validators={[idLength]}
/>
<FormCheckboxGroupField
name="hobbies"
label="{i18n.hobbies}："
required
helpDesc="{i18n.hobbiesdescription}"
validators={[Validators.minLength(2, '{i18n.hobbiesValidationError}')]}
>
<Checkbox value="movie">{i18n.hobbiesText1}</Checkbox>
<Checkbox value="book">{i18n.hobbiesText2}</Checkbox>
<Checkbox value="travel">{i18n.hobbiesText3}</Checkbox>
</FormCheckboxGroupField>
<FormSingleUploadField
name="singleFile"
label="{i18n.singleUploadText}："
props={{
tips: '{i18n.singleUploadTips}',
maxSize: 1024 * 1024 * 2,
}}
validators={[Validators.required('{i18n.singleUploadValidationError}')]}
/>
<FormUploadField
name="upload"
label="{i18n.uploadText}："
props={{
tips: '{i18n.uploadTips}',
maxAmount: 9,
maxSize: 1024 * 1024 * 2,
}}
validators={[Validators.minLength(1, '{i18n.uploadValidationError}')]}
/>
<FormImageUploadField
name="imageUpload"
label="{i18n.imageUploadText}："
props={{
tips: '{i18n.imageUploadTips}',
maxAmount: 9,
maxSize: 1024 * 1024 * 2,
}}
validators={[Validators.minLength(1, '{i18n.imageUploadValidationError}')]}
/>
<div className="zent-form-actions">
<Button type="primary" htmlType="submit">
{i18n.submit}
</Button>
<Button type="primary" outline onClick={resetForm}>
{i18n.reset}
</Button>
</div>
</Form>
);
}
ReactDOM.render(<App />, mountNode);
```