ReactJS输入类型url表单验证:正则表达式示例

在本教程中，你将学习如何在reactjs应用程序中进行输入型url表单验证。

我们将使用create-react-app工具创建react应用程序来运行该应用程序。

npx create-react-app react-input-form

现在，让我们来运行该应用程序

cd react-input-form
npm run start

它启动应用程序并打开localhost:3000

reactjs中的输入型URL正则表达式验证

这个例子解释了变化事件处理程序上的有效网站URL。

以下是添加验证的步骤

• 在src文件夹中创建一个组件文件夹

• 让我们创建一个名为Form的组件InputUrlComponent

• 在一个渲染函数中添加表单元素

• 创建<input> ，里面有type=url form

• 创建一个按钮来处理提交功能

• 将onChange 绑定事件附加到输入元素上

• 创建两个变量websiteurl ，用于保存输入的URL，isValid值用于检查验证成功与否。

• 创建一个状态对象，并在表单组件的构造函数中初始化websiteurl 和 isValid=false 的默认值，如下所示

  constructor(props) {
      super(props);
      this.state = {
          websiteUrl: "",
           isValid: false
      }
  }
  

• 表单输入value 与状态值绑定，如下图所示

<input  type="text" name="websiteUrl" value={websiteUrl}

• 我们需要处理用户在输入框中输入的数据，否则，输入的数据不会被显示出来，所以添加了onChange 事件处理程序的 "changeUrl "函数

onChange={this.changeUrl}

• OnChange handler in react 当用户输入文本时被调用。这将调用changeUrl函数，定义如下

  changeUrl = e => {
    const { value } = e.target;
    const isValid = !value || this.validateWebsiteUrl(value);

    this.setState({
      websiteUrl: value,
      isValid
    });
  };

这将保存输入的url值并检查验证逻辑，存储验证结果和输入的url。

• 让我们来定义url的验证逻辑

    validateWebsiteUrl = websiteUrl => {
    const urlRegEx =
      '[-a-zA-Z0-9@:%_+.~#?&//=]{2,256}(.[a-z]{2,4})?\b(/[-a-zA-Z0-9@:%_+.~#?&//=]*)?';
    return urlRegEx.test(String(websiteUrl).toLowerCase());
  };

定义regular expression pattern for URL这将使用test 方法根据正则表达式检查websiteUrl，如果url有效，返回true，否则返回false。

• 如果isValid=false，以红色显示错误文本
• 如果输入的URL是无效的，则禁用

移交输入型表单验证的完整代码

import React, { Component } from "react";

class InputUrlComponent extends Component {
  state = {
    websiteUrl: "",
    isValid: false
  };

  validateWebsiteUrl = websiteUrl => {
    const urlRegEx =
      '[-a-zA-Z0-9@:%_+.~#?&//=]{2,256}(.[a-z]{2,4})?\b(/[-a-zA-Z0-9@:%_+.~#?&//=]*)?';
    return urlRegEx.test(String(websiteUrl).toLowerCase());
  };

  changeUrl = e => {
    const { value } = e.target;
    const isValid = !value || this.validateWebsiteUrl(value);

    this.setState({
      websiteUrl: value,
      isValid
    });
  };

  submitForm = () => {
    const { websiteUrl } = this.state;
    console.log("Website URL", websiteUrl);
  };

  render() {
    const { isValid, websiteUrl } = this.state;
    return (
      <div className="App">

        <form>
          <input
            type="text"
            name="websiteUrl"
            value={websiteUrl}
            onChange={this.changeUrl}
          />
          {!this.state.isValid && (
            <div style={{ color: "red" }}>URL is invalid</div>
          )}
          <br></br>
          <button onClick={this.submitForm} disabled={!isValid}>
            Submit
          </button>
        </form>

      </div>
    );
  }
}
export default InputUrlComponent;

InputUrlcomponent在App.js 中被调用，这里是该文件:

import "./App.css";
import InputUrl from './components/Input-url';

function App() {
  return (
    <div className="App">
      <h1>React Input type url pattern validation example</h1>
      <InputUrl />
    </div>
  );
}
export default App;

这是你在屏幕上看到的输出: