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 相关文章推荐
表单序列化与jq中的serialize使用示例
Feb 21 Javascript
使用 JavaScript 进行函数式编程 (一) 翻译
Oct 02 Javascript
js实现文字闪烁特效的方法
Dec 17 Javascript
jQuery插件之jQuery.Form.js用法实例分析(附demo示例源码)
Jan 04 Javascript
浅谈toLowerCase和toLocaleLowerCase的区别
Aug 15 Javascript
jquery select2的使用心得(推荐)
Dec 04 Javascript
快速解决vue-cli不能初始化webpack模板的问题
Mar 20 Javascript
vue2.0 实现导航守卫的具体用法(路由守卫)
May 17 Javascript
详解vue2.0+axios+mock+axios-mock+adapter实现登陆
Jul 19 Javascript
Layui动态生成select下拉选择框不显示的解决方法
Sep 24 Javascript
JS内置对象和Math对象知识点详解
Apr 03 Javascript
原生js实现弹幕效果
Nov 29 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强制下载类型的实现代码
2011/04/21 PHP
关于PHP session 存储方式的详细介绍
2013/06/25 PHP
解析PHP强制转换类型及远程管理插件的安全隐患
2014/06/30 PHP
php实现删除指定目录下相关文件的方法
2014/10/20 PHP
PHP使用feof()函数读文件的方法
2014/11/07 PHP
Yii2中事务的使用实例代码详解
2016/09/07 PHP
PHP实现表单提交数据的验证处理功能【防SQL注入和XSS攻击等】
2017/07/21 PHP
php数据库的增删改查 php与javascript之间的交互
2017/08/31 PHP
jquery api参考 visualjquery 中国线路 速度快
2007/11/30 Javascript
JS两种定义方式的区别、内部原理
2013/11/21 Javascript
为开发者准备的10款最好的jQuery日历插件
2014/02/04 Javascript
nodejs实现HTTPS发起POST请求
2015/04/23 NodeJs
angularjs实现下拉列表的选中事件示例
2017/03/03 Javascript
JS奇技之利用scroll来监听resize详解
2017/06/15 Javascript
详解vue渲染从后台获取的json数据
2017/07/06 Javascript
详解js模板引擎art template数组渲染的方法
2018/10/09 Javascript
傻瓜式解读koa中间件处理模块koa-compose的使用
2018/10/30 Javascript
vue.js+element 默认提示中英文操作
2020/11/11 Javascript
[01:03:00]DOTA2上海特级锦标赛A组败者赛 EHOME VS CDEC第一局
2016/02/25 DOTA
使用Python下载Bing图片(代码)
2013/11/07 Python
详解Python中expandtabs()方法的使用
2015/05/18 Python
机器学习python实战之手写数字识别
2017/11/01 Python
启动Atom并运行python文件的步骤
2018/11/09 Python
Django后端接收嵌套Json数据及解析详解
2019/07/17 Python
Python argparse模块应用实例解析
2019/11/15 Python
python图形开发GUI库wxpython使用方法详解
2020/02/14 Python
Window系统下Python如何安装OpenCV库
2020/03/05 Python
Superdry瑞典官网:英国日本街头风品牌
2017/05/17 全球购物
茶叶生产计划书
2014/01/10 职场文书
音乐专业自荐信
2014/02/07 职场文书
英语教师自荐信
2014/05/26 职场文书
2014年学校工作总结
2014/11/20 职场文书
2014年酒店年度工作总结
2014/12/10 职场文书
2014年银行年终工作总结
2014/12/19 职场文书
工厂仓库管理员岗位职责
2015/04/09 职场文书
盗窃罪辩护词范文
2015/05/21 职场文书