提交按钮默认不可点击，表单input输入正确后才可点击

在做表单验证的时候，经常会遇到表单提交时按钮样式的问题，这里可以给出较为详细的方案。

如图：

        

输入前提交按钮置灰且不可点击，当账号和密码都输入正确后，按钮才会变成可点击的红颜色。

之前我一直在想怎么获取input的变化也就是change事件，其实input是没有change事件的，倒是有一个propertychange事件，这个在上面的文章有提到过。这个propertychange事件是可以获取到的，那么问题来了，由于每次密码或者账号输入的时候有一个校验的提示，如图：

当我们获得每一次的propertychange事件的时候，都会弹出这个提示出来因为在这个事件里面每次都监听到了input输入数值的变化从而每次都会弹出提示，你能想象你在输入东西的时候有个toast提示一直弹么，用户体验太差了！！！

后来通过网上搜索找到了一个方法可以解决这个问题，就是加一个定时器，而且每次定时器都清空，只在你最后输入完的时候做一次判断且提示你，不过用到的是keyup事件，propertychange事件没试过，应该也是可以的，毕竟赶项目，解决问题为重。

话不多说，代码如下：

HTML代码：

<div class="list-block loginBox">
                <ul>
                    <!-- Text inputs -->
                    <li>
                        <div class="item-content">
                            <div class="item-inner">
                                <div class="item-title label">账号</div>
                                <div class="item-input">
                                    <input type="text" placeholder="请输入手机号码" class="userTel" value="">
                                </div>
                            </div>
                        </div>
                    </li>
                    <li>
                        <div class="item-content">
                            <div class="item-inner">
                                <div class="item-title label">密码</div>
                                <div class="item-input">
                                    <input type="password" placeholder="请输入6-20位字符" class="userPw" value="" maxlength="20">
                                </div>
                            </div>
                        </div>
                    </li>
                </ul>
            </div>
            <div class="content-block">
                <div class="row">
                    <div class="col-100"><input type="submit" value="登录" id="login" class="button button-big button-fill button-danger disabled"></div>
                </div>
            </div>

JS代码：

require.config({
    paths: {
        "base": "../../js/base/base",
        "secMenu": "../../js/base/secMenu",
        "template": "../../js/base/template"
    }
});
define(['base','template','secMenu'], function (base,template,secMenu){
    function userTel(){ 
        regExp=/^1[3|4|5|7|8]\d{9}$/;
        if($(".userTel").val()==""){
            $.toast('账号不能为空', 2000)
            return false;
        }
        else if(!regExp.test($(".userTel").val())){
            $.toast('账号格式错误', 2000)
            return false;
        }
        else{
            return true;
        }
    }
    $(".userTel").blur(userTel);

    //密码校验：6-20数字和英文的组合
    function userPw(){
        regExp=/^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,20}$/;
        if($(".userPw").val()==""){
            $.toast('密码不能为空', 2000)
            return false;
        }
        else if(!regExp.test($(".userPw").val())){
            $.toast('密码格式错误', 2000)
            return false;
        }
        else{
            return true;
        }
    }
    $(".userPw").blur(userPw);

    var timer=-1;
    $(".userTel,.userPw").bind("keyup",function(event){
        var val=$(this).val();
        timer && clearTimeout(timer);
        timer = setTimeout(function(){
            if(userTel()&&userPw()){
                $("#login").removeClass("disabled");
                return true;
            }else{
                $("#login").addClass("disabled");
                return false;
            }
          //将值发送到服务器
        getCompList(val);
      },1500);
    })
    
});

由于这个项目用的是require模块化的方法，一般直接引用define里面的3个函数就行了。