javascript有个问题困扰许久，真心提问，希望大牛详细点解答！谢谢

图片说明

默认禁用，每个input blur检查是否已经输入，输入允许提交

 <style>
    div.form {text-align:center}
    div.form input{border-radius:5px;border:solid 2px #666;width:150px;margin-bottom:5px;text-align:center}
    div.form input.submit{width:200px;color:#fff;background:#666}
    div.form input.ok{background:#e4a21a;;border-color:#e4a21a}
</style>
<div class="form" id="dvForm">
    <form>
        <input placeholder="姓名" /><br />
        <input placeholder="年龄" /><br />
        <input placeholder="手机号码" /><br />
        <input type="submit" value="提交" class="submit" />
    </form>
</div>
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.4.2.min.js"></script>
<script>
    $('#dvForm :text').blur(function () {
        var ok = true;
        $('#dvForm :text').each(function () { if ($.trim(this.value) == '') { ok = false; return false } });
        $(':submit', '#dvForm').attr('disabled', !ok)[ok?'addClass':'removeClass']('ok');
    }).eq(0).trigger('blur');
</script>

给按钮加个onchange函数，当按钮有输入，值改变之后触发，函数遍历所有的input，加个判断，当每个都有值之后，改变提交按钮的样式，并使他可用

初始化时按钮添加disabled属性就不响应事件；
每个输入框都添加 onchange 事件处理函数，判断是不是所有输入框都已经填写正确，
如果是填写正确，则去掉按钮的disabled属性；
提交信息有效性判断要为 form 添加 onsubmit 事件处理程序；

 <meta charset="utf-8">
<form>
    <input type="text"><br>
    <input type="text"><br>
    <input type="text"><br>
    <input type="text"><br>
    <input type="submit" value="提交" class="submit" disabled>
</form>
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.4.2.min.js"></script>
<script>
    $(function () {
        $("input:text").change(function () {
            var ok = true;
            $("input:text").each(function () {
                if (this.value.trim() == '') {
                    ok = false;
                    return false
                }
            });
            $("input:submit").attr("disabled", ok ? false : true);
            $("input:submit").css("background-color", ok ? "yellow" : "white")

        })
    })
</script>

手机端忽略 IE9 以下
oninput 事件

 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        .btn{
            display: inline-block;
            height: 30px;
            line-height: 30px;
            -webkit-border-radius: 5px;
            -moz-border-radius: 5px;
            border-radius: 5px;
            background-color: indianred;
            color: black;
            padding: 10px 20px;
        }

        input{
            height: 30px;
        }
    </style>
</head>
<body>
<h1>Snapshots</h1>
<form name="demo">
    <input name="uname" oninput="csle(this)">
    <input name="pwd" oninput="csle(this)">
    <a class="btn">xxx</a>
</form>

<script>
    function csle(_this) {
        console.log(_this.name +":"+ _this.value)
    }
</script>
</body>
</html>