使用正则表达式模式验证输入

Question

我想像这样验证电话号码

1. 08xxxxxxxx
2. 08xxxxxxxxxxxx
3. 08xxxxxxxxxxxxxxx

第一个和第二个数字必须是08，后面是其他数字，最少10位，最多15位

我已经尝试过这段代码

<form>
<input type="tel" name="no_hp" class="form-control" pattern="[0]{1}[8]{1}[0-9]" maxlength="15" oninvalid="this.setCustomValidity('Nomor telepon harus di awali dengan 08 dan minimal 10')" required>
 
 <input type="submit">
</form>

在下面的视频中，我尝试输入089 并成功，但尝试没有至少 10 位数字

但在下面的视频中，如果我尝试输入错误的第一个数字，例如189，然后我更新为与第一个视频089 相同的正确数字，它仍然说数字是错误的。

那么为什么在我更正了数字格式（以08 开头）后，它仍然说数字是错误的？如何解决？

Answer 1

我认为您可以直接在输入字段上使用以下正则表达式作为模式，或者使用javascript 执行相同操作并向用户显示警告消息。

JS 方法

const regex = new RegExp('^08[0-9]{8,13}$', 'gm');
if (regex.test('088884444714255')) {
  console.log('valid number');
}else{
  console.log('invalid number');
}

if (regex.test('0888844447142555')) {
  console.log('valid number');
}else{
  console.log('invalid number');
}

if (regex.test('078844447142555')) {
  console.log('valid number');
}else{
  console.log('invalid number');
}

HTML 模式方法

<form>
  <input type="tel" name="no_hp" class="form-control" pattern="^08[0-9]{8,13}$" oninvalid=" this.setCustomValidity('Nomor telepon harus di awali dengan 08 dan minimal 10')" oninput="this.setCustomValidity('')" required>
  <input type="submit">
</form>