帮酷LOGO
  • 显示原文与译文双语对照的内容
Simple validator for forms designed with material-ui components.

  • 源代码名称:react-material-ui-form-validator
  • 源代码网址:http://www.github.com/NewOldMax/react-material-ui-form-validator
  • react-material-ui-form-validator源代码文档
  • react-material-ui-form-validator源代码下载
  • Git URL:
    git://www.github.com/NewOldMax/react-material-ui-form-validator.git
  • Git Clone代码到本地:
    git clone http://www.github.com/NewOldMax/react-material-ui-form-validator
  • Subversion代码到本地:
    $ svn co --depth empty http://www.github.com/NewOldMax/react-material-ui-form-validator
    Checked out revision 1.
    $ cd repo
    $ svn up trunk
  • 用于材质用户界面表单的验证组件

    licensenpm versionBuild Status

    警告警告

    核心验证被移动到 react-form-validator-core 包。 你需要安装它以便使用这里软件包兼容版本将自动安装。

    演示程序

    版本

    • <= 1.x - 支持材质用户界面 <= 0.x
    • => 2.x - 支持材质用户界面> = 1.x ( 实验支持,可以以通过 npm i react-material-ui-form-validator@next )
    • => 1.0.1 - 支持响应 16

    用于材料用户界面的react-form-validator-core的实现。

    支持的类型:

    某些规则可以接受额外的参数,例如:

    <TextValidator
     {...someProps}
     validators={['minNumber:0', 'maxNumber:255', 'matchRegexp:^[0-9]$']}/>

    示例

    用法

    你可以传递任何字段组件的道具,但是在验证错误发生时,errorText 道具将被替换。 你的组件必须提供一个主题。

    importReactfrom'react';importRaisedButtonfrom'material-ui/RaisedButton';import { TextValidator, ValidatorForm } from'react-material-ui-form-validator';classMyFormextendsReact.Component {
     constructor(props) {
     super(props);
     this.state= {};
     this.handleChange=this.handleChange.bind(this);
     }
     handleChange(event) {
     constemail=event.target.value;
     this.setState({ email });
     }
     handleSubmit() {
     // your submit logic }
     render() {
     const { email } =this.state;
     return (
     <ValidatorForm
     ref="form" onSubmit={this.handleSubmit}
     onError={errors=>console.log(errors)}
     ><TextValidator
     floatingLabelText="Email" onChange={this.handleChange}
     name="email" value={email}
     validators={['required', 'isEmail']}
     errorMessages={['this field is required', 'email is not valid']}
     /><RaisedButton type="submit"/></ValidatorForm> );
     }
    }

    你可以添加自定义规则:

    importReactfrom'react';importRaisedButtonfrom'material-ui/RaisedButton';import { TextValidator, ValidatorForm } from'react-material-ui-form-validator';classResetPasswordFormextendsReact.Component {
     constructor(props) {
     super(props);
     this.state= {
     user: {},
     };
     this.handleChange=this.handleChange.bind(this);
     }
     componentWillMount() {
     // custom rule will have name 'isPasswordMatch'ValidatorForm.addValidationRule('isPasswordMatch', (value) => {
     if (value !==this.state.user.password) {
     returnfalse;
     }
     returntrue;
     });
     }
     handleChange(event) {
     const { user } =this.state;
     user[event.target.name] =event.target.value;
     this.setState({ user });
     }
     handleSubmit() {
     // your submit logic }
     render() {
     const { user } =this.state;
     return (
     <ValidatorForm
     onSubmit={this.handleSubmit}
     ><TextValidator
     floatingLabelText="Password" onChange={this.handleChange}
     name="password" type="password" validators={['required']}
     errorMessages={['this field is required']}
     value={user.password}
     /><TextValidator
     floatingLabelText="Repeat password" onChange={this.handleChange}
     name="repeatPassword" type="password" validators={['isPasswordMatch', 'required']}
     errorMessages={['password mismatch', 'this field is required']}
     value={user.repeatPassword}
     /><RaisedButton type="submit"/></ValidatorForm> );
     }

    目前材质用户界面不支持开关的内置错误消息,但你可以轻松添加自己的:

    importReactfrom'react';import { red300 } from'material-ui/styles/colors';importCheckboxfrom'material-ui/Checkbox';import { ValidatorComponent } from'react-material-ui-form-validator';classCheckboxValidatorElementextendsValidatorComponent {
     render() {
     const { errorMessages, validators, requiredError, value, ...rest } =this.props;
     return (
     <div><Checkbox
     {...rest}
     ref={(r) => { this.input= r; }}
     /> {this.errorText()}
     </div> );
     }
     errorText() {
     const { isValid } =this.state;
     if (isValid) {
     returnnull;
     }
     conststyle= {
     right:0,
     fontSize:'12px',
     color: red300,
     position:'absolute',
     marginTop:'-25px',
     };
     return (
     <div style={style}> {this.getErrorMessage()}
     </div> );
     }
    }exportdefaultCheckboxValidatorElement;
    componentWillMount() {
     ValidatorForm.addValidationRule('isTruthy', value=> value);
     }...<CheckboxValidatorElement
     ... validators=['isTruthy']
     errorMessages=['this field is required']
     checked={value}
     value={value} <---- you must provide this prop, it will be used only for validation
     />
    高级用法

    这个组件涵盖了我所有的需求,但可以自由。




    Copyright © 2011 HelpLib All rights reserved.    知识分享协议 京ICP备05059198号-3  |  如果智培  |  酷兔英语