簡單的表單驗證。面向對象

問題陳述： 我需要編寫一個代碼，無論是在發送表單之前都會檢查所有必填字段是否填滿。如果並非所有字段都已填寫，則需要使用紅色進行分配，而不是發送表單。簡單的表單驗證。面向對象

現在代碼存在這樣那樣：

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

簡單的表單驗證。面向對象

回答

相關問題