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 相关文章推荐
图片按比例缩放函数
Jun 26 Javascript
javascript的函数
Jan 31 Javascript
JavaScript 中的replace方法说明
Apr 13 Javascript
js中split函数的使用方法说明
Dec 26 Javascript
JavaScript原生数组Array常用方法
Apr 06 Javascript
详解AngularJS1.6版本中ui-router路由中/#!/的解决方法
May 22 Javascript
JS利用正则表达式实现简单的密码强弱判断实例
Jun 16 Javascript
vue、react等单页面项目应该这样子部署到服务器
Jan 03 Javascript
基于node+vue实现简单的WebSocket聊天功能
Feb 01 Javascript
Javascript前端下载后台传来的文件流代码实例
Aug 18 Javascript
理解JavaScript中的Proxy 与 Reflection API
Sep 21 Javascript
vue通过接口直接下载java生成好的Excel表格案例
Oct 26 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
php5 图片验证码实现代码
2009/12/11 PHP
php文件下载处理方法分析
2015/04/22 PHP
thinkPHP框架实现的无限回复评论功能示例
2018/06/09 PHP
javascript 贪吃蛇实现代码
2008/11/22 Javascript
Js 订制自己的AlertBox(信息提示框)
2009/01/09 Javascript
IE FF OPERA都可用的弹出层实现代码
2009/09/29 Javascript
js window.print实现打印特定控件或内容
2013/09/16 Javascript
在JS数组特定索引处指定位置插入元素
2014/07/27 Javascript
Javascript中的return作用及javascript return关键字用法详解
2015/11/05 Javascript
jQuery实现可以控制图片旋转角度效果(附demo源码下载)
2016/01/27 Javascript
Bootstrap简单表单显示学习笔记
2016/11/15 Javascript
JavaScript 基础表单验证示例(纯Js实现)
2017/07/20 Javascript
微信小程序五子棋游戏AI实现方法【附demo源码下载】
2019/02/20 Javascript
layui监听下拉选框选中值变化的方法(包含监听普通下拉选框)
2019/09/24 Javascript
解决idea开发遇到javascript动态添加html元素时中文乱码的问题
2020/09/29 Javascript
js基于canvas实现时钟组件
2021/02/07 Javascript
[06:15]2016国际邀请赛中国区预选赛单车采访:我顶WINGS
2016/06/27 DOTA
python 输出一个两行字符的变量
2009/02/05 Python
python在windows下实现ping操作并接收返回信息的方法
2015/03/20 Python
Python的Asyncore异步Socket模块及实现端口转发的例子
2016/06/14 Python
python制作websocket服务器实例分享
2016/11/20 Python
Python中getpass模块无回显输入源码解析
2018/01/11 Python
python 自定义异常和异常捕捉的方法
2018/10/18 Python
使用python根据端口号关闭进程的方法
2018/11/06 Python
python redis连接 有序集合去重的代码
2019/08/04 Python
Python人工智能之路 jieba gensim 最好别分家之最简单的相似度实现
2019/08/13 Python
如何理解python对象
2020/06/21 Python
OpenCV读取与写入图片的实现
2020/10/13 Python
HTML4和HTML5之间除了相似以外的10个主要不同
2012/12/13 HTML / CSS
Ralph Lauren法国官网:美国高品味时装品牌
2017/12/08 全球购物
测试驱动开发的主要步骤是什么
2014/12/10 面试题
毕业生面试求职信
2014/06/23 职场文书
小学社团活动总结
2014/06/27 职场文书
2014年医院工作总结
2014/11/20 职场文书
公务员个人年终总结
2015/02/12 职场文书
Golang获取List列表元素的四种方式
2022/04/20 Golang