Trong hướng dẫn này, chúng ta sẽ tìm hiểu cách xác thực số điện thoại trong React. Hướng dẫn này chúng tôi sẽ cung cấp cho bạn hướng dẫn từng bước về cách thêm xác thực số điện thoại trong ứng dụng js phản ứng. trong ví dụ này, chúng tôi sẽ lấy đầu vào tên, email, điện thoại và nhận xét và thêm xác thực cho yêu cầu, email và điện thoại 10 chữ số ngay bây giờ. cũng hiển thị thông báo lỗi nếu họ nhập giá trị sai.
Bước 1: Cài đặt ứng dụng React
Trước tiên cần cài đặt ứng dụng React, sử dụng lệnh bên dưới
npx create-react-app my-app
Bước 2: Tạo Thành phần DemoForm
Trong bước này, chúng tôi sẽ tạo tệp thành phần DemoForm.js và chúng tôi sẽ viết mã xác thực biểu mẫu. vì vậy hãy thêm mã như dưới đây:
import React from 'react';
class DemoForm extends React.Component {
constructor() {
super();
this.state = {
input: {},
errors: {}
};
this.handleChange = this.handleChange.bind(this);
this.handleSubmit = this.handleSubmit.bind(this);
}
handleChange(event) {
let input = this.state.input;
input[event.target.name] = event.target.value;
this.setState({
input
});
}
handleSubmit(event) {
event.preventDefault();
if(this.validate()){
console.log(this.state);
let input = {};
input["name"] = "";
input["email"] = "";
input["phone"] = "";
input["comment"] = "";
this.setState({input:input});
alert('Demo Form is submited');
}
}
validate(){
let input = this.state.input;
let errors = {};
let isValid = true;
if (!input["name"]) {
isValid = false;
errors["name"] = "Please enter your name.";
}
if (!input["email"]) {
isValid = false;
errors["email"] = "Please enter your email Address.";
}
if (typeof input["email"] !== "undefined") {
var pattern = new RegExp(/^(("[\w-\s]+")|([\w-]+(?:\.[\w-]+)*)|("[\w-\s]+")([\w-]+(?:\.[\w-]+)*))(@((?:[\w-]+\.)*\w[\w-]{0,66})\.([a-z]{2,6}(?:\.[a-z]{2})?)$)|(@\[?((25[0-5]\.|2[0-4][0-9]\.|1[0-9]{2}\.|[0-9]{1,2}\.))((25[0-5]|2[0-4][0-9]|1[0-9]{2}|[0-9]{1,2})\.){2}(25[0-5]|2[0-4][0-9]|1[0-9]{2}|[0-9]{1,2})\]?$)/i);
if (!pattern.test(input["email"])) {
isValid = false;
errors["email"] = "Please enter valid email address.";
}
}
if (!input["phone"]) {
isValid = false;
errors["phone"] = "Please enter your phone number.";
}
if (typeof input["phone"] !== "undefined") {
var pattern = new RegExp(/^[0-9\b]+$/);
if (!pattern.test(input["phone"])) {
isValid = false;
errors["phone"] = "Please enter only number.";
}else if(input["phone"].length != 10){
isValid = false;
errors["phone"] = "Please enter valid phone number.";
}
}
if (!input["comment"]) {
isValid = false;
errors["comment"] = "Please enter your comment.";
}
this.setState({
errors: errors
});
return isValid;
}
render() {
return (
<div>
<h1>React Validation For Phone Number Example</h1>
<form onSubmit={this.handleSubmit}>
<div class="form-group">
<label for="name">Name:</label>
<input
type="text"
name="name"
value={this.state.input.name}
onChange={this.handleChange}
class="form-control"
placeholder="Enter name"
id="name" />
<div className="text-danger">{this.state.errors.name}</div>
</div>
<div class="form-group">
<label for="email">Email Address:</label>
<input
type="text"
name="email"
value={this.state.input.email}
onChange={this.handleChange}
class="form-control"
placeholder="Enter email"
id="email" />
<div className="text-danger">{this.state.errors.email}</div>
</div>
<div class="form-group">
<label for="Phone">Phone:</label>
<input
type="text"
name="phone"
value={this.state.input.phone}
onChange={this.handleChange}
class="form-control"
placeholder="Enter phone"
id="email" />
<div className="text-danger">{this.state.errors.phone}</div>
</div>
<div class="form-group">
<label for="comment">Comment:</label>
<textarea
name="comment"
value={this.state.input.comment}
onChange={this.handleChange}
placeholder="Enter comment"
class="form-control" />
<div className="text-danger">{this.state.errors.comment}</div>
</div>
<input type="submit" value="Submit" class="btn btn-success" />
</form>
</div>
);
}
}
export default DemoForm;
Bước 3: Nhập thành phần
Trong bước này, chúng tôi sẽ nhập DemoFormcomponent trong tệp chính index.js. Vì vậy, hãy cập nhật tệp index.js như sau:
import React from 'react';
import ReactDOM from 'react-dom';
import * as serviceWorker from './serviceWorker';
import 'bootstrap/dist/css/bootstrap.min.css';
import DemoForm from './DemoForm';
ReactDOM.render(
<React.StrictMode>
<div className="container">
<DemoForm />
</div>
</React.StrictMode>,
document.getElementById('root')
);
serviceWorker.unregister();
Bây giờ chúng tôi đã sẵn sàng để chạy ứng dụng của mình, vì vậy hãy chạy bằng lệnh dưới đây:
npm start
Mở url dưới đây:
http://localhost:3000
Mã hóa vui vẻ !!!