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" />

现在代码正常运作。但我想在其中添加“ dynamicism ”。

我有必要：保留一个初始代码，添加监听表单字段（仅用于填写）。

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

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

如果我的所有代码 - 完全废话，请告诉我。至于我，它使用面向对象的方法进行更改。

请给我纯 javascript解决方案。 Jquery - 很棒的lib，但不接近我。

Answer 1

为了保持HTML清洁，我建议采用略有不同的策略。

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

提交表单后，检查所有字段并检查类required的所有字段是否为空。如果它们为空，请添加类error，否则删除此类。还要考虑添加一个工具提示，其中显示“需要字段”，或者更好的是，在字段旁边添加此文本，以便用户可以一目了然地看到错误。

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

对于其他功能，请检查jQuery docs about form events。

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是最好的。

优势

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

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

3 个答案: