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

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 类：

   请注意，您可以拥有多个类。

提交表单后，检查所有字段并检查所有 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 是最好的。

优点

• 下载量小
• 内置跨浏览器支持
• 充满活力的插件社区
• 提高生产力
• 改善用户体验