封装好的一个万能检测表单的方法

下面是封装一个万能检测表单的方法的完整攻略：

步骤一：确定需求和功能

首先，我们需要明确我们需要封装的函数应该具备哪些需求和功能。一般来说，我们会希望这个函数可以完成以下功能：

• 检测表单中各个输入框是否为空或符合要求；
• 根据表单类型和特定需求，对表单进行不同的验证，例如：是否为手机号码、是否为合法email地址、是否为数字等等；
• 在表单填写不符合要求时，会有提示信息反馈给用户；

步骤二：构思函数，确定传入参数

接下来，我们要开始构思如何实现这个检测表单的函数，并确定需要传入哪些参数。根据第一步的需求和功能，我们可以先确定以下几个传入参数：

• 表单的ID：这个参数可以帮助我们获取到表单的其他信息；
• 当前表单类型：根据表单类型和特定需求，对表单进行不同的验证；
• 输入框为空时的错误提示信息：当表单中某个输入框为空时，提示用户的错误信息；
• 输入框验证不通过时的错误提示信息：当表单中某个输入框输入不符合要求时，提示用户的错误信息；

步骤三：编写代码

有了需求和参数以后，我们就可以开始编写代码了。下面是一个简单的封装好的检测表单的方法的示例：

function validateForm(formId, formType, emptyErrMsg, wrongErrMsg) {
   //根据表单ID获取表单
   let form = document.getElementById(formId); 

   //获取表单中的所有input标签
   let inputs = form.getElementsByTagName("input"); 

   for (let i = 0; i < inputs.length; i++) { 
       let input = inputs[i]; //获取当前input标签

       //判断input类型
       switch (formType) {
           case "phone":
               validatePhone(input, emptyErrMsg, wrongErrMsg);
               break;
           case "email":
               validateEmail(input, emptyErrMsg, wrongErrMsg);
               break;
           default:
               break;
       }
   }
}

function validatePhone(input, emptyErrMsg, wrongErrMsg) {
   let value = input.value.trim(); 
   if (value.length == 0) { //输入框为空
       alert(emptyErrMsg);
       return;
   }
   let reg = /^1[3-9]\d{9}$/; //手机号码正则表达式
   if (reg.test(value)) { 
       alert("手机号码格式正确！");
   } else { //手机号码格式不正确
       alert(wrongErrMsg);
   }
}

function validateEmail(input, emptyErrMsg, wrongErrMsg) {
   let value = input.value.trim();
   if (value.length == 0) { //输入框为空
       alert(emptyErrMsg);
       return;
   }
   let reg = /^([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+@([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+\.[a-zA-Z]{2,}$/; //邮箱正则表达式
   if (reg.test(value)) {  
       alert("邮箱格式正确！");
   } else { //邮箱格式不正确
       alert(wrongErrMsg);
   }
}

步骤四：示例说明

以上代码是一个简单的根据表单类型检测表单的方法，现在来看两个示例说明：

示例一：检测手机号码

首先定义一个表单：

<form id="phone-form">
   <p>请输入手机号码：</p>
   <p><input type="text" name="phone" placeholder="请输入手机号码"></p>
   <p><button type="button" onclick="validateForm('phone-form', 'phone', '手机号码不能为空！', '手机号码格式不正确！')">提交</button></p>
</form>

当输入手机号码为空时，会弹出“手机号码不能为空！”的提示信息。当输入手机号码为正确的手机号码时，会弹出“手机号码格式正确！”的提示信息。如果输入的是错误的手机号码，会弹出“手机号码格式不正确！”的提示信息。

示例二：检测邮箱

定义一个表单：

<form id="email-form">
   <p>请输入邮箱：</p>
   <p><input type="text" name="email" placeholder="请输入邮箱"></p>
   <p><button type="button" onclick="validateForm('email-form', 'email', '邮箱不能为空！', '邮箱格式不正确！')">提交</button></p>
</form>

当输入邮箱为空时，会弹出“邮箱不能为空！”的提示信息。当输入的是正确的邮箱地址时，会弹出“邮箱格式正确！”的提示信息。如果输入的是错误的邮箱地址，会弹出“邮箱格式不正确！”的提示信息。

以上就是封装一个万能检测表单的方法的完整攻略。