表单验证或孤立的元素验证(原创)

所属分类:输入-验证

 21079  315  查看评论 (17)
分享到微信朋友圈
X
表单验证或孤立的元素验证(原创) ie兼容9

更新时间:2023-02-19 22:24:38

更新说明:

1. 增加自定义验证规则回调函数callback中,第二参数,可动态增加消息提醒参数

2. 修复异步自定义验证方法中,ajax请求返回对像时,验证结果异常问题。


更新时间:2021-03-07 20:45:52

更新说明:更新为1.0.2版本,增加自定义验证时,需要通过ajax返回值判断验证时,返回的是字符串时做的处理。

详细请看index.html页面中API下iValidate.setSupplyRules(supplyRuleObj)的使用说明。


更新时间:2020-05-05 22:23:26

更新说明:

  • 修改api说明扩展方法使用ajax时的错误的示例;

  • 修复扩展方法使用异步ajax验证时的判断异常;


更新时间:2020-04-30 00:23:04

更新说明:

  • 修改tip验证框错位情况;

  • 增加全局配置方法iValidate.setConfig(config);

  • 增加全局设置补充验证方法iValidate.setSupplyRules(supplyRuleObj);

  • 删除$.fn.setSupplyRuleObj(supplyRuleObj)方法;

  • 增加$.fn.ivReposition = function(isRedraw)的isRedraw参数(是否重绘canvas(尖角))。


更新时间:2020-04-28 23:20:42

更新说明:在扩展验证(supplyRules),参数对象rule函数的参数,增加$elemt对象。

{rule: function($elemt){}}

$elemt为验证元素(dom)的jquery对象。


更新时间:2019/4/2 下午12:10:03

更新说明:增加了ajax异步处理验证的方式,修复微小的bug,完善文档内容。


更新时间:2018/11/10 下午12:48:19

更新说明:在插件示例包中提供了源码且包含注释,补充了示例index.html中的另一种消息提醒动画的关键字。


演示文件中有详细的实例。

相关插件-验证

JQuery表单验证插件EasyValidator,超级简单易用!

用户无需写一行JS验证代码,只需在要验证的表单中加入相应的验证属性即可,让验证功能易维护,可扩展,更容易上手。
  验证
 49770  356

原生js表单验证(原创)

轻量级,原生js打造表单验证,易上手
  验证
 13106  187

jQuery拼图滑块验证

仿B站登录拼图滑块验证,代码结构清晰注释全。
  验证
 47069  512

简单易懂的jQuery表单验证插件

这是一款简单易懂的表单验证插件,没用使用任何多余的代码,使用时仅需引用jquery和jquery.validate.js
  验证
 32745  336

讨论这个项目(17)回答他人问题或分享插件使用方法奖励jQ币 评论用户自律公约

    刘永杰 0
    2019/8/20 17:10:59
    请问下我对10个input框设置了自定义的补充验证规则,请问我要怎么拿到当前input框内的值呢
        Khaoth0
        2019/8/26 13:18:40
        使用jquery的$(xxx).val();获取不到值吗?
        刘永杰0
        2019/8/26 15:56:22
        因为要判断的是当前操作的文本框内容,如果用$(xxx).val()来获取的话那要写好多个方法来分别判断,请问有没有方法可以在自定义补充规则里直接获取当前操作的文本框的值?
    回复
    qianmingwei 0
    2019/4/28 9:28:12
    请问下ajax验证具体该怎么写呢?
        Khaoth1
        2019/4/28 9:50:31

        使用ivSetSupplyRuleObj设置扩展验证中可以写ajax,使用如下方式
        isAsync为true验证的时候插件就会使用异步的凡是验证,$.ajax就能通过异步的方式做请求,且能保证插件验证的结果不会出误验证。

        $("#text").ivSetSupplyRuleObj({
            ruleKey: {
                isAsync: true,
                contentText: 'yyyyy', // 消息内容。
                rule: function(callback) {
                    $.ajax({
                        url: 'xx',
                        data: {
                            xx: 'xx'
                        },
                        success: function(data) {
                            // data是个布尔值。
                            callback(data);
                        }
                    });
                }
            },
        }
        });
        qianmingwei0
        2019/4/28 9:57:41

        非常感谢作者的回复!
        现在还有一个问题:需要$.fn.ivValidForm()或$.fn.ivValid()触发异步验证。请问具体是怎么触发呢?

        $("#formId").ivValidForm(function(validStatus){....})

        中“....”的内容是什么?

        qianmingwei0
        2019/4/28 13:35:45
        作者可以留下微信号么~
        Khaoth1
        2019/8/26 13:22:33
        抱歉回的太晚了。自定义验证中,开启异步的验证,设置isAsync: true。
    回复
    阿灿 0
    2019/4/3 15:59:03

    请问为什么我按照教程引进的然后写了一个这

    <script type="text/javascript">
        // 初始化验证对象
        iValidate.init(document.getElementById("ivalidate_1"));
    </script>
    
    <!-- 当不存在data-validate-options属性,并初始化验证控件,不会产生校验效果-->
    <input id="ivalidate_1" class="ivalidate-box" data-validate-options="required: true">

    没有反应?

        Khaoth0
        2019/4/3 16:12:32
        请问浏览器控制台有报什么错吗?
        Khaoth0
        2019/4/3 16:22:07
        也需你没把jquery或iValidate插件引入。
    回复
    很久以前 0
    2018/10/12 14:58:42
    当我点击按钮的时候,怎么获取到我的验证是否都通过了?
        Khaoth1
        2018/10/15 14:08:19
        验证单个元素$("xxx").ivValid()返回true验证用过,返回false不通过,验证表单$("#formId").ivValidForm();
    回复
    sin 0
    2018/10/11 9:42:11
    连源码都不提供有毛线用
        microsoftvs0
        2018/10/12 15:18:01
        这位兄弟,你的眼神好像有点问题。
        [梆 .]0
        2018/10/23 11:57:58
        他是要开发版的JS,不是min
        Khaoth0
        2018/11/15 8:57:19
        已提供未压缩版。
    回复
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
取消回复