Javascript jQuery和Ajax表单验证

我对Jquery表单验证有问题

我有这个剧本：

$(document).ready(function () {
  var validateUsername = $('.info');
  $('#username').blur(function () {

var t = this; 
if (this.value != this.lastValue) {
  if (this.timer) clearTimeout(this.timer);
  validateUsername.removeClass();
  validateUsername.addClass('info');
  validateUsername.html('<img src="images/load.gif" height="16" width="16" /> checking availability...');

  this.timer = setTimeout(function () {
    $.ajax({
      async: false,
      cache: false,
      url: 'process.php',
      data: 'action=validateusername&username=' + t.value,
      dataType: 'json',
      type: 'post',
      success: function (j) {
        validateUsername.removeClass();
        validateUsername.addClass(j.class);
        validateUsername.html(j.msg); 
      }
    });

  }, 500);

  this.lastValue = this.value;
}

  })
});

$（文档）.ready（函数（）{
var validateUsername=$（'.info'）；
$（'#username'）.blur（函数（）{
var t=这个；
if（this.value！=this.lastValue）{
if（this.timer）clearTimeout（this.timer）；
validateUsername.removeClass（）；
validateUsername.addClass（'info'）；
html（'checking availability…'）；
this.timer=setTimeout（函数（）{
$.ajax({
async:false，
cache:false，
url:'process.php'，
数据：'action=validateusername&username='+t.value，
数据类型：“json”，
键入：“post”，
成功：功能（j）{
validateUsername.removeClass（）；
validateUsername.addClass（j.class）；
validateUsername.html（j.msg）；
}
});
}, 500);
this.lastValue=this.value；
}
})
});

在php中，类似这样的内容：

public static function validateUserName($username) {
    $username = trim($username); // remove white spacing
    $response = array(); // define response array

    if(!$username) { // check if not empty
        $response = array(
            "ok"  => false,
            "class"  => "error",
            "msg" => "Please specify your username");
    } elseif (strlen($username)<5) { // check the lenght
        $response = array(
            "ok"  => false,
            "class"  => "error",
            "msg" => "UserName must be at least 5 characters long");
    } elseif (!preg_match('/^[a-zA-Z0-9.\-_]+$/',$username)) { // check the pattern
        $response = array(
            "ok"  => false,
            "class"  => "error",
            "msg" => "Your username can contain only Aplhanumerics, dash, underscore and period");
    } elseif (!self::userNameAvailable($username)) { // check availability
        $response = array(
            "ok"  => false,
            "class"  => "error",
            "msg" => "UserName already taken !");
    } else { // everything good
        $response = array(
            "ok"  => true,
            "class"  => "success",
            "msg" => "This username is free");
    }

    return $response;
}

公共静态函数validateUserName（$username）{
$username=trim（$username）；//删除白色间距
$response=array（）；//定义响应数组
如果（！$username）{//检查是否为空
$response=array(
“ok”=>错误，
“类”=>“错误”，
“msg”=>“请指定您的用户名”）；
}elseif（strlen（$username）false，
“类”=>“错误”，
“msg”=>“用户名长度必须至少为5个字符”）；
}elseif（！preg_match（'/^[a-zA-Z0-9.\-\\\]+$/'，$username））{//检查模式
$response=array(
“ok”=>错误，
“类”=>“错误”，
“msg”=>“您的用户名只能包含字母、破折号、下划线和句号”）；
}elseif（！self:：usernameavable（$username））{//检查可用性
$response=array(
“ok”=>错误，
“类”=>“错误”，
“msg”=>“用户名已被占用！”）；
}否则一切都好
$response=array(
“ok”=>正确，
“类”=>“成功”，
“msg”=>“此用户名是免费的”）；
}
返回$response；
}

如您所见，php返回3个数据字段。。。。 问题是，即使php返回“false”，用户仍然可以发送表单，我不知道如何修复它

我可以让要发送的表单再做一次验证，只需使用php， 但是使用ajax的意义是什么呢

---

如果有人能帮助我，我将非常感激。

我认为一个简单的解决方案是设置一个全局变量：

var validform = false;

并在表单提交事件中进行检查：

$("#myform").submit(function(){
    return validform;
});

现在可以在AJAX回调中将其设置为TRUE或FALSE

$.ajax({
  // Whatever',
    success: function (j) {
      validform = true;
    }
});

---

您还可以进行更多的定制。

为什么每500毫秒验证一次，而不是表单提交或输入更改

使用jQuery进行表单验证的一般模式是在表单的

submit（）

事件上进行验证，如：

$('form').submit(function () { 
    ...
    (validation code here)
    ...
});

如果验证未成功，您可以从

submit（）

返回false以避免提交表单

---

还要注意，您也需要对发布的数据进行服务器端验证，因为jQuery验证很容易被愚弄。

使用

j.ok

的值来确定

成功

回调中应该发生什么。您收到了它，但没有对它做任何处理并找出返回的内容（这是您将检查的内容）。如果是JSON数据，它可能是

j.responseText

你在跟踪汉克斯，我试过做类似的事情，但没有成功！现在它似乎起作用了，我肯定我犯了一些愚蠢的错误。。。再次感谢……；）很抱歉再次打扰您，但我试图简化我的代码

function validateName（）{var valid=false；$.ajax（{url:'process.php'，data:'action=validateusername&username='+name.val（），dataType:'json'，type:'post'，success:function（j）{nameInfo.removeClass（）；nameInfo.addClass（j.class）；nameInfo.text（j.msg）；valid=j.ok；}}}）；返回valid；}

，同样它工作正常，但变量“valid”永远不会变为“true”。@user2847975您在ajax请求中使用

json

作为数据类型。仅当结果是有效的JSON对象时，才会触发成功事件。请确保此事件是否正在触发。如果没有，请确保服务器端脚本正在向输出发送有效的JSON对象。