Javascript通过实时输出验证PHP上的用户名
[英]Javascript validate username on PHP with realtime output
问题描述
I want to use Javascript to validate my input username if it is correct or not showing result on realtime. 
我想使用Javascript验证我的输入用户名是否正确或是否实时显示结果。 Here is index.html code: 这是index.html代码：
<html>
<head>
<script>
function showHint(str){
if(str.length == 0){
document.getElementById("hint").innerHTML = "";
}else{
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function(){
if(xmlhttp.readyState == 4 && xmlhttp.status == 200){
document.getElementById("hint").innerHTML = xmlhttp.responseText;
}
}
xmlhttp.open("POST", "demo3.php?input=" + str, true);
xmlhttp.send();
}
}
</script>
</head>
<body>
Type a username: <br>
<input id="hint" type="text" name="username" oninput="showHint(this.value)"><p id="hint"></p>
</body>
</html>
Here is the demo3.php code: 这是demo3.php代码：
<html>
<head>
</head>
<body>
<?php
$mysqli = new mysqli("localhost","root","123456","mini");
$username = $mysqli->real_escape_string($_REQUEST['input']);
$sql = "SELECT username FROM `users` WHERE username='$username'";
$result = $mysqli->query($sql);
if($result->num_rows){
echo "Valid username";
}else{
echo "Invalid username";
}
?>
</body>
</html>
I use the oninput event example from w3cschools, and I am wondering why my result do not show what I expect? 我使用了w3cschools的oninput事件示例，我想知道为什么我的结果没有显示我的期望？ And if I assign $username with static variable, demo3.php result seems to be correct feedback, not from index.html. 而且，如果我为$ username分配了静态变量，则demo3.php结果似乎是正确的反馈，而不是index.html的反馈。
Plus, I am wondering how to validate multiple forms, such as password and email within the same validation php file. 另外，我想知道如何在同一验证php文件中验证多种形式，例如密码和电子邮件。 Ex: 例如：
input1 -> check username ->output check result
input2-> check password ->output check result
input3-> check email->output check result
New to javascript.All the tutorial seems to provide only one demo, not multiple examples. javascript的新手。所有教程似乎都只提供一个演示，而不提供多个示例。
2 个解决方案
解决方案1
0 2015-08-31 18:44:48
The problem is that you are using the ID "hint" twice. 问题是您使用ID“提示”两次。 ID is a unique identifier, so you NEVER should use it more than once in the same page. ID是唯一的标识符，因此您永远不能在同一页面中多次使用它。 And you should avoid using inline handlers. 而且，您应该避免使用内联处理程序。 You need to change your javascript to: 您需要将JavaScript更改为：
<script>
window.onload = function() {
function showHint(str){
if(str.length == 0){
document.getElementById("hint").innerHTML = "";
}else{
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function(){
if(xmlhttp.readyState == 4 && xmlhttp.status == 200){
document.getElementById("hint").innerHTML = xmlhttp.responseText;
}
}
xmlhttp.open("POST", "demo3.php?input=" + str, true);
xmlhttp.send();
}
}
document.getElementById("hintInput").onkeyup = function() {
showHint(this.value)
}
}
</script>
and your HTML: 和您的HTML：
<input id="hintInput" type="text" name="username"><p id="hint"></p>
You can get rid of window.onload if you place your script tag before closing the body tag. 如果在关闭body标签之前放置了脚本标签，则可以摆脱window.onload 。
解决方案2
0 已采纳 2015-08-31 20:42:28
Since your input is being placed in the URL, you will need to use the GET parameter other than POST (which does not use the URL): 由于您将输入内容放置在URL中，因此您将需要使用POST （不使用URL）以外的GET参数：
xmlhttp.open("GET", "demo3.php?input=" + str, true);
Now it should be able to pickup your input for $_REQUEST['input'] or $_GET['input'] 现在它应该可以为$_REQUEST['input']或$_GET['input']提取input
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.