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

Question

問題陳述：我需要寫一個代碼，在發送表單之前是否會檢查所有必填字段是否已填寫。 如果未填寫所有字段，則需要以紅色分配而不是發送表格。

現在代碼以這種方式存在：

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 - 很棒的庫，但它不適合我。

Answer 1

為了保持 HTML 干凈，我建議采用稍微不同的策略。

1. 使用像 jQuery 這樣的框架可以讓很多事情變得更簡單。

2. 將所有代碼移動到外部腳本中。

3. 使用 body.onLoad 事件查找所有表單並安裝檢查代碼。

4. 不是對字段值進行硬編碼，而是向每個需要的字段添加一個 css 類：

    <input type="text" ... class="textField required" ...>

   請注意，您可以擁有多個類。

提交表單后，檢查所有字段並檢查所有required的類是否為非空。 如果它們為空，則添加類error否則刪除此類。 還可以考慮添加一個工具提示，上面寫着“需要字段”，或者更好的是，在字段旁邊添加此文本，以便用戶一眼就能看出哪里出了問題。

在 CSS 樣式表中，您可以定義如何顯示錯誤的規則。

對於其余的功能，請查看有關表單事件的jQuery 文檔。

Answer 2

造成。

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;
    }
}

這段代碼對我來說並不愉快，但它也有效，如果不完全重寫，我無法改進它。

Answer 3

jQuery 為低開銷增加了很多好處。 它有一個非常受歡迎的驗證插件。 還有一些替代方案，但我發現 jQuery 是最好的。

好處

• 小下載大小
• 內置跨瀏覽器支持
• 充滿活力的插件社區
• 提高生產力
• 改善用戶體驗