Textfields 구성 요소 번호 유효성 검사 반응이 js

Question

텍스트 필드가 3 개 있습니다. 숫자를 수락하기 만하면됩니다. 누군가가 텍스트를 입력하고 계속하면 응용 프로그램에 숫자 만 허용된다는 오류가 표시되어야합니다.

다음 코드는 텍스트 필드가 비어 있고 그 코드가 비어 있지만 사용자가 텍스트 또는 숫자를 입력했는지 확인하는 다른 유효성 검사가 보류 중이고 고정되어있는 경우 오류 메시지를 표시합니다.

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

이를 사용하여 입력 텍스트에서 사용자를 방지 할 수 있습니다 : 당신은 state에 오류 객체를 초기화하는하지만 this.state.and_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.and_error} 
    floatingLabelText="And" 
/> 

Answer 2

. 어느 쪽이든 당신은 this.state = { and_error: "" }처럼 생성자에서 오류를 초기화하거나 초기화해야 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; 
} 

희망 등이 것이다 HEPS에 따라서

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

같이 !

Answer 3

이 코드를 validate 함수에 추가해보십시오. 이 같은이 검증을 추가 RegexExpression 파일에서

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; 
    } 

:

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

Answer 4

을 사용자를 제한 할 수 있습니다 텍스트 제기 구성 요소에서 원하는 텍스트 필드 나 숫자의 유효성을 검사하는 정규 표현식을 사용할 수 있습니다

자바 스크립트를 사용하여 텍스트를 입력하십시오 test 방법은 아래와 같습니다