写一个超级简单的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; } })

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