面向对象的javascript表单注册

时间:2015-02-20 13:01:33

标签: javascript

我是面向对象javascript的新手:) 我已经编写了这段代码来验证注册表单的名字,但它没有用

 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>OOForm</title>
        <meta name="author" content="engy" />
        <!-- Date: 2015-02-20 -->
        <script>
        var Form = {
            fname:{
                minLength : 1,
                maxLength : 15,
            },
            validateLength:function(formEl,type){
                if(formEl.value.length>type.maxLength||formEl.value.length<type.minLength){
                    document.getElementById("firstNameSpan").innerHTML = "<font color='red'>Invalid User Name</font>";
                    return false;
                }
                else{
                    document.getElementById("firstNameSpan").innerHTML = "";
                    return true;
                }
            },
        };

        function checkForm(){
            var ourForm = document.getElementById("ourForm");
            var inputs = ourForm.getElementsByTagName("input");
            if(Form.validateLength(inputs[0],Form.fname)){
                    document.getElementById("mySubmit").disabled = false;
                    return true;
                }

        document.getElementById("mySubmit").disabled = true;
        return false;
        }
    </script>
    </head>
    <body>
        <form id="ourForm">
            <label>First Name</label>
            <input type="text"/>
            <span id="firstNameSpan"> </span>
            <br/>

            <input type="submit" value="submit" id="mySubmit" onclick="return checkForm()">
        </form>
    </body>

</html>

我不知道代码有什么问题,但是当我输入带有无效值的名字然后按提交时,它只会清除文本字段 并且&#34;无效&#34;跨度不出现

1 个答案:

答案 0 :(得分:0)

我认为这是因为你需要在表单元素而不是onclick上提交onsubmit而你需要在onsubmit中返回false,这样浏览器就不会尝试发送你的表单。