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

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

好处

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