zoukankan      html  css  js  c++  java
  • 表单提交,不合法表单元素标签的高亮、页面上滚到某一个元素的位置

      当表单比较长的时候,用户点击页面底部的提交按钮后。

      比如此时某个元素的值不合法,或者说不符合业务要求。这个元素又在表单的靠近顶部,总之就不在电脑当前屏幕上了,怎么样提示用户更好些呢?

      系统的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....
    
    });
  • 相关阅读:
    Silverlight学习(五)图形标绘
    Silverlight学习(四) domainservice动态多条件查询
    MySQL之单表查询
    mysql外键的三种关系
    mysql之完整性约束
    接口类和抽象类的区别
    mysql中的sql_mode
    html5本地存储技术 localstorage
    mysql数值类型
    mysql
  • 原文地址:https://www.cnblogs.com/firstForEver/p/5000968.html
Copyright © 2011-2022 走看看