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....
    
    });
  • 相关阅读:
    php打印出10*10表格
    php打印出1到2000年之间所有的闰年
    借鉴一篇好文章
    女程序员的预备篇
    SQL存储过程删除数据库日志文件的方法
    Mongodb无法访问28107的问题
    使用 xsd.exe 命令工具将 xsd 架构生成 类(CS) 文件
    C# 用POST提交json数据
    WinForm 使用 HttpUtility
    Sql Server 分区之后增加新的分区
  • 原文地址:https://www.cnblogs.com/firstForEver/p/5000968.html
Copyright © 2011-2022 走看看