简单的表单验证。面向对象

问题陈述： 我需要编写一个代码，无论是在发送表单之前都会检查所有必填字段是否填满。如果并非所有字段都已填写，则需要使用红色进行分配，而不是发送表单。简单的表单验证。面向对象

现在代码存在这样那样：

function formsubmit(formName, reqFieldArr){  
    var curForm = new formObj(formName, reqFieldArr); 
    if(curForm.valid) 
     curForm.send(); 
    else 
     curForm.paint();  
} 


function formObj(formName, reqFieldArr){ 
    var filledCount = 0; 
    var fieldArr = new Array(); 
    for(i=reqFieldArr.length-1; i>=0; i--){ 
     fieldArr[i] = new fieldObj(formName, reqFieldArr[i]); 
     if(fieldArr[i].filled == true) 
     filledCount++; 
    } 

    if(filledCount == fieldArr.length) 
     this.valid = true; 
    else 
     this.valid = false; 


    this.paint = function(){ 
     for(i=fieldArr.length-1; i>=0; i--){ 
      if(fieldArr[i].filled == false) 
       fieldArr[i].paintInRed(); 
      else 
       fieldArr[i].unPaintInRed(); 
     } 
    } 

    this.send = function(){ 
     document.forms[formName].submit(); 
    } 
} 


function fieldObj(formName, fName){ 
    var curField = document.forms[formName].elements[fName]; 

    if(curField.value != '') 
     this.filled = true; 
    else 
     this.filled = false; 

    this.paintInRed = function(){ 
     curField.addClassName('red'); 
    } 

    this.unPaintInRed = function(){ 
     curField.removeClassName('red'); 
    } 
}

功能是这样造成的：

<input type="button" onClick="formsubmit('orderform', ['name', 'post', 'payer', 'recipient', 'good'])" value="send" />

现在的代码工作。但我想在其中添加“动态”。

对我来说这是必要的：本质上保留一个初始代码，以添加监听表单域（仅用于填充）。

例如，当字段用红色分配并且用户开始填充时，它应该变成白色。

事实上，我需要添加事件监听：onChange，模糊窗体的空白字段。因为它在初始代码的限制范围内。

如果我所有的代码 - 完全废话，让我知道它。对我而言，它要改变使用面向对象的方法。

给我纯 JavaScript的解决方案，请。 JQuery的 - 伟大的自由，但它不为方法对我来说。

来源

2010-04-07 Kalinin

先后取得。

function formsubmit(formName, reqFieldArr){  
    var curForm = new formObj(formName, reqFieldArr); 
    if(curForm.valid) 
     curForm.send(); 
    else{ 
     curForm.paint();  
     curForm.listen(); 
    } 
} 


function formObj(formName, reqFieldArr){ 
    var filledCount = 0; 
    var fieldArr = new Array(); 
    for(i=reqFieldArr.length-1; i>=0; i--){ 
     fieldArr[i] = new fieldObj(formName, reqFieldArr[i]); 
     if(fieldArr[i].filled == true) 
     filledCount++; 
    } 

    if(filledCount == fieldArr.length) 
     this.valid = true; 
    else 
     this.valid = false; 


    this.paint = function(){ 
     for(i=fieldArr.length-1; i>=0; i--){ 
      if(fieldArr[i].filled == false) 
       fieldArr[i].paintInRed(); 
      else 
       fieldArr[i].unPaintInRed(); 
     } 
    } 

    this.send = function(){ 
     document.forms[formName].submit(); 
    } 

    this.listen = function(){ 
     for(i=fieldArr.length-1; i>=0; i--){ 
      fieldArr[i].fieldListen(); 
     } 
    } 
} 

function fieldObj(formName, fName){ 
    var curField = document.forms[formName].elements[fName]; 

    this.filled = getValueBool(); 

    this.paintInRed = function(){ 
     curField.addClassName('red'); 
    } 

    this.unPaintInRed = function(){ 
     curField.removeClassName('red'); 
    } 

    this.fieldListen = function(){ 
     curField.onkeyup = function(){ 
      if(curField.value != ''){ 
       curField.removeClassName('red'); 
      } 
      else{ 
       curField.addClassName('red'); 
      } 
     } 
    } 

    function getValueBool(){ 
     if(curField.value != '') 
      return true; 
     else 
      return false; 
    } 
}

这段代码对我来说并不愉快，但它的工作原理也不能完全重写而改进它。

来源

2010-04-07 11:41:55 Kalinin

为了保持您的HTML清洁，我建议一个略有不同的策略。

使用像jQuery这样的框架使许多事情变得更加简单。
将所有代码移动到外部脚本中。
使用body.onLoad事件查找所有窗体并安装检查代码。
而是硬编码字段值，添加一个CSS类所需的每个字段：
```
<input type="text" ... class="textField required" ...> 
```
请注意，你可以有比单一类的更多。

当表单提交，审查所有领域和检查所有与类required非空。如果它们是空的，则添加类error，否则删除此类。另外考虑添加一个提示“Field is required”的工具提示，或者更好的是，在该字段旁边添加此文本，以便用户可以一眼就看出哪里出了什么问题。

在CSS样式表中，您可以定义一个规则如何显示错误。

对于功能的其余部分，请检查jQuery docs about form events。

来源

2010-04-07 08:41:16

@Aaron Digulla，jQuery在给定的项目中没有使用，我不想仅仅为了表单检查而添加它。对于“类”我同意，最好将“必需”类用于必要的字段，而不是将它们的名字在函数中进行排列。 – Kalinin 2010-04-07 09:02:44

在这种情况下，请查看jQuery的源代码，以便如何实现此行为并将其复制。 – 2010-04-07 09:05:39

@Aaron Digulla，在我看来，这对我来说是非常不安的问题。有很多都堆积如山。不明白。 – Kalinin 2010-04-07 09:15:05

jQuery为低开销增加了很多好处。它有一个非常受欢迎的验证插件。还有一些替代品，但我发现jQuery是最好的。

优势建立在跨浏览器支持

小的下载大小
充满活力的插件社区
提高生产率
改善用户体验

来源

2010-04-07 09:13:05

简单的表单验证。面向对象

回答

相关问题