zoukankan      html  css  js  c++  java
  • jQuery MiniUI开发系列之:数据验证

    在开发应用系统界面时,往往需要进行很多、复杂的数据验证,当填写的数据符合规定,才能提交保存。
    jQuery MiniUI提供了比较完美的表单数据验证和错误显示的方式。

    常见的表单控件,都有一个验证事件"validation"。
    通过监听处理“validation”事件,我们可以自定义验证规则逻辑、是否验证通过、验证错误描述等。

    1. //监听处理"validation"事件
    2. textbox1.on("validation", function (e) {
    3.     if (e.isValid) {
    4.         if (isEmail(e.value) == false) {
    5.             e.errorText = "必须输入邮件地址";
    6.             e.isValid = false;
    7.         }
    8.     }
    9. });
    10. //进行验证
    11. textbox1.validate();
    复制代码


    假设一个表单内,有20个需要验证的控件,那是否需要调用20次验证方法呢?
    jQuery MiniUI对此提供的方案是:使用mini.Form组件,批量验证多个控件。

    1. var form = new mini.Form("#form1");
    2. form.validate();
    3. if (form.isValid() == false) {
    4.     alert("失败");
    5. } else {
    6.     alert("成功");
    7. }
    复制代码

    开发者只需要获取一个最外层的div,将其创建成"mini.Form"组件,就可以调用"form.validate()"方法批量验证,节省大量无必要的代码。

    经过以上的简单处理,数据验证工作做好了,那么验证提示的效果如何呢?如下所示:


    注意:不需要为错误Icon占位去计算整体宽度。
    比如一个TextBox正常显示是150px,当验证错误显示时,TextBox的宽度会自动缩短25px左右,错误Icon会占据这25px显示。

    以上内容描述了MiniUI最基本、最常用的数据验证方式。
    MiniUI也可以自定义错误显示方式,如错误内容集中提示、弹出提示等。

    参考示例:
        数据验证:http://miniui.com/demo/form/validation.html
        集中显示:http://miniui.com/demo/form/validGroup.html
        弹出显示:http://miniui.com/demo/form/validWindow.html

    附件是表单验证示例:

    下载附件地址:http://miniui.com/bbs/forum.php?mod=viewthread&tid=17&extra=page%3D1

  • 相关阅读:
    day74test
    day73
    drf节流
    drf面试题及总结
    day72test
    日常积累
    windows 内核下获取进程路径
    转:浅析C++中的this指针
    vc 获取窗口标题GetWindowText
    驱动自定义回调例程
  • 原文地址:https://www.cnblogs.com/gantt/p/5602967.html
Copyright © 2011-2022 走看看