jquery.validation.js表单插件使用（三）

2019独角兽企业重金招聘Python工程师标准>>>

一、异步验证JS代码

$( "#myform" ).validate({
  onkeyup : false,
  rules: {
    username: {
      required: true,
      remote: {
        url: "check-username.php",
        type: "post",
        data: {
            username: function() {   return $( "#username" ).val();  }
        }
      }
    }
  }
});

二、异步验证PHP代码

<?php
   header("content-type: text/html;charset=utf-8");
   $con = @mysqli_connect("localhost","root","","validata") or die("数据库连接失败");
   usleep(150000);
   $sql = "select username,email from userinfo where username='".$_POST[username]."'";
   $yesorno = 'true';
   $result = mysqli_query($con,$sql);
   if($row = mysqli_fetch_array($result)) {
      $yesorno = 'false';
   }
   echo $yesorno;
?>

三、异步验证细节处理

3.1 阻止onkeyup事件

onkeyup : false

      因为我们需要异步验证，所以我们有必要禁用keyup事件，如果不禁用的话，每当我们在表单中输入一个字符(键盘弹起)时，就会向服务器发送一条验证请求，虽然它的异步进行的，但当访客足够多的时候，这是一笔不小的服务器开销。所以，合理的、正确的触发异步验证时机很重要。

3.2 服务器返回的值只能为字符串"true"或"false"

     通过remote，从远程服务器返回的值，只能输出 "true" 或 "false"，不能有其他输出。

3.3 针对中文，你需要做一点额外的事情

      在项目中，在验证用户名是否存在时，你可以会发现不支持中文输入验证。通过对用户名进行encodeURIComponent编码，然后在后台PHP再对接受的值进行urldecode解码。

  3.3.1 前端JS编码：

data: {
   username: function() { 
      return encodeURIComponent( $( "#username" ).val() );      // 编码数据 
   }
}

  3.3.2 后台PHP解码：

$request = urldecode( trim($_POST['username']) );

转载于:https://my.oschina.net/yonglei/blog/311417