JQuery.validationEngine表单验证插件(推荐)


Posted in Javascript onDecember 10, 2016

 一、说明

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.validationEngine表单验证插件(推荐),希望对大家有所帮助,如果大家有任何疑问欢迎给我留言,小编会及时回复大家的!

Javascript 相关文章推荐
DEFER怎么用?
Jul 01 Javascript
jquery 插件实现图片延迟加载效果代码
Feb 06 Javascript
国外大牛IE版本检测!现在IE都到9了,IE检测代码
Jan 04 Javascript
jQuery插件expander实现图片翻转特效
May 21 Javascript
jquery仅用6行代码实现滑动门效果
Sep 07 Javascript
详解AngularJS跨页面传值(ui-router)
Aug 23 Javascript
对于input 框限定输入值为浮点型的js代码
Sep 25 Javascript
mui框架 页面无法滚动的解决方法(推荐)
Jan 25 Javascript
JS动态插入脚本和插入引用外部链接脚本的方法
May 21 Javascript
微信小程序js文件改变参数并在视图上及时更新【推荐】
Jun 11 Javascript
layui table数据修改的回显方法
Sep 04 Javascript
基于vue实现简易打地鼠游戏
Aug 21 Javascript
JS产生随机数的用法小结
Dec 10 #Javascript
基于JavaScript实现随机颜色输入框
Dec 10 #Javascript
BootStrap中
Dec 10 #Javascript
jQuery Ajax请求后台数据并在前台接收
Dec 10 #Javascript
JS 循环li添加点击事件 (闭包的应用)
Dec 10 #Javascript
JS实战篇之收缩菜单表单布局
Dec 10 #Javascript
javascript动画之磁性吸附效果篇
Dec 09 #Javascript
You might like
php ignore_user_abort与register_shutdown_function 使用方法
2009/06/14 PHP
php表单提交问题的解决方法
2011/04/12 PHP
使用session判断用户登录用户权限(超简单)
2013/06/08 PHP
php从字符串创建函数的方法
2015/03/16 PHP
PHP实现批量生成App各种尺寸Logo
2015/03/19 PHP
php格式文件打开的四种方法
2018/02/24 PHP
广泛收集的jQuery拖放插件集合
2012/04/09 Javascript
js 利用image对象实现图片的预加载提高访问速度
2013/03/29 Javascript
js判断IE浏览器版本过低示例代码
2013/11/22 Javascript
javascript实现数独解法
2015/03/14 Javascript
js兼容火狐获取图片宽和高的方法
2015/05/21 Javascript
使用Meteor配合Node.js编写实时聊天应用的范例
2015/06/23 Javascript
使用CoffeeScrip优美方式编写javascript代码
2015/10/28 Javascript
jQuery实现的纵向下拉菜单实例详解【附demo源码下载】
2016/07/09 Javascript
node.js express安装及示例网站搭建方法(分享)
2016/08/22 Javascript
JavaScript编写棋盘覆盖代码详解
2017/08/28 Javascript
基于Vue单文件组件详解
2017/09/15 Javascript
记录一篇关于redux-saga的基本使用过程
2018/08/18 Javascript
JS动态显示倒计时效果
2019/12/12 Javascript
javascript设计模式 ? 工厂模式原理与应用实例分析
2020/04/09 Javascript
Node.js 中判断一个文件是否存在
2020/08/24 Javascript
[03:27]最受玩家喜爱奖提名:PZH_Element 致玩家寄语
2016/12/20 DOTA
python批量修改文件名的实现代码
2014/09/01 Python
Python实现对一个函数应用多个装饰器的方法示例
2018/02/09 Python
基于Python批量生成指定尺寸缩略图代码实例
2019/11/20 Python
详解pyinstaller生成exe的闪退问题解决方案
2020/06/19 Python
opencv 图像滤波(均值,方框,高斯,中值)
2020/07/08 Python
CSS3弹性伸缩布局之box布局
2016/07/12 HTML / CSS
HTML5实现Notification API桌面通知功能
2016/03/02 HTML / CSS
html5+css3进度条倒计时动画特效代码【推荐】
2016/03/08 HTML / CSS
实习生岗位职责
2014/04/12 职场文书
中央空调节能方案
2014/06/15 职场文书
学党史心得体会
2014/09/05 职场文书
2014年最新领导班子整改方案
2014/09/27 职场文书
幼儿园综治宣传月活动总结
2015/05/07 职场文书
鸿蒙3.0体验感怎么样? 鸿蒙3.0系统评测向
2022/08/14 数码科技