validationEngine 表单验证插件使用实例代码


Posted in Javascript onJune 15, 2017

先给大家展示下效果图,如果大家感觉不错,请参考实现代码:

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" rel="external nofollow" />-->
    <link href="https://cdn.bootcss.com/jQuery-Validation-Engine/2.6.4/validationEngine.jquery.css" rel="external nofollow" 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 表单验证插件使用实例代码,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
QQ登录简单实现代码
Mar 09 Javascript
JSON.parse 解析字符串出错的解决方法
Jul 08 Javascript
javascript模拟的Ping效果代码 (Web Ping)
Mar 13 Javascript
获取div编辑框,textarea,input text的光标位置 兼容IE,FF和Chrome的方法介绍
Nov 08 Javascript
JavaScript加强之自定义callback示例
Sep 21 Javascript
JQuery 控制内容长度超出规定长度显示省略号
May 23 Javascript
jquery 取子节点及当前节点属性值
Jul 25 Javascript
正则验证小数点后面只能有两位数的方法
Feb 28 Javascript
JS回调函数基本定义与用法实例分析
May 24 Javascript
jQuery选择器中的特殊符号处理方法
Sep 08 jQuery
微信小程序promsie.all和promise顺序执行
Oct 27 Javascript
Javascript表单序列化原理及实现代码详解
Oct 30 Javascript
JS 设置Cookie 有效期 检测cookie
Jun 15 #Javascript
详解react如何在组件中获取路由参数
Jun 15 #Javascript
react-router JS 控制路由跳转实例
Jun 15 #Javascript
Vue路由跳转问题记录详解
Jun 15 #Javascript
JS奇技之利用scroll来监听resize详解
Jun 15 #Javascript
package.json文件配置详解
Jun 15 #Javascript
一次围绕setTimeout的前端面试经验分享
Jun 15 #Javascript
You might like
短波收音机简介
2021/03/01 无线电
判断是否为指定长度内字符串的php函数
2010/02/16 PHP
PHP之短标签开启设置
2013/06/17 PHP
php实现统计网站在线人数的方法
2015/05/12 PHP
php里array_work用法实例分析
2015/07/13 PHP
PHP convert_uudecode()函数讲解
2019/02/14 PHP
JS实现带关闭功能的阿里妈妈网站顶部滑出banner工具条代码
2015/09/17 Javascript
jquery获取复选框checkbox的值的简单实现方法
2016/05/26 Javascript
详解angularjs实现echart图表效果最简洁教程
2017/11/29 Javascript
详解开发react应用最好用的脚手架 create-react-app
2018/04/24 Javascript
Vue filter格式化时间戳时间成标准日期格式的方法
2018/09/16 Javascript
JS/HTML5游戏常用算法之碰撞检测 地图格子算法实例详解
2018/12/12 Javascript
[55:32]2018DOTA2亚洲邀请赛 4.4 淘汰赛 EG vs LGD 第二场
2018/04/05 DOTA
[02:38]2018年度DOTA2最佳劣单位选手-完美盛典
2018/12/17 DOTA
Python中为feedparser设置超时时间避免堵塞
2014/09/28 Python
跟老齐学Python之用while来循环
2014/10/02 Python
Windows下anaconda安装第三方包的方法小结(tensorflow、gensim为例)
2018/04/05 Python
python 拼接文件路径的方法
2018/10/23 Python
Python+OpenCV图片局部区域像素值处理改进版详解
2019/01/23 Python
浅谈Python小波分析库Pywavelets的一点使用心得
2019/07/09 Python
Python高阶函数、常用内置函数用法实例分析
2019/12/26 Python
scrapy爬虫:scrapy.FormRequest中formdata参数详解
2020/04/30 Python
python如何保存文本文件
2020/06/07 Python
a标签下载链接的简单实现
2016/09/13 HTML / CSS
受外贸欢迎的美国主机:BlueHost
2017/05/16 全球购物
哈利波特商店:Harry Potter Shop
2018/11/30 全球购物
财务经理岗位职责
2013/11/09 职场文书
求职简历推荐信范文
2013/12/02 职场文书
不假外出检讨书
2014/01/27 职场文书
政法学院毕业生求职信
2014/02/28 职场文书
入党推优材料
2014/06/02 职场文书
七一慰问简报
2015/07/20 职场文书
开学典礼校长致辞
2015/07/29 职场文书
2016年党员读书月活动总结
2016/04/06 职场文书
python绘图subplots函数使用模板的示例代码
2021/04/30 Python
Mysql 如何查询时间段交集
2021/06/08 MySQL