Phản hồi: xác thực đầu vào

Question

Gần đây, tôi đã bắt đầu làm việc với React và tôi gặp phải sự cố với xác thực đầu vào. Ví dụ, nó được thực hiện đơn giản trong một khung công tác khác như Angular.js thông qua các chỉ thị.

Sau khi một số nghiên cứu tôi thấy

1. newforms thư viện, có vẻ như giải pháp tốt nhất từ ​​hộp vào thời điểm hiện tại. Nhưng nó khá nặng và không chắc chắn rằng nó hiện đang được hỗ trợ (cập nhật lần cuối 7 tháng trước).
2. Một cách tiếp cận khác là gửi các sự kiện từ biểu mẫu gốc đến đầu vào của con cái và gọi phương thức xác thực trên mỗi phương thức.

Nhưng tôi không thể tìm thấy các phương pháp hay nhất mà mọi người cố gắng phát minh ra điều gì đó của riêng bạn và kết quả là bạn cần phải viết một cái gì đó của riêng mình.

Giải pháp tốt nhất để xác thực biểu mẫu là gì? Kiến trúc/khung công tác phản ứng (Flux/Redux) có cung cấp giải pháp nào không?

Cảm ơn,

Answer 1

Tôi đã làm việc với một số biểu mẫu trong React gần đây và tôi đã có trải nghiệm tương tự. Tôi nghĩ điều này sẽ làm cho React rất mới, và việc xác nhận mẫu là một vấn đề khó giải quyết nói chung. Điều này dẫn đến một loại miền Tây hoang dã của việc xác nhận biểu mẫu, nơi không có tiêu chuẩn được thiết lập và nhiều thư viện mới đang cố gắng giải quyết vấn đề (mỗi cách làm theo cách riêng của họ và đưa ra nhiều giả định).

tôi đã kết thúc bằng formsy-phản ứng (https://github.com/christianalfoni/formsy-react) mà là khá thẳng về phía trước, nhưng thực hiện một lớn giả định - mà chúng tôi muốn xác nhận đầu vào onChange. Tôi muốn đầu vào của tôi hiển thị lỗi onBlur dẫn đến tôi viết một số hàm trợ giúp để tạo hành vi đó.

Tôi chưa đào sâu vào Redux quá nhiều, nhưng dường như có một số tùy chọn tốt trong đấu trường đó (https://www.npmjs.com/package/redux-form), có thể phù hợp với nhu cầu của bạn.

Hãy cho tôi biết nếu bạn muốn xem ví dụ về các trình xác thực/trình trợ giúp biểu mẫu Formsy của tôi.

Hy vọng điều này đã giúp, hoặc ít nhất là cung cấp một số tình đoàn kết mà hình thức xác nhận trong thế giới phản ứng là, hiện tại, không rõ ràng và thiếu một tiêu chuẩn.

Answer 2

Tôi đang sử dụng giải pháp cân nhẹ và nó có thể tùy chỉnh được.

Đầu vào được xác thực trên onChange nhưng có thể được thay đổi trên bất kỳ. Chúng tôi có thể tạo thành phần tương tự cho văn bản, hộp kiểm, radio

var Input = React.createClass({ 
    getInitialState: function(){ 
    // we don't want to validate the input until the user starts typing 
    return { 
     validationStarted: false 
    }; 
    }, 
    prepareToValidate: function(){}, 
    _debounce: function(func, wait, immediate) { 
    var timeout; 
    return function() { 
     var context = this, args = arguments; 
     var later = function() { 
     timeout = null; 
     if (!immediate) func.apply(context, args); 
     }; 
     var callNow = immediate && !timeout; 
     clearTimeout(timeout); 
     timeout = setTimeout(later, wait); 
     if (callNow) func.apply(context, args); 
    }; 
    }, 
    componentWillMount: function(){ 
    var startValidation = function(){ 
     this.setState({ 
     validationStarted: true 
     }) 
    }.bind(this); 

    // if non-blank value: validate now 
    if (this.props.value) { 
     startValidation(); 
    } 
    // wait until they start typing, and then stop 
    else { 
     this.prepareToValidate = _self._debounce(startValidation, 1000); 
    } 
    }, 
    handleChange: function(e){ 
    if (!this.state.validationStarted) { 
     this.prepareToValidate(); 
    } 
    this.props.onChange && this.props.onChange(e); 
    }, 
    render: function(){ 
    var className = ""; 
    if (this.state.validationStarted) { 
     className = (this.props.valid ? 'Valid' : 'Invalid'); 
    } 
    return (
     <input 
     {...this.props} 
     className={className} 
     onChange={this.handleChange} /> 
    ); 
    } 
}); 

Thành phần của chúng tôi nơi chúng tôi sẽ hiển thị biểu mẫu. Chúng tôi có thể thêm nhiều quy tắc xác thực như muốn

var App = React.createClass({ 
    getInitialState: function(){ 
    return {email: ""}; 
    }, 
    handleChange: function(e){ 
    this.setState({ 
     email: e.target.value 
    }) 
    }, 
    validate: function(state){ 
    return { 
     email: /^([\w-]+(?:\.[\w-]+)*)@((?:[\w-]+\.)*\w[\w-]{0,66})\.([a-z]{2,6}(?:\.[a-z]{2})?)$/.test(state.email) 
    } 
    }, 
    render: function(){ 
    var valid = this.validate(this.state); 
    return (
     <div> 
     <Input valid={valid.email} 
       value={this.state.email} 
       onChange={this.handleChange} 
       placeholder="example@example.com"/> 
     </div> 
    ); 
    } 
}); 

Điều này khá đơn giản và có thể tùy chỉnh và cho các dự án nhỏ hoạt động rất tốt. Nhưng nếu chúng tôi là một dự án lớn và có nhiều hình thức khác nhau, để viết mỗi lần thành phần ứng dụng với trình xử lý không phải là lựa chọn tốt nhất