先给大家展示下效果图，如果大家感觉不错，请参考实现代码：
废话少说，直接上代码，可拷贝直接运行：
<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8" /> <meta content="width=device-width, initial-scale=1.0" /> <meta http-equiv="X-UA-Compatible" content="ie=edge" /> <title>validationEngine 插件</title> <!--<link type="text/css" href="https://www.jb51.net/css/validationEngine.jquery.css" />--> <link href="https://cdn.bootcss.com/jQuery-Validation-Engine/2.6.4/validationEngine.jquery.css"> <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"> <div> 必填项--输入框 </div> <input value="" type="text"> <div> 必填项--复选框 </div> <input type="checkbox">我同意服务协议 <div> url验证 </div> <input value="http://" type="text"> <div> email验证 </div> <input value="forced_error" type="text"> <div> IP 地址（v4） </div> <input value="192.168.3." type="text"> <div> 数值 </div> <input value="-33.87a" type="text"> <div> 整数 </div> <input value="10.1" type="text"> <div> 相等运算 </div> <input value="karnius" type="password"> <input value="kaniusBAD" type="password"> <div> 限制最小字符数 </div> <input value="" type="text"> <div> 限制最大字符数 </div> <input value="0123456789" type="text"> <div> 输入整数（必须大于或等于 -5） </div> <input value="-7" type="text"> <div> 输入整数（必须小于或等于 50）： </div> <input value="55" type="text"> </form> <!--<script src="https://www.jb51.net/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="https://www.jb51.net/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="https://www.jb51.net/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 表单验证插件使用实例代码，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！
您可能感兴趣的文章: