JQuery.validationEngine表单验证插件

一、说明

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'});
});

显示结果：

三、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验证方法扩展：

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的表单验证之JQuery.validate插件

JQuery.validationEngine表单验证插件相关推荐

基于jQuery的表单验证插件：jValidate
网上基于jQuery的表单验证插件已有很多,但是这个轮子我还是继续做一个,因为这个表单验证插件是从我以前的个人JS框架移值过来的(我已慢慢投入jQuery的怀抱),并且它的验证规则书写方式也许会让你眼 ...
基于jQuery的表单验证插件Validation Engine
Validation Engine是一款基于Jquery的js表单验证插件.相对于之前的传统表单验证工具,其优点是自定义验证内容更广泛以及与AJAX的方便整合. 附件提供了该插件,解压密码为:im48 ...
jQuery Validate 表单验证插件----自定义校验结果样式
一.下载依赖包网盘下载:https://yunpan.cn/cryvgGGAQ3DSW 访问密码 f224 二.引入依赖包 <script src="../../scripts/j ...
jquery validate表单验证插件
1 表单验证的准备工作在开启长篇大论之前,首先将表单验证的效果展示给大家. 1.点击表单项,显示帮助提示 2.鼠标离开表单项时,开始校验元素 3.鼠标离开后的正确.错误提示及鼠标移入时的帮 ...
html中表单的校验的插件,功能强大的jquery.validate表单验证插件
本文实例为大家分享了jquery.validate表单验证的使用方法,供大家参考,具体内容如下 1 .表单验证的准备工作在开启长篇大论之前,首先将表单验证的效果展示给大家. 1.点击表单项,显示帮助 ...
jQuery Validate 表单验证插件----在class属性中添加校验规则进行简单的校验
一.下载插件包. 网盘下载:https://yunpan.cn/cryvgGGAQ3DSW 访问密码 f224 二.jQuery表单验证插件----添加class属性形式的校验 <!DOCTY ...
jQuery Validate 表单验证插件----Validate简介，官方文档，官方下载地址
一. jQuery Validate 插件的介绍 jQuery Validate 插件为表单提供了强大的验证功能,让客户端表单验证变得更简单,同时提供了大量的定制选项,满足应用程序各种需求.该插件捆 ...
jQuery Validate 表单验证插件
一. jQuery Validate 插件的介绍 jQuery Validate 插件为表单提供了强大的验证功能,让客户端表单验证变得更简单,同时提供了大量的定制选项,满足应用程序各种需求.该插件捆绑 ...
jQuery formValidator表单验证插件4.1.0 下载演示文档可换肤代码生成器
更新记录: 2011/6/5 jQuery formValidator 4.1.0 ver 申明: 1.所有DEMO引用jQuery类库的时候,类库后面直接跟了版本号--表示插件支持的最高类库版本号 ...

JQuery.validationEngine表单验证插件

JQuery.validationEngine表单验证插件相关推荐

最新文章

热门文章