如果正则表达式字符串存储在单独的javascript文件中，则正则表达式不起作用

Question

我有一个正则表达式，用于验证使用形式提供的密码，密码必须为6个字符长，1个大写字母，1个小写字母，1个数字和1个特殊字符。
以下是表单的react组件：

import React from "react";
import { passwordRegex } from "./Constants";

export default class App extends React.Component {
  constructor() {
    super();
    this.state = {
      email: null,
      password: null,
      disableSubmitButton: true
    };
  }

  formData = {
    email: "",
    password: ""
  };

  componentWillUpdate(nextProps, nextState) {
    nextState.disableSubmitButton = !(nextState.email && nextState.password);
  }

  initializeFormData = () => {
    this.formData = {
      email: this.state.email,
      password: this.state.password
    };
  };

  verifyFormData = () => {
    if (!passwordRegex.test(this.formData.password)) {
      console.error("invalid password");
      return false;
    }

    return true;
  };

  submitForm = event => {
    event.preventDefault();
    const ifFromValid = this.verifyFormData();
    console.log(ifFromValid);
  };

  render() {
    this.initializeFormData();
    return (
      <form onSubmit={this.submitForm}>
        <br />
        <label htmlFor="email">Email </label>
        <input
          type="text"
          onChange={event => {
            this.setState({ email: event.target.value });
          }}
        />
        <br />
        <label htmlFor="password" name="password">
          Password
        </label>
        <input
          type="password"
          onChange={event => {
            this.setState({ password: event.target.value });
          }}
        />
        <br />
        <input type="submit" name="submit" id="submit"
          disabled={this.state.disableSubmitButton}
        />
      </form>
    );
  }
}

Constants.js

export const passwordRegex = new RegExp(
  "^(?=.*?[A-Z])(?=.*?[a-z])(?=.*?[0-9])(?=.*?[#?!@$%^&*-]).{6,}$",
  "g"
);

问题 ：
表单验证在第一次submit工作正常，然后在进一步submit点击时，正则表达式的行为异常。 有时它进入if (!passwordRegex.test(this.formData.password))块，有时则不输入。

奇怪的是 ：如果我在verifyFormData()函数中为passwrodRegex创建一个局部变量，则相同的代码会非常完美地工作：

      verifyFormData = () => {
        const passwordRegex = new RegExp("^(?=.*?[A-Z])(?=.*?[a-z])(?=.*?[0-9])(?=.*?[#?!@$%^&*-]).{6,}$","g");
        if (!passwordRegex.test(this.formData.password)) {
          console.error("invalid password");
          return false;
        }

        return true;
      };

Answer 1

我认为您的问题很奇怪，是'g'标志。

尝试这个：

passwordR = new RegExp("^(?=.*?[A-Z])(?=.*?[a-z])(?=.*?[0-9])(?=.*?[#?!@$%^&*-]).{6,}$","g");
console.log(passwordR.test('As!df2L$'));
console.log(passwordR.test('As!df2L$'));

输出将使您感到惊讶。 无论如何，这让我感到惊讶。 （剧透，这是true false ）

现在来看一下： JavaScript RegExp不能使用两次？

标题是“使用g标志时RegExp实例具有状态”。

最后，如果删除g标志，请查看代码是否按预期工作。

我也发现了这一点，它具有类似的信息： 为什么带有全局标志的RegExp给出错误的结果？