使用正则表达式进行表单验证（简短版）

引言

这是一个简短而简单的表单验证代码，它使用正则表达式将用户输入与正则表达式字符串定义的模式规则进行比较。 表单验证代码将使用“if”语句或正则表达式来验证用户输入了正确的信息。

此代码与其他代码的主要区别在于，正则表达式模式和错误消息都位于 html 控件标签内，而不是在函数本身中。 优点是您无需修改函数即可更改特定条件或验证规则，只需在 html 标签的 validate 属性下输入规则即可。 缺点是冗余性，如果表单中有三个字段需要实现相同的规则，您仍然需要在每个控件上重写正则表达式。 我和大家一样讨厌冗余，但我认为在这种特定代码中，这对于通用函数来说并不是一个高昂的代价。

代码

该函数遍历表单元素，搜索“validate”属性并尝试将该属性的正则表达式值与用户输入匹配。 如果用户输入不符合正则表达式模式，该函数将引发错误警报。 换句话说，具有“validate”属性的每个表单元素的内容都将由该函数评估，以检查其是否遵循正则表达式规则

1. 该函数将表单作为对象接收。
   function checkForm(formObj){
2. 变量 msg 被初始化为空字符串。 任何与正则表达式不匹配的数据都将调用代码将错误描述收集到此变量中。 因此，表单上的所有错误将一起呈现给用户，而不是每个错误单独的警报。
   var msg="";
3. 循环遍历表单元素。
   for (var i=0; i < formObj.elements.length; i++) {
4. 检查该元素是否有名称和一个 validate 属性。
   if (formObj.elements[i].name !=null && formObj.elements[i].getAttribute("validate")){
5. 从元素的 validate 属性中评估正则表达式。
   var validationRule = eval(formObj.elements[i].getAttribute("validate"));
6. 如果找到不匹配项，则将错误描述从控件标签的 validateMsg 属性添加到 msg 变量。
   if (!validationRule.test(formObj.elements[i].value))
   var obj = formObj.elements[i].parentNode; // 在验证字段上添加 * 标记 – 这部分不是强制性的，可以删除。
   if (obj.nodeName=="TD")
   { obj.innerHTML = "!!!"+ obj.innerHTML; }
   msg += formObj.elements[i].getAttribute("validateMsg")+"\n";
   !! 结束循环
7. 如果 msg 变量不为空，则表示找到了错误。 呈现错误并返回 false。
   if (msg.length > 0){ alert (msg); return false; } else{ return true; }

        function checkForm(formObj){
        var msg="";
        for (var i=0; i < formObj.elements.length; i++) {
               // check if the form element has a validate attribute. 
               if (formObj.elements[i].name !=null && 
                 formObj.elements[i].getAttribute("validate")){
                 var validationRule = 
                   eval(formObj.elements[i].getAttribute("validate"));
                   if (!validationRule.test(formObj.elements[i].value)){ 
                    var obj = formObj.elements[i].parentNode; 
                   // add a !!! mark on the validate field 
                    if (obj.nodeName=="TD")
                     obj.innerHTML = 
                       "<span style='color:red;'>!!!</span>"+ obj.innerHTML; 
          msg += formObj.elements[i].getAttribute("validateMsg")+"\n"; 
                   }//--> end test regExp
                 }//--> end if element has validate attribute
                }// end loop through the form elements. 
               if (msg.length > 0){
                 alert (msg);
                 return false;
               }
                 else{
                  return true;
                 }
            }//--> end function 

代码实现

为了使用该代码，请按照以下步骤操作

1. 将代码复制到页面中的 <script></script> 标签之间，或创建一个 JS 文件并将其链接到您的 HTML 页面。
2. 在 form 标签中，将方法添加到 onclick 事件：<form method=post name=myForm onsubmit="return checkForm(this);">
3. 在您想要验证的每个 html 控件中，添加 validate 属性和 errDescription 属性：<input width=100 type=text validate="/^([\w]+)(.[\w]+)*@([\w]+)(.[\w]{2,3}){1,2}$/" name=email id=email validateMsg="格式不正确">

一些正则表达式

• validate="/[\d\w]{3,}/" - 数据必须至少有 3 个字符长，并且应包含字母或数字
• validate="/^([0-9]{11})$/ " - 11 位数字的电话号码。
• validate="^([0-9]){2}(\/|-){1}([0-9]){2}(\/|-){1}([0-9]){4}$/" – 日期格式为 dd/mm/yyyy
• validate="/^([\w]+)(.[\w]+)*@([\w]+)(.[\w]{2,3}){1,2}$/" – 电子邮件