废话少说，直接上代码，可拷贝直接运行：
1 <!DOCTYPE html> 2 <html lang="zh"> 3 4 <head> 5 <meta charset="UTF-8" /> 6 <meta name="viewport" content="width=device-width, initial-scale=1.0" /> 7 <meta http-equiv="X-UA-Compatible" content="ie=edge" /> 8 <title>validationEngine 插件</title> 9 <!--<link rel="stylesheet" type="text/css" href="css/validationEngine.jquery.css" />--> 10 <link href="https://cdn.bootcss.com/jQuery-Validation-Engine/2.6.4/validationEngine.jquery.css" rel="stylesheet"> 11 <style type="text/css"> 12 *{ 13 padding: 0; 14 margin: 0; 15 } 16 #form{ 17 padding-left: 20px; 18 } 19 #form .line{ 20 padding: 10px 0; 21 margin: 10px 0; 22 border-top: 1px dashed #0044CC; 23 } 24 </style> 25 </head> 26 27 <body> 28 <form action="" method="post" id="form"> 29 <div class='line'> 30 必填项--输入框 31 </div> 32 <input value="" class="validate[required]" type="text" name="req"> 33 <div class='line'> 34 必填项--复选框 35 </div> 36 <input class="validate[required]" type="checkbox" name="agree">我同意服务协议 37 <div class='line'> 38 url验证 39 </div> 40 <input value="http://" class="validate[required,custom[url]]" type="text" name="url"> 41 <div class='line'> 42 email验证 43 </div> 44 <input value="forced_error" class="validate[required,custom[email]]" type="text" name="email"> 45 <div class='line'> 46 IP 地址（v4） 47 </div> 48 <input value="192.168.3." class="validate[required,custom[ipv4]]" type="text" name="ip"> 49 <div class='line'> 50 数值 51 </div> 52 <input value="-33.87a" class="validate[required,custom[number]]" type="text" name="number"> 53 <div class='line'> 54 整数 55 </div> 56 <input value="10.1" class="validate[required,custom[integer]]" type="text" name="integer"> 57 <div class='line'> 58 相等运算 59 </div> 60 <input value="karnius" class="validate[required]" type="password" name="password" id="password"> 61 <input value="kaniusBAD" class="validate[required,equals[password]]" type="password" name="password2" id="password2"> 62 <div class='line'> 63 限制最小字符数 64 </div> 65 <input value="" class="validate[required,minSize[6]]" type="text" name="minsize"> 66 <div class='line'> 67 限制最大字符数 68 </div> 69 <input value="0123456789" class="validate[optional,maxSize[6]]" type="text" name="maxsize"> 70 71 <div class='line'> 72 输入整数（必须大于或等于 -5） 73 </div> 74 <input value="-7" class="validate[required,custom[integer],min[-5]]" type="text" name="min"> 75 <div class='line'> 76 输入整数（必须小于或等于 50）： 77 </div> 78 <input value="55" class="validate[required,custom[integer],max[50]]" type="text" name="max"> 79 </form> 80 <!--<script src="../jquery/jquery-1.12.4.min.js" type="text/javascript" charset="utf-8"></script>--> 81 <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script> 82 <!--<script src="js/jquery.validationEngine.min.js" type="text/javascript" charset="utf-8"></script>--> 83 <script src="https://cdn.bootcss.com/jQuery-Validation-Engine/2.6.4/jquery.validationEngine.min.js"></script> 84 <!--<script src="js/jquery.validationEngine-zh_CN.min.js" type="text/javascript" charset="utf-8"></script>--> 85 <script src="https://cdn.bootcss.com/jQuery-Validation-Engine/2.6.4/languages/jquery.validationEngine-zh_CN.min.js"></script> 86 <script type="text/javascript"> 87 jQuery(document).ready(function() { 88 jQuery('#form').validationEngine({ 89 scroll: false, 90 promptPosition: 'centerRight', 91 maxErrorsPerField: 1, 92 showOneMessage: true, 93 addPromptClass: 'formError-noArrow formError-text' 94 }); 95 }); 96 </script> 97 </body> 98 99 </html>
效果：
