Reactjs - Mẫu xác nhận đầu vào

Question

hình thức trang Liên hệ của tôi là như sau,

<form name="contactform" onSubmit={this.contactSubmit.bind(this)}> 
    <div className="col-md-6"> 
    <fieldset> 
     <input ref="name" type="text" size="30" placeholder="Name"/> 
     <br/> 
     <input refs="email" type="text" size="30" placeholder="Email"/> 
     <br/> 
     <input refs="phone" type="text" size="30" placeholder="Phone"/> 
     <br/> 
     <input refs="address" type="text" size="30" placeholder="Address"/> 
     <br/> 
    </fieldset> 
    </div> 
    <div className="col-md-6"> 
    <fieldset> 
     <textarea refs="message" cols="40" rows="20" 
       className="comments" placeholder="Message"/> 
    </fieldset> 
    </div> 
    <div className="col-md-12"> 
    <fieldset> 
     <button className="btn btn-lg pro" id="submit" 
       value="Submit">Send Message</button> 
    </fieldset> 
    </div> 
</form> 

Cần thêm xác nhận cho tất cả các lĩnh vực. Bất cứ ai có thể giúp tôi để thêm xác nhận trong hình thức phản ứng này?

Answer 1

Bạn nên tránh sử dụng refs, bạn có thể làm điều đó với chức năng onChange. Trên mọi thay đổi, cập nhật trạng thái cho trường đã thay đổi.

Sau đó, bạn có thể dễ dàng kiểm tra xem trường đó trống hay bất cứ điều gì bạn muốn.

Bạn có thể làm một cái gì đó như thế này:

class Test extends React.Component { 
    constructor(props){ 
     super(props); 

     this.state = { 
      fields: {}, 
      errors: {} 
     } 
    } 

    handleValidation(){ 
     let fields = this.state.fields; 
     let errors = {}; 
     let formIsValid = true; 

     //Name 
     if(!fields["name"]){ 
      formIsValid = false; 
      errors["name"] = "Cannot be empty"; 
     } 

     if(typeof fields["name"] !== "undefined"){ 
      if(!fields["name"].match(/^[a-zA-Z]+$/)){ 
       formIsValid = false; 
       errors["name"] = "Only letters"; 
      }   
     } 

     //Email 
     if(!fields["email"]){ 
      formIsValid = false; 
      errors["email"] = "Cannot be empty"; 
     } 

     if(typeof fields["email"] !== "undefined"){ 
      let lastAtPos = fields["email"].lastIndexOf('@'); 
      let lastDotPos = fields["email"].lastIndexOf('.'); 

      if (!(lastAtPos < lastDotPos && lastAtPos > 0 && fields["email"].indexOf('@@') == -1 && lastDotPos > 2 && (fields["email"].length - lastDotPos) > 2)) { 
       formIsValid = false; 
       errors["email"] = "Email is not valid"; 
      } 
     } 



     this.setState({errors: errors}); 
     return formIsValid; 
    } 

    contactSubmit(e){ 
     e.preventDefault(); 
     if(this.handleValidation()){ 
      alert("Form submitted"); 
     }else{ 
      alert("Form has errors.") 
     } 

    } 

    handleChange(field, e){   
     let fields = this.state.fields; 
     fields[field] = e.target.value;   
     this.setState({fields}); 
    } 

    render(){ 
     return (
      <div>   
       <form name="contactform" className="contactform" onSubmit= {this.contactSubmit.bind(this)}> 
        <div className="col-md-6"> 
         <fieldset> 
          <input ref="name" type="text" size="30" placeholder="Name" onChange={this.handleChange.bind(this, "name")} value={this.state.fields["name"]}/> 
          <span style={{color: "red"}}>{this.state.errors["name"]}</span> 
          <br/> 
         <input refs="email" type="text" size="30" placeholder="Email" onChange={this.handleChange.bind(this, "email")} value={this.state.fields["email"]}/> 
         <span style={{color: "red"}}>{this.state.errors["email"]}</span> 
         <br/> 
         <input refs="phone" type="text" size="30" placeholder="Phone" onChange={this.handleChange.bind(this, "phone")} value={this.state.fields["phone"]}/> 
         <br/> 
         <input refs="address" type="text" size="30" placeholder="Address" onChange={this.handleChange.bind(this, "address")} value={this.state.fields["address"]}/> 
         <br/> 
        </fieldset> 
        </div> 

       </form> 
      </div> 
    ) 
    } 
} 

React.render(<Test />, document.getElementById('container')); 

Trong ví dụ này tôi đã xác nhận cho email và tên duy nhất, bạn có thể làm tự cho phần còn lại.

Có thể có cách tốt hơn, nhưng bạn sẽ có ý tưởng.

Here is fiddle.

Hy vọng điều này sẽ hữu ích.

Answer 2

Took mã của bạn và điều chỉnh nó với thư viện react-form-with-constraints: https://codepen.io/tkrotoff/pen/LLraZp

const { FormWithConstraints, FieldFeedbacks, FieldFeedback } = ReactFormWithConstraints; 

class Form extends React.Component { 
    constructor(props) { 
    super(props); 

    this.handleChange = this.handleChange.bind(this); 
    this.contactSubmit = this.contactSubmit.bind(this); 
    } 

    handleChange(e) { 
    this.form.validateFields(e.currentTarget); 
    } 

    contactSubmit(e) { 
    e.preventDefault(); 

    this.form.validateFields(); 

    if (!this.form.isValid()) { 
     console.log('form is invalid: do not submit'); 
    } else { 
     console.log('form is valid: submit'); 
    } 
    } 

    render() { 
    return (
     <FormWithConstraints ref={form => this.form = form} onSubmit={this.contactSubmit} noValidate> 

     <div className="col-md-6"> 
      <input name="name" size="30" placeholder="Name" 
       required onChange={this.handleChange}/> 
      <FieldFeedbacks for="name"> 
      <FieldFeedback when="*"/> 
      </FieldFeedbacks> 

      <input type="email" name="email" size="30" placeholder="Email" 
       required onChange={this.handleChange}/> 
      <FieldFeedbacks for="email"> 
      <FieldFeedback when="*"/> 
      </FieldFeedbacks> 

      <input name="phone" size="30" placeholder="Phone" 
       required onChange={this.handleChange}/> 
      <FieldFeedbacks for="phone"> 
      <FieldFeedback when="*"/> 
      </FieldFeedbacks> 

      <input name="address" size="30" placeholder="Address" 
       required onChange={this.handleChange}/> 
      <FieldFeedbacks for="address"> 
      <FieldFeedback when="*"/> 
      </FieldFeedbacks> 
     </div> 

     <div className="col-md-6"> 
      <textarea name="comments" cols="40" rows="20" placeholder="Message" 
        required minLength={5} maxLength={50} 
        onChange={this.handleChange}/> 
      <FieldFeedbacks for="comments"> 
      <FieldFeedback when="*"/> 
      </FieldFeedbacks> 
     </div> 

     <div className="col-md-12"> 
      <button className="btn btn-lg">Send Message</button> 
     </div> 
     </FormWithConstraints> 
    ); 
    } 
} 

const App =() => (
    <div className="container"> 
    <Form /> 
    </div> 
); 

ReactDOM.render(<App />, document.getElementById('app')); 

Ảnh chụp màn hình:

Đây là một cách nhanh chóng hack. Đối với một bản demo thích hợp, kiểm tra https://github.com/tkrotoff/react-form-with-constraints#examples

Answer 3

Cách dễ nhất là sử dụng phản ứng Xác thực lại-từ

Lắp đặt

npm install react-validate-form 

Đừng quên để nhập khẩu 'phản ứng Xác thực-form'

import Validate from 'react-validate-form' 

Sử dụng cơ bản

<Validate> 
     {({ validate, errorMessages }) => (
     <input onChange={validate} name="first" required /> 
     <p>{errorMessages.first[0]}</p> 
    )} 
</Validate> 

Thông tin chi tiết có thể được tìm thấy tại địa chỉ: https://github.com/lonelyplanet/react-validate-form

Answer 4

Có thể là muộn để trả lời - nếu bạn không muốn thay đổi mã hiện tại của bạn rất nhiều và vẫn có thể có mã xác nhận tương tự như tất cả trong dự án của bạn, bạn cũng có thể thử cái này - https://github.com/vishalvisd/react-validator.