Question

同样，我正在使用此表单验证。一切正常，我喜欢它的工作方式。除非我想添加ajax函数来检查数据库中已存在的天气用户名。任何人都可以帮忙吗？我对ajax和Jquery并不熟悉。

这个php由html表单，index.php：

组成

<?php 
if ($_SERVER["REQUEST_METHOD"] == "POST") { 
echo " Form submited....!!!! <br/>";
echo '<br/> Username = '.$_POST['username'];
}
?>

<!DOCTYPE html>
<html lang="en">
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" type="text/javascript"></script>
</head>
<body >
<form  method="POST"  action="">
<div class="form-group">
      <label for="txtUserName" class="col-lg-3 control-label">Username :</label>
      <div class="col-lg-9">
        <input type="text" id="txtUserName" name="username" placeholder="Create Username"  >

        <p><small id="elmUserNameError" class="errorMsg"></small></p>
      </div>
   </div>  

   <button type="button" onClick="return check_form(this.form);">Submit</button>  
</form>
<script>

function check_form(form) {

    if(validateForm(form) === true ) {  
    form.submit();
    return true;
    }
}

function validateForm(theForm) {
   with(theForm) {
      return ( 
               isNotEmpty(txtUserName, "Please Create username!", elmUserNameError)
           &&  isUsernameMinMax(txtUserName, 6,10, "Username must between 6 - 10 characters", elmUserNameError)  
           &&  isUpperCase(txtUserName, "Create Username with UPPERCASE!", elmUserNameError)
           &&  isMatching(txtUserName, "Username must be UPPERCASE with number and underscore. No white space allowed", elmUserNameError)
           // problem here......
           &&  isUserExis(txtUserName, "Username already exist!", elmUserNameError)
      );
    return false;
   }
return true;
}

function isNotEmpty(inputElm, errMsg, errElm) {
   var isValid = (inputElm.value.trim() !== "");
   postValidate(isValid, errMsg, errElm, inputElm);
   return isValid;
}

function isUsernameMinMax(inputElm, minLength, maxLength, errMsg, errElm) {
   var inputValue = inputElm.value.trim();
   var isValid = (inputValue.length >= minLength) && (inputValue.length <= maxLength);
   postValidate(isValid, errMsg, errElm, inputElm);
   return isValid;
}

function isUpperCase(inputElm, errMsg, errElm) {
   var isValid = (inputElm.value.trim().match(/^[^a-z]*$/) !== null);
   postValidate(isValid, errMsg, errElm, inputElm);
   return isValid;
}

function isMatching(inputElm, errMsg, errElm) {
   var isValid = (inputElm.value.trim().match(/^\w+$/) !== null);
   postValidate(isValid, errMsg, errElm, inputElm);
   return isValid;
}

function postValidate(isValid, errMsg, errElm, inputElm) {
   if (!isValid) {
      // Show errMsg on errElm, if provided.
      if (errElm !== undefined && errElm !== null
            && errMsg !== undefined && errMsg !== null) {
         errElm.innerHTML = errMsg;
      }
      // Set focus on Input Element for correcting error, if provided.
      if (inputElm !== undefined && inputElm !== null) {
         inputElm.classList.add("errorBox");  // Add class for styling
         inputElm.focus();
      }
   } else {
      // Clear previous error message on errElm, if provided.
      if (errElm !== undefined && errElm !== null) {
         errElm.innerHTML = "";
      }
      if (inputElm !== undefined && inputElm !== null) {
         inputElm.classList.remove("errorBox");
      }
   }
}


</script>
</body>
</html>

我需要添加此函数，但我不知道如何返回ajax调用来验证结果。例如，在这里，当我手动编写时，当用户输入'DADADA'时，它将返回错误'用户名已存在！'。

function isUserExis(inputElm, errMsg, errElm){

 // maybe ajax call here.... 

 var isValid = (inputElm.value.trim() !== "DADADA");
 postValidate(isValid, errMsg, errElm, inputElm);
   return isValid;  

}

这是我要调用的php文件，check_username.php：

<?php 
include('config.php'); // class and configuration
$users  = new Users($db);

if($_REQUEST) 
{
    $username   = $_REQUEST['username'];

    if ($users->UsernameExist($username) === true) {
    echo 'That Username already exist!';
    }

}   
?>

在验证中添加ajax函数

0 个答案: