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 相关文章推荐
豆瓣网的jquery代码实例
Jun 15 Javascript
JS在IE和FF下attachEvent,addEventListener学习笔记
Nov 26 Javascript
js与jquery获取父元素,删除子元素的两种不同方法
Jan 09 Javascript
jQuery实现在textarea指定位置插入字符或表情的方法
Mar 11 Javascript
js实现温度计时间样式代码分享
Aug 21 Javascript
跟我学习javascript的undefined与null
Nov 17 Javascript
jquery validate表单验证的基本用法入门
Jan 18 Javascript
jQuery和CSS仿京东仿淘宝列表导航菜单
Jan 04 Javascript
JS在浏览器中解析Base64编码图像
Feb 09 Javascript
简述vue状态管理模式之vuex
Aug 29 Javascript
在layui tab控件中载入外部html页面的方法
Sep 04 Javascript
Vue项目结合Vue-layer实现弹框式编辑功能(实例代码)
Mar 11 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
BBS(php &amp; mysql)完整版(三)
2006/10/09 PHP
如何开发一个虚拟域名系统
2006/10/09 PHP
如何给phpcms v9增加类似于phpcms 2008中的关键词表
2013/07/01 PHP
PHP 通过Socket收发十六进制数据的实现代码
2013/08/16 PHP
php实现求相对时间函数
2015/06/15 PHP
php实现图片按比例截取的方法
2017/02/06 PHP
javascript import css实例代码
2008/07/18 Javascript
jQuery操作cookie方法实例教程
2014/11/25 Javascript
关于session和cookie的简单理解
2016/06/08 Javascript
浅谈jQuery中Ajax事件beforesend及各参数含义
2016/12/03 Javascript
Bootbox将后台JSON数据填充Form表单的实例代码
2018/09/10 Javascript
详解Node.js 中使用 ECDSA 签名遇到的坑
2018/11/26 Javascript
c++生成dll使用python调用dll的方法
2014/01/20 Python
详解Python的单元测试
2015/04/28 Python
Python类的动态修改的实例方法
2017/03/24 Python
python+selenium打印当前页面的titl和url方法
2018/06/22 Python
使用python采集脚本之家电子书资源并自动下载到本地的实例脚本
2018/10/23 Python
详解mac python+selenium+Chrome 简单案例
2019/11/08 Python
Python3和PyCharm安装与环境配置【图文教程】
2020/02/14 Python
Python yield的用法实例分析
2020/03/06 Python
Python爬虫简单运用爬取代理IP的实现
2020/12/01 Python
详解css3中的伪类before和after常见用法
2020/11/17 HTML / CSS
ebookers英国:隶属全球最大的在线旅游公司Expedia
2017/12/28 全球购物
全球立体声:World Wide Stereo
2018/09/29 全球购物
戴尔新加坡官网:Dell Singapore
2020/12/13 全球购物
巴西本土电商平台:Americanas
2020/06/21 全球购物
Java中的基本数据类型所占存储空间大小固定的吗
2012/02/15 面试题
我们的节日元宵活动方案
2014/08/23 职场文书
咖啡店创业计划书范文
2014/09/15 职场文书
横店影视城导游词
2015/02/06 职场文书
老公保证书怎么写
2015/02/26 职场文书
初中英语教师个人工作总结2015
2015/07/21 职场文书
2015年高三毕业班班主任工作总结
2015/10/22 职场文书
五星级酒店宣传口号
2015/12/25 职场文书
班组长如何制订适合本班组的工作计划?
2019/07/10 职场文书
spring cloud 配置中心客户端启动遇到的问题
2021/09/25 Java/Android