`
shuai1234
  • 浏览: 977870 次
  • 性别: Icon_minigender_1
  • 来自: 山西
社区版块
存档分类
最新评论

formValidator的一些验证实例

 
阅读更多

$(function () {
    try {
        $.formValidator.initConfig({
            formid: "formTable",
            errorfocus: false,
            submitonce: true,
            tipstyle: "both",
            onerror: function () { // 验证不通过时的回调函数
                alert("红色提示处输入非法,请根据提示修改!");
            }
        });
        //验证字符串(必填)
        $("#name").formValidator({ // 验证:模块名称
            onshow: "(必填)",
            onfocus: "(必填)不超过50个字符",
            oncorrect: "(正确)"
        }).inputValidator({
            min: 1,
            max: 50,
            onerrormin: "(错误)不能为空",
            onerrormax: "(错误)不超过50个字符,汉字算两个字符"
        });

        //验证字符串(选填)
        $("#name").formValidator({ // 验证:模块名称
            onshow: "(选填)",
            onfocus: "(选填)不超过50个字符",
            oncorrect: "(正确)",
            empty: true
        }).inputValidator({
            min: 1,
            max: 50,
            onerrormin: "(错误)不能为空",
            onerrormax: "(错误)不超过50个字符,汉字算两个字符"
        });

        //验证时间
        $("#addDate").formValidator({ // 验证:发送时间
            onshow: "(必填)",
            onfocus: "(必填)请选择操作时间",
            oncorrect: "(正确)"
        }).functionValidator({
            fun: function (val, elem) {
                if (!/^\d{4}-\d{2}-\d{2}[ ]\d{2}:\d{2}$/.test(val)) {
                    return "(错误)请选择操作时间";
                }
                return true;
            }
        });

        //ajax验证
        $("#account").formValidator({ // 验证:模块名称
            onshow: "(必填)",
            onfocus: "(必填)不超过50个字符",
            oncorrect: "(正确)"
        }).inputValidator({
            min: 1,
            max: 50,
            onerrormin: "(错误)不能为空",
            onerrormax: "(错误)不超过50个字符,汉字算两个字符"
        }).ajaxValidator({
            type: "post",
            url: "EnterpriseManage!ajaxValidatorUserAccount.action",
            success: function (data) {
                if (data == "0") {
                    return true;
                } else if (data == "1") {
                    return false;
                }
            },
            onerror: "该账号已被占用,请更换!"
        });

        //密码及重复密码验证
        $("#password").formValidator({ // 验证:模块名称
            onshow: "(必填)",
            onfocus: "(必填)不超过11个字符",
            oncorrect: "(正确)"
        }).inputValidator({
            min: 1,
            max: 50,
            onerrormin: "(错误)不能为空",
            onerrormax: "(错误)不超过11个字符,汉字算两个字符"
        });

        $("#passwordRepeat").formValidator({
            onshow: "(必填)",
            onfocus: "(必填)2次密码必须一致",
            oncorrect: "(正确)"
        }).compareValidator({
            desid: "password",
            operateor: "=",
            onerror: "(错误)2次密码不一致,请确认"
        });

        //图片格式验证
        $("#tcCodeLogo").formValidator({
            onshow: "(选填)",
            onfocus: "(选填)请上传图片文件",
            oncorrect: "(正确)",
            empty: true
        }).regexValidator({
            regexp: regexEnum.picture,
            onerror: "只能上传图片文件"
        });

        //数值验证
        $("#nameNum").formValidator({ // 验证:模块名称
            onshow: "(必填)",
            onfocus: "(必填)值1到50",
            oncorrect: "(正确)"
        }).inputValidator({
            min: 1,
            max: 50,
            type: "value",
            onerrormin: "(错误)不能为空",
            onerrormax: "(错误)值1到50"
        });
        //电话验证
        $("#linkPhone").formValidator({
            onshow: "(选填)",
            onfocus: "(选填)",
            oncorrect: "(正确)",
            empty: true
        }).regexValidator({
            regexp: "^(\\d{3,4}-?\\d{7,8}|(13|15|18)\\d{9})$",
            onerror: "(错误)电话号码格式不正确,请检查"
        });

        //EMail验证
        $("#linkEmail").formValidator({
            onshow: "(选填)",
            onfocus: "(选填)请选择正确EMail格式",
            oncorrect: "(正确)",
            empty: true
        }).regexValidator({
            regexp: regexEnum.email,
            onerror: "(错误)Email格式不正确,请检查"
        });

        //select验证
        $("#testSelect").formValidator({
            onshow: "(必填)",
            onfocus: "(必填)请选择选项",
            oncorrect: "(正确)"
        }).inputValidator({
            min: 0,  //开始索引
            onerror: "你是不是忘记选择学历了!"
        });

        //隐藏时,默认验证通过
        $("#smsProductName").formValidator({ // 验证
            onshow: "(必填)",
            onfocus: "(必填)不超过50个字符,汉字算两个字符",
            oncorrect: "(正确)"
        }).functionValidator({
            fun: function (val, elem) {
                if ($("#smsProductName").is(":hidden")) {
                    return true;
                }
                if (!/^\S{1,50}$/.test(val)) {
                    return "(错误)不超过50个字符,汉字算两个字符";
                }
                return true;
            }
        });
        //多选选择框的验证方式 略有点复杂了
        $(":checkbox[name='productType']").formValidator({
            onshow: "(至少选择一个)",
            onfocus: "(至少选择一个)",
            oncorrect: "(正确)"
        }).functionValidator({
            fun: function (val, elem) {
                var objs = $(":checkbox[name='productType']");
                for (var i = 0; i < objs.length; i++) {
                    if ($(objs[i]).attr("checked") == true) {
                        $('#productTypeTip').removeClass();
                        $('#productTypeTip').addClass("onSuccess");
                        $('#productTypeTip').html();
                        $('#productTypeTip').html("<nobr>正确</nobr>");
                        return true;
                    }
                }
                $('#productTypeTip').removeClass();
                $('#productTypeTip').addClass("onError");
                $('#productTypeTip').html();
                $('#productTypeTip').html("<nobr>(至少选择一项)</nobr>");
                return false;
            }
        });
    } catch (e) {
        alert(e);
    }
});

分享到:
评论

相关推荐

    jQuery formValidator表单验证插件实例(php)

    **jQuery formValidator表单验证插件实例(PHP)** 在Web开发中,表单验证是不可或缺的一部分,它确保用户输入的数据符合预设的规则,从而提高数据质量和用户体验。jQuery formValidator是一个强大的验证插件,它...

    jQuery formValidator表单验证源码实例

    很多人下载了jQuery 的formValidator表单验证插件竟然不会用,我下了后研究研究写了几个超级好用的表单验证的demo,下载之后直接使用。立即体验jQuery的强大,formValidator是个神奇的插件,让我做成超好用的demo

    JQuery formvalidator4.1.1(实例+文档).rar

    在压缩包中的"JQuery formvalidator4.1.1资料"中,包含了一些示例代码,这些实例涵盖了FormValidator的基本用法和常见场景。通过这些实例,开发者可以快速掌握如何在项目中引入FormValidator,如何设置验证规则,...

    formvalidator 表单验证框架

    4. **示例文件**:包含HTML和JavaScript文件,展示了如何在实际项目中使用formvalidator,比如“仿126实例”可能是一个模仿126邮箱注册表单的验证示例。 5. **文档**:可能包括HTML或PDF格式的帮助手册,详细解释了...

    jQuery formValidator表单验证插件3.1.rar

    示例代码展示了插件的基本用法和各种验证规则的应用,包括简单的验证实例和复杂的异步验证案例。通过实践这些例子,开发者可以更好地掌握formValidator的用法。 综上所述,jQuery formValidator 3.1是一个功能强大...

    jquery验证框架_formValidator3.3

    **jQuery FormValidator 3.3:打造高效便捷的表单验证体验** `jQuery FormValidator 3.3` 是一个强大的JavaScript验证框架,专为简化和增强网页中的表单验证而设计。它基于流行的jQuery库,提供了丰富的功能和高度...

    jQuery插件formValidator自定义函数扩展功能实例详解

    本文实例讲述了jQuery插件formValidator自定义函数扩展功能的方法。分享给大家供大家参考,具体如下: jQuery formValidator表单验证插件是什么?感兴趣的读者可参考《jQuery formValidator表单验证插件》以及本站...

    jquery formValidator

    `jQuery FormValidator`是一款基于jQuery库的前端表单验证插件,它为开发者提供了一种简单而强大的方式来实现表单验证。这个插件在Web开发领域中颇受欢迎,因为它可以方便地添加验证规则,避免用户提交无效或不完整...

    jquery formValidation表单验证插件实例

    例如,你可以通过CDN或下载压缩包(如`formValidator3.1`)来获取这些资源。在HTML文件中,将它们链接到页面头部: ```html &lt;!DOCTYPE html&gt; &lt;title&gt;jQuery FormValidation示例 ...

    jquery 的 formvalidator插件使用 多选项卡的弹出层效果

    6. **自定义验证规则**:除了内置的验证规则外,`formvalidator`还允许你定义自己的验证函数,以满足特定需求。例如,你可以验证密码强度,确保包含数字、字母和特殊字符。 ```javascript $.formUtils....

    jQuery formValidator4.0.1最全的demo,表单验证一网打尽

    个人认为最牛X的表单验证js,jquery实现的。附带10多个demo页,清楚展现了各种验证的用法,将表单验证的种种情况一网打尽,超赞。当然,我也是其它地方download的,下载了N多,这是最好的。共享给大家。

    jQuery formValidator表单验证插件ASP.NET示例

    内容索引:.NET源码,Ajax相关,formValidator jQuery formValidator是一款不错的表单验证插件,ASP/PHP/平台都可以方便的使用,本实例就是在 环境下的使用formValidator的一个功能演示程序,这其中包含各种表单数据...

    很漂亮的Jquery验证框架(内带实例)

    接着,我们需要对目标表单进行一些基本的配置,包括设置验证规则和错误提示信息。例如: ```html [required,custom[onlyLetterNumber]]" title="请输入用户名" /&gt; [required,custom[email]]" title="请输入有效...

    asp.net 中jquery应用验证注册信息实例【推荐】

    `jQuery formValidator`可能是这个实例中使用的第三方验证插件,它可以提供更复杂的验证功能,如正则表达式匹配、远程验证等。安装并引入这个插件后,可以按照插件文档中的指南配置验证规则,以增强验证功能。 总结...

    flex form 验证(转)

    通过实例化`FormValidator`,我们可以配置验证规则,比如最小值、最大值、正则表达式等,并将其关联到特定的表单字段。 文件`FormValidator.as`很可能包含了自定义的`FormValidator`扩展或实现,可能用于添加额外...

    JS表单验证类

    1. **初始化验证规则**:在创建`FormValidator`实例时,需要传入表单元素和验证规则。规则可能包括必填项、长度限制、格式校验等。 2. **事件绑定**:类内部会自动将验证函数绑定到表单的提交事件或其他相关事件上...

    jquery formValidator插件ajax验证 内容不做任何修改再离开提示错误的bug解决方法

    如果`settings`数组长度为1,意味着只有一个formValidator实例,此时不进行验证,直接返回null。否则,如果第一个验证规则不需要Ajax验证,会检查输入框是否为空,若为空则认为验证通过。 对于每一个验证规则(`...

    javascript表单验证类

    创建一个表单验证类实例,然后绑定到特定表单,如下: ```javascript var formValidator = new FormValidator(formElement); formValidator.addRule('email', /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/)...

    jquery.validate表单验证密码完整例子(带密码强度显示)

    总的来说,`jQuery Validate`的这个实例提供了一个实用的方法来增强表单验证体验,特别是对于密码安全性的强调。它不仅确保了用户输入的有效性,还鼓励他们创建更强大的密码,从而提高了整体的网络安全。通过理解并...

Global site tag (gtag.js) - Google Analytics