validationEngine 表单验证插件使用方法实例分享
本文将以实例代码给大家介绍了jquery 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">
<p class='line'>
必填项--输入框
</p>
<input value="" class="validate[required]" type="text" name="req">
<p class='line'>
必填项--复选框
</p>
<input class="validate[required]" type="checkbox" name="agree">我同意服务协议
<p class='line'>
url验证
</p>
<input value="http://" class="validate[required,custom[url]]" type="text" name="url">
<p class='line'>
email验证
</p>
<input value="forced_error" class="validate[required,custom[email]]" type="text" name="email">
<p class='line'>
IP 地址（v4）
</p>
<input value="192.168.3." class="validate[required,custom[ipv4]]" type="text" name="ip">
<p class='line'>
数值
</p>
<input value="-33.87a" class="validate[required,custom[number]]" type="text" name="number">
<p class='line'>
整数
</p>
<input value="10.1" class="validate[required,custom[integer]]" type="text" name="integer">
<p class='line'>
相等运算
</p>
<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">
<p class='line'>
限制最小字符数
</p>
<input value="" class="validate[required,minSize[6]]" type="text" name="minsize">
<p class='line'>
限制最大字符数
</p>
<input value="0123456789" class="validate[optional,maxSize[6]]" type="text" name="maxsize">
<p class='line'>
输入整数（必须大于或等于 -5）
</p>
<input value="-7" class="validate[required,custom[integer],min[-5]]" type="text" name="min">
<p class='line'>
输入整数（必须小于或等于 50）：
</p>
<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 表单验证插件使用方法实例分享的详细内容。更多信息请关注PHP中文网其他相关文章！
热AI工具
Undresser.AI Undress
人工智能驱动的应用程序，用于创建逼真的裸体照片
AI Clothes Remover
用于从照片中去除衣服的在线人工智能工具。
Undress AI Tool
免费脱衣服图片
Clothoff.io
AI脱衣机
AI Hentai Generator
免费生成ai无尽的。
热门文章
热工具
记事本++7.3.1
好用且免费的代码编辑器
SublimeText3汉化版
中文版，非常好用
禅工作室 13.0.1
功能强大的PHP集成开发环境
Dreamweaver CS6
视觉化网页开发工具
SublimeText3 Mac版
神级代码编辑软件(SublimeText3)
热门话题
DirectX修复工具怎么用？DirectX修复工具详细使用方法
Mar 15, 2024 am 08:31 AM
DirectX修复工具是专业的系统工具，主要功能是检测当前系统的DirectX状态，如果发现异常就可以直接修复。可能还有很多用户不清楚DirectX修复工具怎么用吧，下面就来看看详细教程。 1、使用修复工具软件进行修复检测。 2、如果修复完成后提示C++组件存在异常的问题，请点击取消按钮，然后点击工具菜单栏。 3、点击选项按钮，选择扩展，点击开始扩展按钮。 4、扩展完成后再重新进行检测修复即可。 5、如果修复工具操作完成后仍未解决问题，可以尝试卸载重新安装报错的程序。
PyCharm新手指南：全面了解插件安装！
Feb 25, 2024 pm 11:57 PM
PyCharm是一款功能强大且受欢迎的Python集成开发环境（IDE），提供了丰富的功能和工具，使得开发者们可以更加高效地编写代码。而PyCharm的插件机制更是其功能扩展的利器，通过安装不同的插件，可以为PyCharm增加各种功能和定制化的特性。因此，对于PyCharm新手来说，了解并熟练安装插件是至关重要的。本文将为你详细介绍PyCharm插件安装的全
![在Illustrator中加载插件时出错[修复]](https://img.php.cn/upload/article/000/465/014/170831522770626.jpg?x-oss-process=image/resize,m_fill,h_207,w_330)
在Illustrator中加载插件时出错[修复]
Feb 19, 2024 pm 12:00 PM
启动AdobeIllustrator时是否会弹出加载插件时出错的消息？一些Illustrator用户在打开该应用程序时遇到了此错误。消息后面紧跟着一系列有问题的插件。该错误提示表明已安装的插件存在问题，但也可能是由于VisualC++DLL文件损坏或首选项文件受损等其他原因引起。如果遇到此错误，我们将在本文中指导您修复问题，请继续阅读以下内容。在Illustrator中加载插件时出错如果您在尝试启动AdobeIllustrator时收到“加载插件时出错”的错误消息，您可以使用以下用途：以管理员身
Chrome的插件扩展程序安装目录是什么
Mar 08, 2024 am 08:55 AM
Chrome的插件扩展程序安装目录是什么？正常情况下，Chrome插件扩展程序的默认安装目录如下：1、windowsxp中chrome插件默认安装目录位置:C:\DocumentsandSettings\用户名\LocalSettings\ApplicationData\Google\Chrome\UserData\Default\Extensions2、windows7中chrome插件默认安装目录位置:C:\Users\用户名\AppData\Local\Google\Chrome\User
分享Edge浏览器不支持此插件的三种解决办法
Mar 13, 2024 pm 04:34 PM
用户使用Edge浏览器的过程中可能会添加一些插件来满足自己更多的使用需求。但是在添加插件时显示不支持此插件，这该如何解决？今日小编就来给大家分享三种解决办法，快来试试吧。 方法一：尝试用其他的浏览器。 方法二：浏览器上的FlashPlayer可能过时或者丢失，导致此插件不受支持状态，可在官网下载最新版本。 方法三：同时按下“Ctrl+Shift+Delete”键。 点击“清除数据”，重新打开浏览器即可。
HTTP 525状态码介绍：探究其定义和应用
Feb 18, 2024 pm 10:12 PM
HTTP525状态码简介：了解其定义和使用方法HTTP（HypertextTransferProtocol）525状态码是指服务器在SSL握手过程中发生错误，导致无法建立安全连接。在传输层安全性（TLS）握手期间发生错误时，服务器将返回此状态码。该状态码属于服务器错误类别，通常表示服务器配置或设置问题。当客户端尝试通过HTTPS连接到服务器时，服务器无
百度网盘怎么用-百度网盘的使用方法
Mar 04, 2024 pm 09:28 PM
有很多朋友还不知道百度网盘怎么用，所以下面小编就讲解了百度网盘的使用方法，有需要的小伙伴赶紧来看一下吧，相信对大家一定会有所帮助哦。第一步：安装好百度网盘后直接登录(如图所示);第二步：然后可根据页面提示选择“我的分享”和“传输列表”(如图所示);第三步：在“好友分享”里可以把图片和文件直接分享给好友(如图所示);第四步：接着选择“分享”后可勾选电脑文件或者网盘文件(如图所示);第五步：然后就可以寻找好友(如图所示);第六步：还可以在“功能宝箱”中寻找自己需要的功能(如图所示)。上面就是小编为大
快速学会复制和粘贴操作
Feb 18, 2024 pm 03:25 PM
复制粘贴快捷键使用方法复制粘贴是我们在日常使用电脑时经常会遇到的操作。为了提高工作效率，熟练掌握复制粘贴快捷键是非常重要的。本文将介绍一些常用的复制粘贴快捷键使用方法，帮助读者更加方便地进行复制粘贴操作。复制快捷键：Ctrl+CCtrl+C是复制的快捷键，通过按住Ctrl键然后再按C键，即可将选中的文字、文件、图片等内容复制到剪贴板。要使用该快捷键，
