正则表达式进行页面表单验证功能

正则表达式（Regular Expression）是一种处理字符串的强大工具，它可以用于字符串的匹配、搜索、替换和分割等操作。在网站制作过程中，利用正则表达式可以实现表单验证的功能，保证用户填写的数据符合规范。

以下是正则表达式进行页面表单验证的完整攻略：

1. 确认需要验证的表单项，例如：用户名、密码、邮箱、手机号码等等

2. 编写验证函数，将要验证的表单项和相应的正则表达式作为参数传入函数中，核心代码如下：

function checkInput(inputValue, reg) {  
   if (reg.test(inputValue.trim())) {
     return true;
   } else {
     return false;
   }
}

其中，inputValue为要验证的表单项输入的值，reg为对应的正则表达式。该函数会返回布尔值，true则表示验证通过，false表示验证失败。

1. 编写正则表达式，匹配需要验证的表单项的规范，例如：

（1）验证用户名是否由6-18位数字、字母或下划线组成：

/^[a-zA-Z0-9_]{6,18}$/

（2）验证密码是否由包含大小写字母、数字、特殊字符（如：@、#、$等）的8-16位字符组成：

/^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[@$!%*?&])[A-Za-z\d@$!%*?&]{8,16}$/

（3）验证邮箱是否符合规范：

/^([a-zA-Z0-9_\.-]+)@([a-zA-Z0-9_\.-]+)\.([a-zA-Z]{2,5})$/

（4）验证手机号是否为11位数字，且开头为1：

/^1\d{10}$/

1. 在表单提交时，调用验证函数，根据返回结果进行相应的操作，例如：

document.querySelector('#submitBtn').addEventListener('click', function() {
   var username = document.querySelector('#username').value;
   var password = document.querySelector('#password').value;
   var email = document.querySelector('#email').value;
   var phone = document.querySelector('#phone').value;

   if (!checkInput(username, /^[a-zA-Z0-9_]{6,18}$/)) {
     // 用户名不合法，进行提示或其他操作
     alert('用户名不合法');
     return;
   }

   if (!checkInput(password, /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[@$!%*?&])[A-Za-z\d@$!%*?&]{8,16}$/)) {
     // 密码不合法，进行提示或其他操作
     alert('密码不合法');
     return;
   }

   if (!checkInput(email, /^([a-zA-Z0-9_\.-]+)@([a-zA-Z0-9_\.-]+)\.([a-zA-Z]{2,5})$/)) {
     // 邮箱不合法，进行提示或其他操作
     alert('邮箱不合法');
     return;
   }

   if (!checkInput(phone, /^1\d{10}$/)) {
     // 手机号码不合法，进行提示或其他操作
     alert('手机号码不合法');
     return;
   }

   // 表单数据验证通过，进行其他操作（如提交表单数据）
});

示例说明：

假设现在有一个注册表单，需要验证用户名、密码、邮箱和手机号码，同时，需要显示相应的错误信息并阻止表单提交。

用户填写表单后，当点击提交按钮时，会调用相应的验证函数，检测用户填写的数据是否符合规范。如果某项数据不符合要求，则会弹出相应的错误提示，并返回false，阻止表单提交。否则，返回true，允许进行其他操作（比如提交表单数据）。

示例代码请参考上文。