TextFields组件编号验证React JS

Question

我有3个Textfields，我想做的只是接受号码，因此，如果有人放置文本并单击继续执行申请，则应显示一个错误，说明只有数字。

以下代码如果TextField为空，则显示错误消息，但这是可以检查用户输入文本或数字是否已悬挂的另一个验证。

import React from 'react';
import RaisedButton from 'material-ui/RaisedButton';
import TextField from 'material-ui/TextField';
import Divider from 'material-ui/Divider';
import cr from '../styles/general.css';

export default class Example extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      buy_: '',
      and_: '',
      save_: '',
    };
    this.handleChange = this.handleChange.bind(this);
  }
  handleChange(event, index, value) {
    this.setState({value});
  }

  clear() {
    console.info('Click on clear');
    this.setState({
      buy_: '',
      and_: '',
      save_: ''
    });
  }
  validate() {
    let isError = false;
    const errors = {
      descriptionError: ''
    };
    if (this.state.buy_.length < 1 || this.state.buy_ === null) {
      isError = true;
      errors.buy_error = 'Field requiered';
    }
    if (this.state.and_.length < 1 || this.state.and_ === null) {
      isError = true;
      errors.and_error = 'Field requiered';
    }
    if (this.state.save_.length < 1 || this.state.save_ === null) {
      isError = true;
      errors.save_error = 'Field requiered';
    }
    this.setState({
      ...this.state,
      ...errors
    });
    return isError;
  }
  onSubmit(e){
    e.preventDefault();
    // this.props.onSubmit(this.state);
    console.log('click onSubmit')
    const err = this.validate();
    if (!err) {
      // clear form
      this.setState({
        buy_error: '',
        and_error: '',
        save_error: ''
      });
      this.props.onChange({
        buy_: '',
        and_: '',
        save_: ''
      });
    }
  }
  render() {

    return (
      <div className={cr.container}>
        <div className ={cr.boton}>
          <Divider/>
          <br/>
        </div>
        <div className={cr.rows}>
          <div>
            <TextField
              onChange={(e) => {this.setState({buy_: e.target.value})}}
              value={this.state.buy_}
              errorText={this.state.buy_error}
              floatingLabelText="Buy"
            />
          </div>
          <div>
            <TextField
              onChange={(e) => {this.setState({and_: e.target.value})}}
              value={this.state.and_}
              errorText={this.state.and_error}
              floatingLabelText="And"
            />
          </div>
          <div>
            <TextField
              onChange={(e) => {this.setState({save_: e.target.value})}}
              value={this.state.save_}
              errorText={this.state.save_error}
              floatingLabelText="Save"
            />
          </div>
        </div>
        <div className={cr.botonSet}>
          <div className={cr.botonMargin}>
            <RaisedButton
              label="Continue"
              onClick={e => this.onSubmit(e)}/>
          </div>
          <div>
            <RaisedButton
              label="Clear"
              secondary ={true}
              onClick={this.clear = this.clear.bind(this)}
            />
          </div>
        </div>
      </div>
    );
  }
}

有人可以帮助我。

预先感谢。

Answer 1

您可以通过以下方式防止用户输入文本：

<TextField 
    onChange={(e) => {  
        if(e.target.value === '' || /^d+$/.test(e.target.value)) { 
            this.setState({and_: e.target.value})
        } else { 
            return false; 
        } 
    }}
    value={this.state.and_}
    errorText={this.state.and_error}
    floatingLabelText="And"
/>

Answer 2

TextField组件可以使用JavaScript test方法限制用户输入文本：

<TextField
  onChange={(e) => {
     if(e.target.value == '' || (/D/.test(e.target.value))) {
         this.setState({and_: e.target.value})}
     }
     else {
         return false;
     }
  }
  value={this.state.and_}
  errorText={this.state.and_error}
  floatingLabelText="And"
/>

Answer 3

尝试在验证函数中添加此代码。

您可以使用Regex来验证您的字段的文本或数字：

  import * as RegExp from './RegExpression';
  validate() {
    let isError = false;
    const errors = {
      descriptionError: ''
    };
    if (this.state.buy_ && !RegExp.NAME.test(this.state.buy_)) {
      // validation check if input is name
      isError = true;
      errors.buy_error = 'Invalid name';
    }
    if (this.state.and_ && !RegExp.NUMBER.test(this.state.and_)) {
      // validation check if input is number
      isError = true;
      errors.and_error = 'Invalid Number';
    }
    this.setState({
      ...this.state,
      ...errors
    });
    return isError;
  }

在Regexexpression文件中添加以下验证：

 export const NAME = /^[a-z ,.'-()"-]+$/i;
 export const NUMBER = /^[0-9]*$/ ;

Answer 4

您不是在state中初始化错误对象，而是在TextField中访问为this.state.and_error。您应该在 this.state = { and_error: "" }之类的构造函数中初始化错误或初始化 error对象

this.state = { 
    error: { 
       and_error: "",
       buy_error: "",
       save_error: "" 
    } 
}

所以在您的TextField

中

<TextField
      onChange={(e) => {
        if(e.target.value === "" || (/D/.test(e.target.value))) {
           this.setState({and_: e.target.value})}
        }
        else {
          return false;
        }
      }
      value={this.state.and_}
      errorText={this.state.error.and_error} // If initialised error string access as this.state.and_error
      floatingLabelText="And"
/>

您的验证功能就像

validate() {
    let isError = false;
    const errors = this.state.errors;
    if (this.state.buy_.toString().length < 1 || this.state.buy_ === null) {
      isError = true;
      errors.buy_error = 'Field requiered';
    }
    if (this.state.and_.toString().length < 1 || this.state.and_ === null) {
      isError = true;
      errors.and_error = 'Field requiered';
    }
    if (this.state.save_.toString().length < 1 || this.state.save_ === null) {
      isError = true;
      errors.save_error = 'Field requiered';
    }
    this.setState({errors});
    return isError;
}

希望这会带您！

Answer 5

您可以使用React-validation进行所有验证，并为验证设置规则