React Native中如何校验TextInput输入文本的首字符为指定数字

你现有代码已经覆盖了非空、长度校验、全数字校验，缺首字符为3的规则，直接按下面的方式修改即可：

方案1：合并正则规则（推荐） #

直接调整校验正则，把首字符必须为3的规则整合进去，不需要额外写判断分支，逻辑更简洁：

const [inputs, setInputs] = React.useState({
  num: '',
});           

// 正则调整为：首字符必须为3，后续字符仅允许数字、退格
const phoneValidRegex = /^3[0-9\b]*$/;
let valid = true;

if (
  !inputs.num.trim() 
  || inputs.num.length < 10 
  || !phoneValidRegex.test(inputs.num)
) {
  handleError('Please input phone number correctly', 'phone');
  valid = false;
}

*正则校验场景下用test()比match()性能更好，test()只需要返回布尔值，不需要生成匹配结果数组。

方案2：新增独立校验条件 #

如果你不想修改原有正则逻辑，直接在原有判断条件里补充首字符校验即可：

const [inputs, setInputs] = React.useState({
  num: '',
});           

let numOnly = /^[0-9\b]+$/;
let valid = true;
// 新增首字符校验：输入内容存在时，第一位必须是字符'3'
const firstCharValid = !inputs.num || inputs.num.startsWith('3');

if (
  !inputs.num.trim() 
  || inputs.num.length < 10 
  || !inputs.num.match(numOnly)
  || !firstCharValid
) {
  handleError('Please input phone number correctly', 'phone');
  valid = false;
}

输入阶段拦截优化（可选，体验更好） #

不用等提交时才做校验，可以在用户输入阶段就拦截不符合规则的内容，同时唤起数字键盘减少无效输入：

<TextInput
  value={inputs.num}
  keyboardType="numeric"
  maxLength={11}
  onChangeText={(value) => {
    // 空值允许清空，非空值必须满足「首字符为3、全数字」才更新输入值
    if (value === '' || /^3[0-9]*$/.test(value)) {
      setInputs(prev => ({...prev, num: value}));
    }
  }}
/>

内容的提问来源于stack exchange，提问作者Irfan