Home > Article > Web Front-end > Sharing examples of how to use the validationEngine form validation plug-in

Sharing examples of how to use the validationEngine form validation plug-in

小云云Original: 2018-01-10 09:07:261494browse

This article will introduce you to the jquery validationEngine form validation plug-in effect with example code. It is very good and has reference value. Friends who need it can refer to it. I hope it can help everyone.

Let me show you the renderings first. If you feel good, please refer to the implementation code:

Stop talking nonsense, go directly to the code, you can copy it directly Run:

<!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=&#39;line&#39;>
        必填项--输入框
      </p>
      <input value="" class="validate[required]" type="text" name="req">
      <p class=&#39;line&#39;>
        必填项--复选框
      </p>
      <input class="validate[required]" type="checkbox" name="agree">我同意服务协议
      <p class=&#39;line&#39;>
        url验证
      </p>
      <input value="http://" class="validate[required,custom[url]]" type="text" name="url">
      <p class=&#39;line&#39;>
        email验证
      </p>
      <input value="forced_error" class="validate[required,custom[email]]" type="text" name="email">
      <p class=&#39;line&#39;>
        IP 地址（v4）
      </p>
      <input value="192.168.3." class="validate[required,custom[ipv4]]" type="text" name="ip">
      <p class=&#39;line&#39;>
        数值
      </p>
      <input value="-33.87a" class="validate[required,custom[number]]" type="text" name="number">
      <p class=&#39;line&#39;>
        整数
      </p>
      <input value="10.1" class="validate[required,custom[integer]]" type="text" name="integer">
      <p class=&#39;line&#39;>
        相等运算
      </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=&#39;line&#39;>
        限制最小字符数
      </p>
      <input value="" class="validate[required,minSize[6]]" type="text" name="minsize">
      <p class=&#39;line&#39;>
        限制最大字符数
      </p>
      <input value="0123456789" class="validate[optional,maxSize[6]]" type="text" name="maxsize">
      <p class=&#39;line&#39;>
        输入整数（必须大于或等于 -5）
      </p>
      <input value="-7" class="validate[required,custom[integer],min[-5]]" type="text" name="min">
      <p class=&#39;line&#39;>
        输入整数（必须小于或等于 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(&#39;#form&#39;).validationEngine({
          scroll: false,
          promptPosition: &#39;centerRight&#39;,
          maxErrorsPerField: 1,
          showOneMessage: true,
          addPromptClass: &#39;formError-noArrow formError-text&#39;          
        });
      });
    </script>
  </body>
</html>

Related recommendations:

jquery form validation plugin

JavaScript Introduction to the use of form validation plug-in

jquery form validation plug-in usage example in Yii framework_php example

The above is the detailed content of Sharing examples of how to use the validationEngine form validation plug-in. For more information, please follow other related articles on the PHP Chinese website!

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：Detailed explanation of Node asynchronous programming mechanismNext article：Detailed explanation of Node asynchronous programming mechanism

See more

Sharing examples of how to use the validationEngine form validation plug-in

Related articles