当使用 PHP 在后端验证电子邮件时，如何将输入提交从禁用更改为启用？
Posted
技术标签:
【中文标题】当使用 PHP 在后端验证电子邮件时，如何将输入提交从禁用更改为启用？【英文标题】：How to change input submit from disabled to enabled when email is validated on the backend with PHP? 【发布时间】：2020-06-19 11:10:48 【问题描述】：只有当用户在“用户名”字段中输入有效的电子邮件地址时，才应启用“登录”按钮。当前，电子邮件验证是通过 php 脚本处理的。任何要研究的建议、替代方案或文档都会很棒。
index.html
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div id="login-input">
<form action="login.php" method="post" class="ajax">
<p>
<input id="login-username" type="text" name="username" placeholder="Username">
</p>
<p>
<input id ="login-password" type="password" name="password" placeholder="Password">
</p>
<p>
<input id="login-submit-btn" type="submit" value="LOGIN" disabled>
</p>
</form>
</div>
</body>
</html>
main.js
$(document).ready(function()
$('form.ajax').submit(function(event)
var data =
username: $('#login-username').val(),
password: $('#login-password').val()
;
$.ajax(
url: "login.php",
type: "POST",
data: data,
success: function(data)
event.preventDefault();
console.log(data);
);
return false;
);
);
登录.php
<?php
$input_username = $_POST['username'];
$input_password = $_POST['password'];
if(isset($input_username, $input_password))
if(filter_var($input_username, FILTER_VALIDATE_EMAIL))
echo " email format is valid ";
else
echo " email format is invalid ";
?>
【问题讨论】：
用js转validate the emailaddress，然后change the disabled state of the button。 如果你真的需要在你的后端验证，使用ajax发送邮件到后端然后验证。如果成功，您可以启用该字段。 您的 AJAX 调用是否已经成功并且您正在收到“电子邮件格式有效”的响应？您将从 AJAX“成功”回调中启用按钮，而不是直接从 PHP 中启用。根据 PHP 脚本的响应，有条件地启用它，例如$('#login-submit-btn).prop('disabled',false);。
如果用户名是电子邮件，为什么不将输入类型从文本更改为电子邮件并根据需要进行设置？浏览器会处理它，你不需要其他任何东西。设置所需的密码、minlenght 和 maxlenght 属性。
【参考方案1】：
您可以在 AJAX 成功处理程序中检查响应并根据响应启用和禁用登录按钮
Login.php
$input_username = $_POST['username'];
$input_password = $_POST['password'];
if(isset($input_username, $input_password))
if(filter_var($input_username, FILTER_VALIDATE_EMAIL))
echo "valid";
else
echo "invalid";
?>
main.js
$(document).ready(function()
// select form and handle event with ON method
$('form.ajax').on('submit', function()
var obj = $(this),
url = obj.attr('action'),
type = obj.attr('method'),
data = ;
// find anything with the attribute of name
obj.find('[name]').each(function(index, value)
var credential = $(this),
name = credential.attr('name'),
value = credential.val();
data[name] = value;
);
$.ajax(
url: url,
type: type,
data: data,
success: function(response)
event.preventDefault();
if(response==="valid")
document.getElementById("login-submit-btn").disabled =false;
else
document.getElementById("login-submit-btn").disabled = true;
,
error: function (error)
console.log(error);
);
return false;
);
);
还有一件事，这可能不是必需的，但是在刚刚禁用的登录按钮上写 disabled="disabled" 是没有意义的
<input id="login-submit-btn" type="submit" value="LOGIN" disabled />
【讨论】：
【参考方案2】：意味着当您可以使用 type="email" 时，它将不允许用户点击按钮。
你不应该走那么远。 hTml 具有内置功能 仅将类型更改为电子邮件
例如
【讨论】：
以上是关于当使用 PHP 在后端验证电子邮件时，如何将输入提交从禁用更改为启用？的主要内容，如果未能解决你的问题，请参考以下文章