在onChangeText中处理正则表达式电话号码的最佳方法反应原生[重复]

Question

我想处理onChangeTextTextInputReact native中的电话号码字段，

来自this answer，我可以使用^08[0-9]{9,}$ 模式，但问题出在第一个数字上，正则表达式不允许0，因为正则表达式模式上的08，如果我添加0|08...，正则表达式允许0 但它允许第二个数字上的任何数字，而不是 08。

我的问题： 强制正则表达式处理第一个数字是 0 和第二个数字是 8 的最佳方法是什么？所以我得到 08xxxxxxxxxx（当 x 是另一个数字 0-9 时）

这是我在reactJS 中的当前代码示例，您可以感觉到我在输入 0 后可以输入任何数字，而对于新建议的正则表达式 (^0|08[0-9]{9,}$)，我不能在 0 之后再输入任何数字,

注意：我不知道为什么我的问题被标记为重复，因为重复并不能帮助我解决问题

class NameForm extends React.Component {
  constructor(props) {
    super(props);
    this.state = {value: ''};

    this.handleChange = this.handleChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
  }

  handleChange(event) {
    let reg = /^0|08[0-9]{9,}$/
    if(reg.test(event.target.value)){
      this.setState({value: event.target.value});
    }
  }

  handleSubmit(event) {
    alert('A name was submitted: ' + this.state.value);
    event.preventDefault();
  }

  render() {
    return (
      <form onSubmit={this.handleSubmit}>
        <label>
          Phone:
          <input type="text" value={this.state.value} onChange={this.handleChange} />
        </label>
        <input type="submit" value="Submit" />
      </form>
    );
  }
}

ReactDOM.render(
  <NameForm />,
  document.getElementById('root')
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

<div id="root"></div>

Answer 1

你必须在正则表达式中使用 groups。

您的问题的解决方案：/^(0|08|08[0-9]{1,9})$/

说明：捕获是否为0 或08 或08x 或08xx 或08xxx 或08xxxx ...最多08xxxxxxxxx（即最多9个x，x可以是任何个位数）。

Answer 2

您需要使用括号来显示备选方案的开始和结束位置。如果你不这样做，它将扩展到整个正则表达式，包括开始/结束断言。因此，在您的正则表达式^0|08[0-9]{9,}$ 中，第一个选择是字符串开头的零，忽略后面的任何内容，第二个选择是字符串末尾的 08xxxxxxxx，忽略之前的任何内容。如果您想单独匹配 0 以及 08xxxxxxxxx，请尝试 ^(0|08[0-9]{9,})$