1200字范文,内容丰富有趣,写作的好帮手!
1200字范文 > JQuery.validationEngine表单验证插件

JQuery.validationEngine表单验证插件

时间:2019-05-01 03:32:27

相关推荐

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源代码地址:/posabsolute/jQuery-Validation-Engine

2.中文文档API参考:/jquery/validation-engine/

3.中文优化版 Ciaoca下载

Demo实例源代码地址:/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插件

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。