当表单比较长的时候,用户点击页面底部的提交按钮后。
比如此时某个元素的值不合法,或者说不符合业务要求。这个元素又在表单的靠近顶部,总之就不在电脑当前屏幕上了,怎么样提示用户更好些呢?
系统的alert()现在又不太优雅。这时候高亮元素边框,再滚回的方法比较好些。不多说没用的了...
这里利用了jquery操作。
思路就是,表单从上至下的顺序检测每一个元素是否合法,合法的跳过,不合法的就取出该元素的id,放到一个数组里。最后判断这个数组的长度,如果大于0,则高亮这些元素的边框,并且滚动到数组里第一个元素id的位置。
简单写几行代码:
$('#submitBtn').click(function(){ var stop_ids = [];// 不符条件的元素id // 随便举个不合法的例子,比如有一个表单元素ida不能为空;一个元素idb值不能大于3;一个idc日期值不能小于当前时间 var aa = $.trim($('#ida').val()), bb = $('#idb').val(), cc = $('#idc').val(); if (aa == '') stop_ids.push('ida'); if (bb > 3) stop_ids.push('idb'); if (new Date(idc) < new Date()) stop_ids.push('idc'); if (stop_ids.length > 0){ $('#' + stop_ids.join(',#')).css("border","2px solid #FF0000");// 每个id前边加上#符号 $("body").animate({scrollTop: $("#"+ stop_ids[0]).offset().top}, 250);// 用时250ms,滚动到第一个元素上 return false; } // balabala.... });