Jquery 不错的表单验证插件

Jquery Nice Form Validation Plugin

本文关键字：验证 插件 表单 Jquery      更新时间：2023-09-26

我在这个网站上找到了一个很好的表单验证插件：http：//formvalidator.net/index.html

当我尝试实现服务器端验证时，该插件似乎不起作用。它指出它将通过 POST 方法将 url 发送到我在属性数据验证 url 中声明的 url。但是，当我尝试回显 post 变量时，它似乎没有显示在 Web 浏览器中。

有人可以帮忙调查一下吗？也许我可能在某处做错了什么。抱歉，我对编程很陌生！:)

看看这个页面部分：http：//formvalidator.net/index.html#security-validators

表单验证.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <script src="form-validator/jquery.form-validator.min.js"></script>
<script>
$.validate
  ({
   modules : 'security',
   onModulesLoaded : function() 
 {
$('input[name="pass"]').displayPasswordStrength();
 }
  });
</script>
</head>
<body>
    <form action="" id='form'>
        <p>
           <label>User name:</label>  
 <input name="user" data-validation="server" data-validation-url="validateInput.php" />
        </p>
 <p>
   <label>Password:</label>
   <input  name="pass" data-validation="strength" data-validation-strength="2"   type="password">
</p>
<p><i>Hint: A strong password consists of 13 alphanumeric characters.</i></p>
 <label> Confirm password:</label>
<input name="pass_confirmation" data-validation="confirmation" type='password'>
 <p>
 <input type="submit">
 </p>
  </form>   
 </body>
 </html>

验证.php

<?php
 $response = array(
 'valid' => false,
'message' => 'Post argument "user" is missing.'
                  );
 if( isset($_POST['user']) ) {
    echo $_POST['user'] //value not echoed in the browser :/
                            }
 echo json_encode($response);

编辑：我完全错过了用户名输入中的斜杠，这就是问题所在，现在测试它，现在它触发了 post 请求。

您只需要在表单上添加方法帖子。

尝试使用适当的缩进，它更容易阅读，没有人会责怪你这样做。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/jquery-form-validator/2.1.47/jquery.form-validator.min.js"></script>
<script>
$.validate({
  modules : 'security',
  onModulesLoaded : function() {
    var optionalConfig = {
      fontSize: '12pt',
      padding: '4px',
      bad : 'Very bad',
      weak : 'Weak',
      good : 'Good',
      strong : 'Strong'
    };
    $('input[name="pass"]').displayPasswordStrength(optionalConfig);
  }
});
</script>
</head>
<body>
  <form action="/login" id='form'>
    <p>
      <label>User name:</label>  
      <input name="user" data-validation="server" data-validation-url="validateInput.php">
    </p>
    <p>
      <label>Password:</label>
      <input  name="pass" data-validation="strength" data-validation-strength="2"   type="password">
    </p>
    <p>
      <i>Hint: A strong password consists of 13 alphanumeric characters.</i>
    </p>
    <label> Confirm password:</label>
    <input name="pass_confirmation" data-validation="confirmation" type='password'>
    <p>
      <input type="submit">
    </p>
  </form>   
</body>
</html>

看看这个，似乎工作正常。

祝你好运。

相关文章：