数据结构
网络
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.com/
无效的 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+ 浏览量
广告