JQuery.validationEngine表单验证插件

JQuery.validationEngine表单验证插件一、说明JQuery.validationEngine表单验证控件功能强大,自带了样式显示模式:1.字符类型:非空验证、最大长度、最小长度、相等判断、数字和空格、数字和英文字母2.数字类型:数字、整数、最大值、最小值3.日期类型:日期(yyyy-MM-dd/yyyy/MM/dd等)、日期+时间、最小日期、最大日期、日期时间段4.业务字段:url、email、phone、ipv

大家好,又见面了,我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。

Jetbrains全系列IDE稳定放心使用

一、说明

JQuery.validationEngine表单验证控件功能强大,自带了样式显示模式:

1.字符类型:非空验证、最大长度、最小长度、相等判断、数字和空格、数字和英文字母

2.数字类型:数字、整数、最大值、最小值

3.日期类型:日期(yyyy-MM-dd/ yyyy/MM/dd等)、日期+时间、最小日期、最大日期、日期时间段

4.业务字段:url、email、phone、ipv4;ciaoca版扩展支持:qq、邮政编码、身份证、汉字。

5.Ajax后台验证:支持全局扩展定义,后台可定义消息内容,但是没有回调处理的扩展。

6.其他自定义扩展。

二、相关文档

1.Git源代码地址:https://github.com/posabsolute/jQuery-Validation-Engine

2.中文文档API参考:http://code.ciaoca.com/jquery/validation-engine/

3.中文优化版 Ciaoca下载

4.Asp.net Demo实例源代码地址:https://git.oschina.net/tiama3798/BootstrapBack_Demo/tree/JQuery.validationEngine

三、其他表单标签验证

1.引用:

<link href="~/Scripts/validation/validationEngine.jquery.css" rel="stylesheet" />
<script src="~/Scripts/validation/jquery.validationEngine.js"></script>
<script src="~/Scripts/validation/jquery.validationEngine-zh_CN.js"></script>
<script src="~/Scripts/validation/jquery.validationEngine.js"></script>

2.HTMl:

<div class="panel panel-default">
    <div class="panel-heading">
        <div class="panel-title">常用业务字段验证</div>
    </div>
    <div class="panel-body">
        <form role="form" id="form1" class="demoform" action="#">
            <div class="form-group">
                <label class="control-label">分类:</label>
                <div class="select">
                    <select class="form-control validate[required]" name="type">
                        <option value="">==请选择==</option>
                        <option value="1">一星级</option>
                        <option value="2">二星级</option>
                        <option value="3">三星级</option>
                    </select>
                </div>
            </div>
            <div class="form-group">
                <label class="control-label">多选框:</label>
                <div>
                    <label class="checkbox-inline">
                        <input class="validate[minCheckbox[2]]" type="checkbox" name="chb1" />一星级
                    </label>
                    <label class="checkbox-inline">
                        <input class="validate[minCheckbox[2]]" type="checkbox" name="chb1" />二星级
                    </label>
                    <label class="checkbox-inline">
                        <input class="validate[minCheckbox[2]]" type="checkbox" name="chb1" />三星级
                    </label>
                </div>
            </div>

            <div class="form-group">
                <label class="control-label">单选框:</label>
                <div>
                    <label class="radio-inline">
                        <input class="validate[required]" type="radio" name="rad1" />男
                    </label>
                    <label class="radio-inline">
                        <input class="validate[required]" type="radio" name="rad1" />女
                    </label>
                    <label class="radio-inline">
                        <input class="validate[required]" type="radio" name="rad1" />其他
                    </label>
                </div>
            </div>

            <div class="form-group">
                <label class="control-label">简介:</label>
                <textarea class="form-control validate[required]"></textarea>
            </div>
            <div class="form-group">
                <label class="control-label">
                    上传图片:
                </label>
                <div >
                    <input type="file" class="form-control validate[required]" />
                </div>
               
            </div>
            <div>
                <br /><br />
                <input type="submit" class="btn btn-success" value="提交" />
            </div>
        </form>
    </div>
</div>

3.Js:

$(function () {
    /*
    * 特别说明:
    * 1.对于select标签,必须都指定value属性,没有可以指定空字符串
    * 2.对于checkbox和radio验证失败消息,显示在第一个按钮附近
    */
    //自定义错误显示位置
    $('.demoform').validationEngine({
        promptPosition: 'bottomRight',
        addPromptClass: 'formError-white'
    });
});

显示结果:

JQuery.validationEngine表单验证插件

三、Ajax后台验证实例:

1.后台定义:

public JsonResult Exists(string fieldId, string fieldValue)
{
    if (fieldValue.Length > 3)
        return Json(new object[] { fieldId, true});
    return Json(new object[] { fieldId,false });
}
public JsonResult GetInfoByCode(string fieldId, string fieldValue)
{
    if (fieldValue.Length > 3)
        return Json(new object[] { fieldId, true, "张三丰" });
    return Json(new object[] { fieldId, false, "验证失败" });
}
public JsonResult GetByName(string fieldId, string fieldValue)
{
    if (fieldValue.Length > 3)
        return Json(new object[] { fieldId, true, "后台验证成功", new {
            name="张三丰",
            age=20
        } });
    return Json(new object[] { fieldId, false, "验证失败,来自后台的消息" });
}

2.ajax验证方法扩展:

JQuery.validationEngine表单验证插件

3.HTML定义:

<div class="panel panel-default">
    <div class="panel-heading">
        <div class="panel-title">Ajax后台验证</div>
    </div>
    <div class="panel-body">
        <form role="form" id="form1" class="demoform" action="#">
            <div class="form-group">
                <label class="control-label">昵称:</label>
                <input class="form-control validate[required,ajax[ajaxNickName]]" name="nickname" />
            </div>
            <div class="form-group">
                <label class="control-label">编号:</label>
                <input class="form-control validate[required,ajax[ajaxCode]]" name="code" value="12" />
            </div>
            <div class="form-group">
                <label class="control-label">编号:</label>
                <input class="form-control validate[required,ajax[ajaxName]]" name="code" value="12" />
            </div>
            <div>
                <input type="submit" class="btn btn-success" value="提交" />
            </div>
        </form>
    </div>
</div>

4.JS

/*
* 特别说明:
* 1.ajax验证规则或其他扩展验证规则,可以扩充在jquery.validationEngine-zh_CN.js中
* 2.ajax后台的返回json对象格式:
* 返回数据内容:[String,Boolean]
*    第一个值类型为 String,是接收到 fieldId 的值;
*   第二个值类型为 Boolean,验证通过返回 true,不通过返回 false
* 3.如果有第三个值可以作为‘消息内容显示’,
* 4.对于单个Ajax验证提交,没有提供回调处理等事件
*/
//自定义错误显示位置
$('.demoform').validationEngine({
    promptPosition: 'bottomRight',
    //此属性,指定ajax提交表以及字段ajax验证的方式
    ajaxFormValidationMethod: 'post',
    //指定使用Ajax模式提交表单处理
    ajaxFormValidation: true,
    onAjaxFormComplete: function (status, form, json, options) {
        console.info(status);
        console.info(form);
    },
    onBeforeAjaxFormValidation: function (form, options) {
        console.info(form);
    }
});

显示结果:

JQuery.validationEngine表单验证插件

更多表单验证控件:

JQuery的表单验证之JQuery.validate插件

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/186520.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)
blank

相关推荐

  • 全免费建站攻略!freewebhostingarea空间+免费tk域名

    全免费建站攻略!freewebhostingarea空间+免费tk域名原文地址:http://www.cguage.com/2010/05/free_space_domain.html前几天,无意中发现dot.tk提供的免费tk域名,现在已经开始支持绑定DNS了。而一个

  • Java集合类的使用

    Java集合类的使用Java集合类Collection,它是一个接口,他有两个子接口List和Map,Collection主要方法booleanadd(Ee);booleanaddAll(Collection<?extendsE>c);booleanremove(Objecto);booleanremoveAll(Collection<?>c);voidclear();intsize();booleanisEmpty();booleancon

  • 推荐几本WinCE 6程序开发的书

    推荐几本WinCE 6程序开发的书

  • 汇编语言(1)- 计算机基础[通俗易懂]

    汇编语言(1)- 计算机基础[通俗易懂]一、机器语言机器语言是机器指令的集合,机器指令就是一台机器可以正确执行的命令。电子计算机的机器指令就是一列二进制数据,计算机将其转换为一列高低电平,使计算机的电子器件受到驱动,进行运算。二、汇编语言1.特点汇编语言的主体使汇编指令,汇编指令和机器指令的差别在于表示的方法上,汇编指令是便于记忆的书写格式例如:机器指令:1000100111011000表示把BX寄存器的内容发送到AX寄存器中汇编指令:movax,bx2.汇编语言的组成汇编指令:机器码的助记符,有对应的机器码伪指

  • html页面调用高德地图,html前端使用高德地图入门教程「建议收藏」

    html页面调用高德地图,html前端使用高德地图入门教程「建议收藏」文章目录开始准备工作注册Key前期页面上的准备插件使用插件使用步骤引入插件定位自定义地图显示位置和缩放级别添加实时路况图层获取定位信息(需要使用插件)浏览器定位IP定位获取当前城市信息覆盖物添加覆盖物获取覆盖物覆盖物的操作图层设置图层获取图层移除图层3D地图未完待续…开始准备工作注册Key如果开发者账号包括Key已经有了,请忽略此步骤首先,注册开发者账号,成为高德开放平台开发者登陆之后,在进入…

  • 次世代3A游戏开发将飙至1.5亿美元,游戏时长将更短

    次世代3A游戏开发将飙至1.5亿美元,游戏时长将更短即将翻过的这个世代,是大作的时代,涌现了一大批的大作,譬如《荒野大镖客2》、《GTA5》、《巫师3》等游戏。当然也是预算高涨、不断跳票和开发商经常加班加点的时代。随着PS5和XSX即将到来,随之一起的将是有史以来细节最丰富和预算更贵的游戏世界,问题就出现了:游戏行业还会继续痴迷于这么庞大世界的游戏吗?在GameBabLive会议上,SIE前总裁ShawnLayden表达了对次世代游戏开发成本倍增的担忧。他认为次世代3A游戏的开发将不可避免地从今天的8000万美元飙升至1.5亿美元。因此Lay

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号