使用 Javascript 使用 window.onload 进行表单验证答案

【问题标题】：Form Validation with Javascript using window.onload使用 Javascript 使用 window.onload 进行表单验证
【发布时间】：2013-03-29 03:38:07
【问题描述】：

你好，我真的被困在这个问题上，因为我是一个 javscript 初学者，这让我大吃一惊。

是否有人知道如何编写以下 javascript 表单验证？我确信这很简单，但我想不出这个来挽救我的生命。

感谢您分享您的知识。

我需要在没有 jquery 的情况下编写以下表单验证。每当遇到错误时，阻止提交表单。我需要使用 window.onload 函数来分配验证回调函数。有 4 个输入由 javascript 代码验证。 javascript也需要在它自己的文件中。

验证规则如下：

输入：用户名；需要（是）；验证（长度必须为 5-10 个字符）。输入：电子邮件；需要（是）；验证（必须有 @ 符号，必须有句点）。输入：街道名称；必填（否）；验证（必须以数字开头）。输入：出生年份；需要（是）；验证（必须是数字）。

我的代码如下：

HTML：

<!DOCTYPE html>
<html>
<head>


<script defer="defer" type="text/javascript" src="form.js"></script>


</head>
<body>
<form action="fake.php">
    Username*: <input type="text" class="required" name="u"/><br/>
    Email*: <input type="text" class="required" name="p"/><br/>
    Street address: <input type="text" class="numeric" name="s"/><br/>
    Year of birth*: <input type="text" class="required numeric" name="b"/><br/>


    <input type="submit"/><br/>
</form>
</body>
</html>

JS

document.forms[0].elements[0].focus();

document.forms[0].onsubmit=function(){

for(var i = 0; i < document.forms[0].elements.length; i++){

var el = document.forms[0].elements[i];

if((el.className.indexOf("required") != -1) && 
  (el.value == "")){

alert("missing required field");
 el.focus();
el.style.backgroundColor="yellow";
 return false;
}

if((el.className.indexOf("numeric") != -1) && 
 (isNaN(el.value))){


alert(el.value + " is not a number");
 el.focus();
el.style.backgroundColor="pink";
 return false;              
  }
 }
}

【问题讨论】：

我真的没有看到任何问题吗？演示小提琴：jsfiddle.net/Nern7
此代码是否有任何具体问题/错误/问题？
对不起 - 也许我应该更具体一点。 1) 用户名必须在 5-10 个字符之间。不工作。我不知道怎么做这个。 2）电子邮件块不验证“@”和“。”我也不知道怎么做这个。 3) 街道地址必须以数字开头。这行不通。
为什么不创建一个表单验证对象。如果您需要样品，请让我做一些工作以简化您的任务。实际上它已经从 tutplus 示例中获得了帮助。不过我不记得链接了。
您好，感谢您的帮助。我不知道如何创建表单验证对象。如果可能的话，你能帮我吗？谢谢

标签： javascript html forms validation callback

【解决方案1】：

无需更改您的大部分代码...更新您的代码以进行其他验证，例如长度（需要一个类 verifylength 来验证长度）等等......

试试这个

HTML

<form action="fake.php">Username*:
<input type="text" class="required verifylength" name="u" />
<br/>Email*:
<input type="text" class="required email" name="p" />
<br/>Street address:
<input type="text" class="numeric" name="s" />
<br/>Year of birth*:
<input type="text" class="required numeric" name="b" />
<br/>
<input type="submit" />
<br/>
</form>

JAVASCRIPT

document.forms[0].elements[0].focus();
document.forms[0].onsubmit = function () {
for (var i = 0; i < document.forms[0].elements.length; i++) {
    var el = document.forms[0].elements[i];
    if ((el.className.indexOf("required") != -1) && (el.value == "")) {
        alert("missing required field");
        el.focus();
        el.style.backgroundColor = "yellow";
        return false;
    } else {
        if (el.className.indexOf("verifylength") != -1) {
            if (el.value.length < 5 || el.value.length > 10) {
                alert("'" + el.value + "' must be 5-10 charater long");
                el.focus();
                el.style.backgroundColor = "pink";
                return false;
            }
        }
    }

    if (el.className.indexOf("email") != -1) {
        var regEx = /^([0-9a-zA-Z]([-.\w]*[0-9a-zA-Z])*@([0-9a-zA-Z][-\w]*[0-9a-zA-Z]\.)+[a-zA-Z]{2,9})$/;
        var emailTest = regEx.test(el.value);
        if (!emailTest) {
            alert("email not valid");
            el.focus();
            el.style.backgroundColor = "yellow";
            return false;
        }
    };

    if ((el.className.indexOf("numeric") != -1) && (isNaN(el.value))) {
        alert(el.value + " is not a number");
        el.focus();
        el.style.backgroundColor = "pink";
        return false;
    }
 }
}

working fiddle

【讨论】：

很高兴它有帮助..:) 快乐编码

【解决方案2】：

类似于...的东西

//username 5-10 chars
var uVal = document.getElementsByTagName("u").value;
if (uVal.length < 5 || uVal.length > 10) return false;

//email needs @ and .
var eVal = document.getElementsByTagName("p").value;
if !(eVal.match('/.*@.*\./g')) return false;

//street starts w/ num
var sVal = document.getElementsByTagName("s").value;
if !(sVal.match('/^[0-9]/g')) return false;

我认为正则表达式已关闭 + 未经测试 :)

【讨论】：

谢谢你，这是对我已有的很大的改进。
另一个简单的问题，我知道这很愚蠢，但是我应该用上面的代码覆盖我现有的 js 吗？我认为答案是肯定的，但是哪一部分呢？我可以问你给我样品吗？非常感谢您的帮助！！！
嘿。如果它只是一个大学/学院实验室，我建议用上面的代码替换你的代码。如果你这样做了，请确保你知道这段代码的作用，因为它可能会出现在考试中:)
嗨，迈克尔，谢谢。还有一个问题..？抱歉所有问题，但你似乎知识渊博。如果我用您的代码替换我现有的 JS 文件，我仍然缺少“出生年份”的验证。 Validation 只能是数字。任何线索我怎么能做到这一点？还有一个Q？我要保留 document.forms[0].elements[0].focus(); document.forms[0].onsubmit=function(){ for(var i = 0; i
嘿嘿。不知道如何进行全数字验证。删除 document.forms[0].elements[0].focus(); 和 for 循环。干杯。

【解决方案3】：

这是您正在工作的 javascript 验证对象。希望您可以根据需要进行一些修改。

风格

<style>
    .valid {border: #0C0 solid 1px;}
    .invalid {border: #F00 solid 1px;}
</style>

HTML 表单

<div>
    <form id="ourForm">
        <label>First Name</label><input type="text" name="firstname" id="firstname" class="" /><br />  
        <label>Last Name</label><input type="text" name="lastname" id="lastname" class="" /><br />  
        <label>Username</label><input type="text" name="username" id="username" class="" /><br />
        <label>Email</label><input type="text" name="email" id="email" class="" /><br />  
        <input type="submit" value="submit" class="" />  
    </form>
</div>

结束标签前调用脚本

<script src="form_validation_object.js"></script>

form_validation_object.js

/*
 to: dom object
 type: type of event
 fn: function to run when the event is called
 */
function addEvent(to, type, fn) {
    if (document.addEventListener) { // FF/Chrome etc and Latest version of IE9+
        to.addEventListener(type, fn, false);
    } else if (document.attachEvent) { //Old versions of IE. The attachEvent method has been deprecated and samples have been removed.
        to.attachEvent('on' + type, fn);
    } else { // IE5
        to['on' + type] = fn;
    }
}

// Your window load event call
addEvent(window, 'load', function() {
    /* form validation object */
    var Form = {
        validClass: 'valid',
        inValidClass: 'invalid',
        fname: {
            minLength: 1,
            maxLength: 8,
            fieldName: 'First Name'
        },
        lname: {
            minLength: 1,
            maxLength: 12,
            fieldName: 'Last Name'
        },
        username: {
            minLength: 5,
            maxLength: 10,
            fieldName: 'Username'
        },
        validateLength: function(formElm, type) {
            //console.log('string = ' + formElm.value);
            //console.log('string length = ' + formElm.value.length);
            //console.log('max length=' + type.maxLength);
            //console.log(Form.validClass);
            if (formElm.value.length > type.maxLength || formElm.value.length < type.minLength) {
                //console.log('invalid');
                //alert(formElm.className);
                if (formElm.className.indexOf(Form.inValidClass) == -1) {
                    if (formElm.className.indexOf(Form.validClass) != -1) {
                        formElm.className = formElm.className.replace(Form.validClass, Form.inValidClass);
                    } else {
                        formElm.className = Form.inValidClass;
                    }
                }

                //alert(formElm.className);
                return false;
            } else {
                //console.log('valid');
                //alert(formElm.className.indexOf(Form.validClass));
                if (formElm.className.indexOf("\\b" + Form.validClass + "\\b") == -1) { // regex boundary to match whole word only  http://www.regular-expressions.info/wordboundaries.html
                    //formElm.className += ' ' + Form.validClass;
                    //alert(formElm.className);
                    if (formElm.className.indexOf(Form.inValidClass) != -1)
                        formElm.className = formElm.className.replace(Form.inValidClass, Form.validClass);
                    else
                        formElm.className = Form.validClass;
                }
                return true;
            }
        },
        validateEmail: function(formElm) {
            var regEx = /^([0-9a-zA-Z]([-.\w]*[0-9a-zA-Z])*@([0-9a-zA-Z][-\w]*[0-9a-zA-Z]\.)+[a-zA-Z]{2,9})$/;
            var emailTest = regEx.test(formElm.value);
            if (emailTest) {
                if (formElm.className.indexOf(Form.validClass) == -1) {
                    formElm.className = Form.validClass;
                }
                return true;
            } else {
                formElm.className = Form.inValidClass;
                return false;
            }
        },
        getSubmit: function(formID) {
            var inputs = document.getElementById(formID).getElementsByTagName('input');
            for (var i = 0; i < inputs.length; i++) {
                if (inputs[i].type == 'submit') {
                    return inputs[i];
                }
            }
            return false;
        }
    }

    /* call validation object */
    var ourForm = document.getElementById('ourForm');
    var submit_button = Form.getSubmit('ourForm');
    submit_button.disabled = 'disabled';

    function checkForm() {
        var inputs = ourForm.getElementsByTagName('input');
        if (Form.validateLength(inputs[0], Form.fname)) {
            if (Form.validateLength(inputs[1], Form.lname)) {
                if (Form.validateLength(inputs[2], Form.username)) {
                    if (Form.validateEmail(inputs[3])) {
                        submit_button.disabled = false;
                        return true;
                    }
                }
            }
        }
        submit_button.disabled = 'disabled';
        return false;
    }

    checkForm();
    addEvent(ourForm, 'keyup', checkForm);
    addEvent(ourForm, 'submit', checkForm);

});

JSBin 的工作示例
http://jsbin.com/ezujog/1

【讨论】：

感谢 YEGYA，您的工作样本提供了很大帮助。不过，我仍然需要弄清楚如何让它为我工作。
很高兴帮助你的朋友。我强烈建议您逐行浏览示例代码，尝试了解它是如何运行的，并阅读 javascript 主题，如 javascript 对象、原型、函数、闭包、类等（如果您还不了解它们），我可以保证你的编码风格和脚本知识会在一个月内达到一个新的水平。你会发现使用 javascript 库（如 jquery、dojo、prototypejs 等）很容易。
@Yegya — 不测试 document.attachEvent，测试传递给函数的对象：to.attachEvent。与其考虑所有嵌套的 if，不如考虑使用循环。
@RobG 这只是为了向他证明一些关于面向对象的 JavaScript 强大功能的基本概念。同意你的循环部分。