时间戳

首页 > 解决方案 > 网址/链接验证

office-ui-fabric - 网址/链接验证

问题描述

当用户在没有正则表达式的 TextField 中输入一些值时，是否有方法在 Fabric 中进行链接/url 验证？

  public render(): JSX.Element {
    // tslint:disable:jsx-no-lambda
    return (
      <div style={{ padding: '2px' }}>

        <TextField          
          label="Url"          
          onGetErrorMessage={this._checkIfValid}
        />
      </div>
    );
  }

  private _checkIfValid(value: string) {    
    alert("Test");
  }

链接到 codepen：https ://codepen.io/lipalath/pen/oRaYvJ?editors=1111

标签： office-ui-fabric

解决方案

使用正则表达式应该可以帮助您验证 URL。

  public render(): JSX.Element {
    // tslint:disable:jsx-no-lambda
    return (
      <div style={{ padding: '2px' }}>

        <TextField          
          label="Url"          
          onGetErrorMessage={this._checkIfValid}
        />
      </div>
    );
  }

  private _checkIfValid(value: string) {    
    const regex = new Regexp(/^(?:http(s)?:\/\/)?[\w.-]+(?:\.[\w\.-]+)+[\w\-\._~:/?#[\]@!\$&'\(\)\*\+,;=.]+$/, 'g');
    return regex.test(value);
  }

推荐阅读