输入上的 CNIC 模式

CNIC 是 Pakistan National Database and Registration Authority (NADRA) 发行的身份证号码。在 Pakistan 中，CNIC 是合法的身份证明，它是 Pakistan 全国范围内识别公民身份的唯一标识。CNIC 包含 13 个数字，其中前 5 个数字是区域代码，后 8 个数字是个人代码。

在开发过程中，有许多场景需要用户输入 CNIC，例如注册、登录等等。如何验证 CNIC 的输入格式是否正确是一个需要开发者关注的问题。

以下是一种输入上的 CNIC 模式，开发者可以参考下面的代码片段：

<input type="text" pattern="[0-9]{5}-[0-9]{7}-[0-9]{1}">

这段代码中，pattern 属性是 input 元素的一个属性，它用来指定在输入数据时所使用的正则表达式模式。在上面的代码中，正则表达式模式是 [0-9]{5}-[0-9]{7}-[0-9]{1}，这个模式可以判断 CNIC 是否符合正确的格式，即前 5 位数字，接着是连字符（-），后 7 位数字，再接着是一个连字符（-），最后一位是数字。

这种模式不仅可以用在 input 元素上，还可以用在其他表单元素上，比如 textarea 元素、select 元素等等。

开发者可以通过 JavaScript 进一步验证 CNIC 是否有效。例如，可以使用 RegExp 对象验证 CNIC 是否符合实际情况：

const cnicPattern = /^[0-9]{5}-[0-9]{7}-[0-9]{1}$/;
const cnicInput = document.querySelector('#cnic-input');

cnicInput.addEventListener('blur', () => {
  if (!cnicPattern.test(cnicInput.value)) {
    console.log('Invalid CNIC!');
  }
});

这段代码中，我们使用了 RegExp 对象来创建 CNIC 的正则表达式模式，然后使用 blur 事件监听器监控 input 元素的焦点。如果输入的值不符合 CNIC 的格式，就会在控制台输出 "Invalid CNIC!"。

总结：在开发过程中，验证用户输入数据的格式是非常重要的。开发者可以使用表单元素的 pattern 属性和 RegExp 对象来验证 CNIC 的输入格式。