用於電子郵件驗證的 RegExp 無法正確讀取字符串（使用 React，沒有 JSX）

Question

我正在嘗試根據傳遞的電子郵件的有效性啟用或禁用我的“提交”按鈕。 但是，我使用的 RegExp 表達式沒有正確讀取字符串。 我已經嘗試使用 email.length > 0 測試我的 isWorking() 函數，以確保傳遞給 isWorking() 的任何內容確實是一個字符串，我們在那里很好，但無論輸入如何，RegExp 總是返回 false收到。 我在這個應用程序中使用沒有 JSX 的 React。 任何幫助都將不勝感激。 非常感謝！

    const validEmailRegex = RegExp(/^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/);

    class Signup extends React.Component {

    constructor() {
       super();
       this.state = {
       email: ""
    };
       this.handleSubmit = this.handleSubmit.bind(this);
    }

    isWorking () {
       const email = event.target;
       //if (email.length > 0) {
       //  return false;
       // }
       // return true;

    if (validEmailRegex.test(email) === true) {
       return false;
       }
       return true;
    }

    handleSubmit(event) {
        event.preventDefault();

    if (!event.target.checkValidity()) {
        this.setState({
        invalid: true,
        displayErrors: true, 
    });
    return;
    }

    const form = event.target;
    const data = new FormData(form);

    for (let name of data.keys()) {
        const input = form.elements[name];
        const parserName = input.dataset.parse;
        console.log('parser name is', parserName);

        if (parserName) {
        const parsedValue = inputParsers[parserName](data.get(name));
        data.set(name, parsedValue);
        }
    }

    this.setState({
        res: stringifyFormData(data),
        invalid: false,
        displayErrors: false, 
    });
}

  render() {

     const { res, invalid, displayErrors } = this.state;

     //pass data to the button for disabling or not 
     const isEnabled = this.isWorking();

      return (

      React.createElement("div", { className: "container" },

      React.createElement("div", { className: "row" },

        React.createElement("form", { onSubmit: this.handleSubmit, noValidate: true, className: displayErrors ? 'displayErrors' : '' },
          React.createElement("input", { className: "form-control", name: "formEmail", id: "formEmail", type: "email", placeholder: "email"}), 
        ),

        React.createElement("span", { className: "span"},
          React.createElement("fieldset", { className: "form-group" },
            React.createElement(Link, { className: "nav-link", activeClassName: "nav-link-active", to: "/contact" },

              React.createElement("button", { className: "button1", disabled: isEnabled, type: "button"}, "next")
            ),
          )
        ),
    ),
  )
);
}
}

Answer 1

您的isWorking()不會從任何地方接收事件。 此外， event.target 將是一個 HTML 元素，絕對不是輸入值。 對於表單，您執行event.target.elements["<name_of_input>"] （此處為 formEmail 的輸入名稱）以獲取輸入值。