UNPKG

zent

Version:

一套前端设计语言和基于React的实现

73 lines (66 loc) 1.89 kB
/* 通过formValidations属性添加自定义校验规则 */ import React, { Component } from 'react'; import Form from '../src'; import '../assets/index.scss'; const { Field, createForm } = Form; const renderField = props => ( <div className="zent-form__control-group"> <label className="zent-form__control-label">{props.label}</label> <div className="zent-form__controls"> <input {...props} /> {props.isTouched && props.error && <span className="zent-form__help-block">{props.error}</span>} </div> </div> ); class CustomRuleForm extends Component { render() { return ( <Form prefix="zent" horizontal> <Field name="a" type="number" component={renderField} label="a" value="2" validations={{ required: true, isMoreThan: 'b' }} validationErrors={{ required: '不能为空', isMoreThan: 'a必须大于b' }} /> <Field name="b" type="number" component={renderField} label="b" value="" validations={{ required: true, isLessThan: 'a' }} validationErrors={{ required: '不能为空', isLessThan: 'b必须小于a' }} /> <div className="zent-form__form-actions"> <button type="submit">提交</button> </div> </Form> ); } } const CustomRuleFormContainer = createForm({ formValidations: { isMoreThan(values, value, otherField) { return Number(value) > Number(values[otherField]); }, isLessThan(values, value, otherField) { return Number(value) < Number(values[otherField]); } } })(CustomRuleForm); export default class Simple extends Component { render() { return ( <div> <h2>添加自定义校验规则</h2> <hr /> <CustomRuleFormContainer /> </div> ); } }