資料結構
網路
RDBMS
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理
化學
生物
數學
英語
經濟學
心理學
社會研究
時尚研究
法律研究驗證 ReactJS 中的 URL
在本文中，我們將瞭解如何在 React 應用程式中驗證 URL（統一資源定位符）。
要驗證 URL，我們將安裝用於驗證 URL 的“validator”第三方包。有效的 URL 和無效的 URL 舉例如下 -
有效的 URL - https://tutorialspoint.tw/
無效的 URL - https://www.tutorialspoint
安裝模組
npm install validator
或
yarn add validator
Npm 是管理 React 包的節點包管理器，而 yarn 是更安全、更快、更輕量的包管理器。
示例
在此示例中，我們將構建一個 React 應用程式，它從使用者那裡獲取一個 URL 輸入並檢查它是否是一個有效的 URL。
App.jsx
import React, { useState } from 'react';
import isURL from 'validator/lib/isURL';
const App = () => {
const [val, setVal] = useState('');
const [err, setErr] = useState('');
const validate = (e) => {
setVal(e.target.value);
if (isURL(val)) {
setErr('Valid URL');
} else {
setErr('Invalid URL');
}
};
return (
<div>
<h2>Tutorialspoint</h2>
<h3>Enter URL for validation: </h3>
<input value={val} onChange={validate} />
<p>{err}</p>
</div>
);
};
export default App;在上述示例中，每當使用者鍵入一個字元時，都會檢查它是否是一個有效的 URL，然後相應地顯示錯誤資訊。
輸出
這將會產生以下結果。
更新於： 2021 年 3 月 19 日
3K+ 瀏覽量
廣告