validationEngine 表单验证插件使用
废话少说，直接上代码，可拷贝直接运行：
<!DOCTYPE html>
<html lang="zh"> <head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>validationEngine 插件</title>
<!--<link rel="stylesheet" type="text/css" href="css/validationEngine.jquery.css" />-->
<link href="https://cdn.bootcss.com/jQuery-Validation-Engine/2.6.4/validationEngine.jquery.css" rel="stylesheet">
<style type="text/css">
*{
padding: 0;
margin: 0;
}
#form{
padding-left: 20px;
}
#form .line{
padding: 10px 0;
margin: 10px 0;
border-top: 1px dashed #0044CC;
}
</style>
</head> <body>
<form action="" method="post" id="form">
<div class='line'>
必填项--输入框
</div>
<input value="" class="validate[required]" type="text" name="req">
<div class='line'>
必填项--复选框
</div>
<input class="validate[required]" type="checkbox" name="agree">我同意服务协议
<div class='line'>
url验证
</div>
<input value="http://" class="validate[required,custom[url]]" type="text" name="url">
<div class='line'>
email验证
</div>
<input value="forced_error" class="validate[required,custom[email]]" type="text" name="email">
<div class='line'>
IP 地址（v4）
</div>
<input value="192.168.3." class="validate[required,custom[ipv4]]" type="text" name="ip">
<div class='line'>
数值
</div>
<input value="-33.87a" class="validate[required,custom[number]]" type="text" name="number">
<div class='line'>
整数
</div>
<input value="10.1" class="validate[required,custom[integer]]" type="text" name="integer">
<div class='line'>
相等运算
</div>
<input value="karnius" class="validate[required]" type="password" name="password" id="password">
<input value="kaniusBAD" class="validate[required,equals[password]]" type="password" name="password2" id="password2">
<div class='line'>
限制最小字符数
</div>
<input value="" class="validate[required,minSize[6]]" type="text" name="minsize">
<div class='line'>
限制最大字符数
</div>
<input value="0123456789" class="validate[optional,maxSize[6]]" type="text" name="maxsize"> <div class='line'>
输入整数（必须大于或等于 -5）
</div>
<input value="-7" class="validate[required,custom[integer],min[-5]]" type="text" name="min">
<div class='line'>
输入整数（必须小于或等于 50）：
</div>
<input value="55" class="validate[required,custom[integer],max[50]]" type="text" name="max">
</form>
<!--<script src="../jquery/jquery-1.12.4.min.js" type="text/javascript" charset="utf-8"></script>-->
<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<!--<script src="js/jquery.validationEngine.min.js" type="text/javascript" charset="utf-8"></script>-->
<script src="https://cdn.bootcss.com/jQuery-Validation-Engine/2.6.4/jquery.validationEngine.min.js"></script>
<!--<script src="js/jquery.validationEngine-zh_CN.min.js" type="text/javascript" charset="utf-8"></script>-->
<script src="https://cdn.bootcss.com/jQuery-Validation-Engine/2.6.4/languages/jquery.validationEngine-zh_CN.min.js"></script>
<script type="text/javascript">
jQuery(document).ready(function() {
jQuery('#form').validationEngine({
scroll: false,
promptPosition: 'centerRight',
maxErrorsPerField: 1,
showOneMessage: true,
addPromptClass: 'formError-noArrow formError-text'
});
});
</script>
</body> </html>
效果：
validationEngine 表单验证插件使用的更多相关文章
- jQuery 表单验证插件 jQuery Validation Engine 使用
jQuery 表单验证插件 jQuery Validation Engine 使用方式如下: 1.引入头文件(注意一定要把jQuery放在前面),指定使用 jQuery Validation Engi ...
- 【锋利的jQuery】表单验证插件踩坑
和前几篇博文提到的一样,由于版本原因,[锋利的jQuery]表单验证插件部分又出现照着敲不出效果的情况. 书中的使用方法: 1. 引入jquery源文件, 2. 引入表单验证插件js文件, 3. 在f ...
- jquery validate表单验证插件-推荐
1 表单验证的准备工作 在开启长篇大论之前,首先将表单验证的效果展示给大家. 1.点击表单项,显示帮助提示 2.鼠标离开表单项时,开始校验元素 3.鼠标离开后的正确.错误提示及鼠标移入时的帮 ...
- 表单验证插件之jquery.validate.js
提到表单验证的插件,第一个想到的就是jquery.validate.js,所以小生想在这里稍微详细地说一下这款插件的具体使用方法,便于理解,我直接附上整段demo的代码(没怎么调样式,主要是看js): ...
- jQuery学习之：Validation表单验证插件
http://polaris.blog.51cto.com/1146394/258781/ 最近由于公司决定使用AJAX + Struts2来重构项目,让我仔细研究一下这两个,然后集中给同事讲讲,让每 ...
- jquery validate表单验证插件
1 表单验证的准备工作 在开启长篇大论之前,首先将表单验证的效果展示给大家. 1.点击表单项,显示帮助提示 2.鼠标离开表单项时,开始校验元素 3.鼠标离开后的正确.错误提示及鼠标移入时的帮 ...
- 表单验证插件 - formValidator
表单验证插件 - formValidator * 引入formValidator插件文件 * 引入formValidator插件的主文件 * 引入formValidator插件的正则有关文件 * 引入 ...
- JS表单验证插件(支持Ajax验证)
自己编写了一个表单验证插件,支持ajax验证,使用起来很简单. 每个需要验证的表单元素下面有一个span标签,这个标签的class有一个valid表示需要验证,如果有nullable则表示可为空:ru ...
- 轻量级实用JQuery表单验证插件：validateForm5
表单验证是Web项目一个必不可少的环节,而且是一项重复的劳动,于是小菜封装了一款简单的表单验证插件,名字叫:validateForm5. validateForm5插件基于Jquery,并向HTML5 ...
随机推荐
- 74HC245 74HCT245 74LV245 74LVC245 74LVC4245A 74LVC8T245 74LVC16T245 74ALVC164245
74HC245/74HCT245 The 74HC245; 74HCT245 is a high-speed Si-gate CMOS device and is pin compatible wit ...
- Ext Form
表单Ext.form.FormPanel 1.表单 对于传统的b/s应用来说,数据录入元素是放在表单<form>标签里面的.而对于ExtJS应用来说,则可以直接使用FormPanel控件来 ...
- DevExpress SpreadSheet报表模板设置 z
DevExpres SpreadSheetControl报表模板设置,这一个还是挺牛逼的,字段绑定直接在单元格里面设置公式(=Field("字段名")),当然直接拖更方便, 跟xt ...
- oracle直方图
直方图 当某列数据分布不均衡.为了让CBO能生成最佳的运行计划,我们可能须要对表收集直方图,直方图最大的桶数(Bucket)是254. 收集直方图是一个很耗时的过程,如无必要.千万别去收集直方图. O ...
- java通过System.getProperty获取系统属性
getProperties public static Properties getProperties() 确定当前的系统属性. 首先,如果有安全管理器,则不带参数直接调用其 checkProper ...
- java中方法drawImage()的参数详细解释
public abstract boolean drawImage(Image img,int x,int y,int width,int height,ImageObserver observer) ...
- android 内存溢出oom错误的一些小见解
转:http://blog.csdn.net/xuhui_7810/article/details/9493681 我们在代码里调用setBackgroundResource(int resid)来设 ...
- vld,Bounds Checker,memwatch,mtrace,valgrind,debug_new几种内存泄露检测工具的比较,Valgrind Cheatsheet
概述 内存泄漏(memory leak)指由于疏忽或错误造成程序未能释放已经不再使用的内存的情况,在大型的.复杂的应用程序中,内存泄漏是常见的问题.当以前分配的一片内存不再需要使用或无法访问时,但是却 ...
- Flask 学习（三）模板
Flask 学习(三)模板 Flask 为你配置 Jinja2 模板引擎.使用 render_template() 方法可以渲染模板,只需提供模板名称和需要作为参数传递给模板的变量就可简单执行. 至于 ...
- 【BZOJ】【2595】【WC2008】游览计划
Orz zky神犇http://blog.csdn.net/iamzky/article/details/42029921 spfa的灵活应用!(好像是求了一个叫做斯坦纳树的东西……) o(︶︿︶)o ...