Helpex - Trao đổi & giúp đỡ Đăng nhập
9

Trong ReactJS, cách chính xác để xác minh xem văn bản đã nhập ( <TextField/>) có ở định dạng email hay không, chẳng hạn như với @?

Tôi có ứng dụng được kết nối với MongoDB, vì vậy tôi nên thực hiện kiểm tra định dạng email ở phía máy khách hay phía máy chủ?

Bất kỳ ví dụ hoặc hướng dẫn sẽ được đánh giá rất cao.

Cảm ơn bạn trước!

9 hữu ích 1 bình luận 22k xem chia sẻ
13

Mọi người đã thực hiện một số điểm hợp lệ ở đây, Và bạn sẽ phải làm theo hầu hết những điểm này để xác thực dữ liệu.

Dù sao, Hiện tại, tôi nghĩ rằng đây sẽ là cách tốt hơn để tiếp tục xác thực email.

  1. Đặt <input type="email" />để trình duyệt có thể xác thực email cho bạn
  2. Xác thực nó bằng javascript
  3. Thực hiện xác thực trên máy chủ

Bạn có thể kết xuất đầu vào như

<input type="email" value={ this.state.email } onChange={ handleOnChange } />

handleOnChangemã chức năng của bạn sẽ trông giống như thế này

let handleOnChange = ( email ) => {

    // don't remember from where i copied this code, but this works.
    let re = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;

    if ( re.test(email) ) {
        // this is a valid email address
        // call setState({email: email}) to update the email
        // or update the data in redux store.
    }
    else {
        // invalid email, maybe show an error to the user.
    }

}

LƯU Ý: Tùy thuộc vào cách bạn thiết lập mọi thứ mà bạn có thể phải sử dụng this.handleOnChangethay thế handleOnChangevà cũng ràng buộc nó constructornhư thế nàothis.handleOnChange = this.handleOnChange.bind(this);

...

Và khi bạn thực hiện yêu cầu đăng lên máy chủ / api với email address, Xác thực email trên máy chủ và nếu hợp lệ, hãy lưu trữ nó trong cơ sở dữ liệu nếu không sẽ phản hồi lại với lỗi.

Bạn có thể chỉ cần các thư viện xác thực nút * của google và sử dụng chúng để xử lý tất cả các xác thực, bạn có thể sử dụng mã xác thực email từ đây ... hoặc xác thực nó theo cách bạn muốn.

13 hữu ích 0 bình luận chia sẻ
2

Nó có thể được thực hiện bằng cách sử dụng javascript + xác thực biểu thức chính quy

Bạn có thể tắt nút gửi hoặc thêm cảnh báo bằng văn bản cho đến khi đầu vào email khớp với định dạng regEx.

HTML:

<input type="text" name="email" id="email" placeholder="Email" onKeyPress="emailVerify(this.id)">

JAVASCRIPT:

function emailVerify(x){

var testEmail =    /^[ ]*([^@\s]+)@((?:[-a-z0-9]+\.)+[a-z]{2,})[ ]*$/i;
  jQuery('input').bind('input propertychange', function() {
    if (testEmail.test(jQuery(this).val()))
    {
       // action to be performed if email is valid

     } 
     else
     {
       // action to be performed if email is invalid - like disabling the submit button
     }
   });
}

Hàm emailVerify()phải được gọi trong mỗi lần "nhấn phím" bên trong hộp văn bản email.

Hàm tính năng .bind()lại tất cả sự kiện phím xuống, tức là bất cứ khi nào bạn nhấn phím, nó sẽ kiểm tra xem đầu vào hộp văn bản email của bạn có khớp với biểu thức chính quy hay không (testEmail charecters)

Email có dạng me@me.co sẽ được coi là email trong khi email me/@me.co sẽ bị coi là không hợp lệ

2 hữu ích 1 bình luận chia sẻ
2

Nó phụ thuộc vào cách thành phần TextField của bạn được triển khai, nhưng thông thường với React, bạn lấy giá trị trường nhập văn bản thông qua sự kiện onChange và đặt nó ở trạng thái thành phần hoặc ở một nơi khác (như cửa hàng redux của bạn). Mã của bạn có thể trông giống như sau:

<input
    type="text"
    value={this.state.email}
    onChange={event => this.setState({email: event.target.value})
/>

Giờ đây, bạn có thể chỉ cần kiểm tra tính hợp lệ của email trong trình xử lý onChange của mình, nhưng điều đó có thể quá đắt (vì về cơ bản bạn phải kiểm tra lại mỗi lần nhấn phím). Một giải pháp khác sẽ là kiểm tra khi thành phần mất tiêu điểm, như sau:

<input
    type="text"
    value={this.state.email}
    onChange={event => this.setState({email: event.target.value})
    onBlur={() => this.setState({
        emailIsValid: isValidEmailAddress(this.state.email)
    })
/>

Và sau đó, bạn có thể nhận phản hồi cho người dùng theo giá trị của boolean emailIsValid trong trạng thái thành phần của bạn, ví dụ với một lớp css.

CHỈNH SỬA: Salehen Rahman đã đưa ra quan điểm hợp lệ về tùy chọn type = "email". Đoạn văn dưới đây có thể không liên quan đến thế.

Đối với việc triển khai isValidEmailAddress, một biểu thức chính quy là một lựa chọn hợp lý. Có nhiều hoặc ít các biểu thức chính quy phức tạp để xác định email hợp lệ nhưng chỉ cần có một chuỗi không trống, sau đó là @, sau đó một chuỗi không trống khác là một ước tính tốt. Vì vậy, một cái gì đó như vậy có thể làm:

function isValidEmailAddress(address) {
    return !! address.match(/.+@.+/);
}
2 hữu ích 0 bình luận chia sẻ
1

Xác thực biểu mẫu nên được thực hiện ở cả hai phía: phía máy khách và phía máy chủ, đây là một ví dụ điển hình để hiểu cách triển khai xác thực biểu mẫu trong React, sử dụng kiến ​​trúc Flux

1 hữu ích 0 bình luận chia sẻ
0

Bạn có thể sử dụng Thư viện Joi, nó rất đơn giản và bao gồm tất cả các trường hợp khác nhau cho biểu mẫu của https://www.npmjs.com/package/joi bạn, bạn cũng có thể sử dụng nó với bản đánh máy. đây là một việc đơn giản: tạo một lược đồ chứa tất cả các đầu vào của bạn

schema = Joi.object({
 name: Joi.string().required(),
 email: Joi.string().email({ tlds: { allow: false } }).required()
});

trong handleInputleChange của bạn, bạn có thể gọi hàm xác thực để xác thực lược đồ của mình.

const errors = schema.validate(YourInputClass, {
  abortEarly: false,
  stripUnknown: { objects: true },
});

Bên trong errorsbiến, bạn sẽ tìm thấy một error objectbiến chứa detailsmô tả tất cả các thông báo lỗi liên quan nếu biểu mẫu của bạn không hợp lệ.

0 hữu ích 0 bình luận chia sẻ
0
 function isValiEmail(val) {
    let regEmail = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
    if (!regEmail.test(val)) {
      return 'Invalid Email Address';
    }
  }
0 hữu ích 0 bình luận chia sẻ
loading
Không tìm thấy câu trả lời bạn tìm kiếm? Duyệt qua các câu hỏi được gắn thẻ javascript html mongodb reactjs react-native , hoặc hỏi câu hỏi của bạn.

Có thể bạn quan tâm

loading