Jquery Nice Form Validation插件

时间:2015-01-14 03:20:17

标签: javascript php jquery html validation

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

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

有人可以帮忙调查一下吗?也许我可能在某处做错了什么。道歉,我对编程很新! :)

请查看此页面部分:http://formvalidator.net/index.html#security-validators

FormValidate.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>

validate.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);

1 个答案:

答案 0 :(得分:0)

编辑:我完全错过了用户名输入中的斜线,这就是问题所在,现在测试它,现在它会触发发布请求。

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

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

<!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>

检查一下,似乎工作正常。

祝你好运。