写一个超级简单的form表单验证

• 主要就是用each这个方法，
• 监听用户输入使用input propertychange，
• 实时监听用户输入使用的是H5新增的input事件，
• 用户输入之后点击其他地方而失去焦点时用blur函数
• 用户点击提交之后缓慢地滑到不合法的地方

显示如下：

所以主要是css操作类invalid

.invalid {
        border: 1px solid #ff0000;
    }

  function oninput() {
  //把需要验证的项目列举出来，也可以使用类选择器 或者其他name属性选择器
       var customer = $('#customer');
       var description = $('#description');
       var paperid = $('#paperid');
       var process = $('#process');
       //组成数组
       var arr = [customer, description, paperid, process];
       $.each(arr,function(i,item){
       //input事件  h5新增
           $(this).bind('input propertychange', function () {
               if ($.trim($(this).val()) != '') {
                   $(this).removeClass('invalid');
               } else {
                   $(this).addClass('invalid');
               }
           });
           //blur也要添加 因为input只能监听改变 未改变时无法监听到
           $(this).blur(function () {
               if ($.trim($(this).val()) != '') {
                   $(this).removeClass('invalid');
               } else {
                   $(this).addClass('invalid');
               }
           })
       });
   }
   //假如直接点击按钮
   $('#submit').click(function(){
        var customer = $('#customer');
        var description = $('#description');
        var paperid = $('#paperid');
        var process = $('#process');
        var arr = [customer, description, paperid, process];
        //因为each里没办法return 设置标志
        var flag = true;
        $.each(arr, function (i, item) {
            if ($.trim($(item).val()) == "") {
                $(item).addClass('invalid');
                //滑动到顶部 800是速度 ms
                $("html,body").animate({ scrollTop: 0 }, 800);
                flag = false;
            }
        })
        if (flag == false) {
            return;
        }

})

还有更多更好看的验证方式就慢慢学吧！