你的位置:首页 > Java教程

[Java教程]Validform和aui2.0结合使用的表单自定义验证提示和列表页异步获取数据Demo


二.添加自定义验证演示
   
   Validform验证提示大多都是在输入框或下拉框的右边或下面。感觉就是不美观,特别是表单字段少的时候,这种在相应对象旁边的提示就没必要了,
     它会给人一种不友好的感觉(只是自己的感觉)。所以下面写了三种添加演示,希望大家能给出建议,以免下次用起来纠结,不知道用哪种好。
       表单验证插件是我们经常使用的Validform_v5.3.2_min.js。先上添加1演示的表单验证js代码,这里我设置了点击提交按钮后才验证。其他添加演示的区别不大,详细的代码可以到文章的底部下载源码

   

 <script>    var dialog = new auiDialog({});    var toast = new auiToast();    $(function () {       $(".form1").Validform({        btnSubmit: "#btn_sub",//点击此id按钮时触发        tipSweep:true,//true是提交表单才验证,离开焦点不验证      tiptype:function(msg,o,cssctl){        //是错误的才提示        if (o.type == 3) {                             dialog.alert({            title: "提示",            msg:msg,            buttons: [ '确定']          }, function (ret) {            o.obj.focus();//设置当前对象焦点                      })        }              },      beforeSubmit: function (form) {        //在验证成功后,表单提交前执行的函数,curform参数是当前表单对象。        //这里明确return false的话表单将不会提交;        $.ajax({          type: "Post",          data: form.serialize(),          dataType: "json",          url: form.attr("url"),          success: function (data, textStatus) {            if (data.status == 1) {              toast.success({                title:data.msg,                duration: 2000              });            }            else            {              dialog.alert({                title: "错误提示",                msg: data.msg,                buttons: ['确定'],              }, function (ret) {                              })            }          },          error: function ("错误提示",              buttons: [ '确定'],              msg: '状态:' + textStatus + '错误:' + errorThrown,            }, function (ret) {            })          }        });        return false;      }    })    })  </script>

其中的自定义验证是:

  tiptype:function(msg,o,cssctl){        //是错误的才提示        if (o.type == 3) {                             dialog.alert({            title: "提示",            msg:msg,            buttons: [ '确定']          }, function (ret) {            o.obj.focus();//设置当前对象焦点                      })        }              }

1.添加1自定义验证演示:

 alert提示。验证不通过,弹出提示框,点击确认关闭提示框。提示框关闭后才能继续输入。

        

 2. 添加2自定义验证演示:

       表单上方提示。验证不通过,表单上方出现提示条,提示条可以设置时间自动消失,也可以点击右边按钮关闭。提示的出现不影响输入。

       

     3. 添加3自定义验证演示

         吐司提示:验证不通过,会弹出提示框,提示框只能设置时间自动消失。提示框的出现不影响输入,但会遮住部分内容。

        

     三.列表演示
         1.列表1,分批异步获取数据演示:
           
数据根据每页显示的数量分批获取,直到数据全部获取出来为止。过程中不会影响用户浏览,只是要加载全部数据要吃掉用户的很多流量。

           

2. 列表2,滚动条滚到底部获取下一批数据演示:

     滚动条下拉到底部,便加载下一批数据。弊端是如果下一批存在很耗流量的数据,并且用户的带宽很小,你们用户还要一番等待。

     

   四:源码
               数据库使用的是sqlite,用vs打开运行可直接看到效果

       下载地址:https://github.com/lzjluoze/Validform-aui2.0-Demo