通过php和jQuery验证电子邮件
R K*_*R K 2 javascript php jquery
我想通过使用php和jquery验证我输入的电子邮件字段.但我无法弄清楚我的计划中的错误.
下面是代码 index.html
<!DOCTYPE html>
<html lang="en">
<head>
<title>
</title>
<meta charset="utf-8" />
<link rel="stylesheet" type="text/css" href="css/custom.css" />
</head>
<body>
<p>Email: <input type="text" id="myInput" /></p>
<p id="feedbackDiv"></p>
<p><input type="button" id="myButton" value="Check" /></p>
<script type="text/javascript" src="js/jquery-3.1.1.min.js" ></script>
<script type="text/javascript" src="js/custom.js" ></script>
</body>
</html>
下面是代码 custom.js
$(document).ready(function(){
$('#myButton').on('click',function(){
var x = $('#myInput').val();
function validateEmail(mail){
$.post('php/email.php',{email_value_server: mail},function(returnData){
$('#feedbackDiv').html(returnData);
});
}
$('#myInput').focusin(function(){
if(x === ''){
$('#feedbackDiv').html('Please fill the email address.');
}else{
validateEmail(x);
}
}).blur(function(){
$('#feedbackDiv').html('');
}).keyup(function(){
validateEmail(x);
});
});
});
下面是代码 email.php
<?php
$y = $_POST['email_value_server'];
if(isset($y)){
if(!empty($y)){
if(filter_var($y,FILTER_VALIDATE_EMAIL) === false){
echo "This doesn't appear to be valid email address.";
}else{
echo "Valid email address.";
}
}
}
?>
我是jQuery和php的初学者.如有任何疑问,请在下面评论.
查看完代码后,有很多内容.有时在编程中,在开始编程之前定义和写下你想要实现的内容是很重要的.开始编程可能会导致问题,就像你在这里遇到的那样.
一般反馈
- 没有错误的细节,我的第一个观察是你正在尝试检查和验证电子邮件,在打字和提交时,它会像你有一个想法一样填充,并且想要一次尝试许多概念,这会产生冲突.例如,你正在尝试使用
clickjQuery,但同时尝试使用keyup方法,这将永远不会起作用,因为keyup如果没有,click则无法工作,反之亦然. - 我的第二个观察,这是我真正鼓励任何初学者程序员学习,给予属性正确的名称约定.就像
id=”myInput”刚才打电话id=myEmailInput,id=emailInput或者myButton只是把它submitButton或submitBtn等等.重要的是把它的东西任何一个都可以理解,试想一下,你有几个按钮和输入字段,这将是很难记住哪个按钮是什么myInput,那就是一些东西也留给你和你的味道. - 即使如此,如果您的代码正常工作,通过键入(
keyup)方法检查Ajax上的无效电子邮件也不是一个好习惯,这将花费您在服务器端进行大量查找.我会让我的代码在客户端的第一步检查电子邮件格式,当它看起来相同时,而不是让服务器/ php查找,这样你最终可以进行数据库查找或行动.
还有其他一些东西.检查电子邮件可以通过html5(HTML5电子邮件验证)轻松完成,您可以通过使用JavaScript,jQuery或PHP或任何其他技术单独或两者来改进它或制作额外的功能,这些都取决于您的目标和要求.
回到你的代码,作为答案我将允许自己修改你的代码,使其工作,并添加一些解释.也就是说,这可以通过多种方式完成,而我的答案就是您最适合自己的方式改变它的例子.
我也最好尽量保持它的风格,并使用PHP,jQuery和Ajax,希望它可以帮助您实现目标并提高您的技能.
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<title>
</title>
<meta charset="utf-8"/>
<link rel="stylesheet" type="text/css" href="css/custom.css"/>
</head>
<body>
<p>Email: <input type="text" id="myInput"/>
<span id="feedbackDiv"></span>
</p>
<p><input type="button" id="myButton" value="Check"/></p>
<script type="text/javascript" src="js/jquery-3.1.1.min.js" ></script>
<script type="text/javascript" src="js/custom.js"></script>
</body>
</html>
在HTML中,主要的变化我只是使用SPAN将错误/成功消息保存在一行中.
PHP:
<?php
if (isset($_POST['email']))
{
$email = $_POST['email'];
if (filter_var($email, FILTER_VALIDATE_EMAIL))
{
http_response_code(200);
echo $email . ' is valid email';
// Do eventually email look up in database
// something like
// if email exist in db than msg "Email Exist" else msg "Email Does not Exist"
} else {
http_response_code(412);
// Do something else or just leave it as is
}
}
要了解有关http状态代码的更多信息.在这里我稍微更改了代码逻辑,因此php可以将http状态返回给Ajax调用.
JavaScript的:
$(document).ready(function () {
// if you need to disable and enable button depending on email validity.
//disableBtn(true);
// each time you press and release the key it will check
$('#myInput').on('keyup', function (e) {
var $input = $(this);
console.log($input);
action($input);
});
// you can always click Check for force check
$('#myButton').on('click', function (e) {
var $input = $('#myInput');
action($input);
});
function action(passData) {
var $input = passData
, value = $input.val()
, data = {
email: value
};
// if empty alert message would disappear
if (value != "") {
// Pre validate email on client side to reduce the server lookup
if (validateEmailOnClientSide(value)) {
$.ajax({
method: 'POST',
url: 'email.php',
data: data,
// if server return valid email then we get Green text
success: function (returnData) {
$('#feedbackDiv').css('color', 'green').html(returnData);
//disableBtn(true);
},
// if server return invalid email then we get Red text
error: function (xhr, status, error) {
$('#feedbackDiv').css('color', 'red').html(value + " is not valid email");
//disableBtn(false);
},
dataType: 'text'
});
} else {
// Red text from browser side
$('#feedbackDiv').css('color', 'red').html(value + " is not valid email");
//disableBtn(false);
}
} else {
// Emptying text
$('#feedbackDiv').html("");
//disableBtn(false);
}
}
function validateEmailOnClientSide(email) {
var re = /\S+@\S+\.\S+/;
return re.test(email);
}
function disableBtn(boolean) {
$("#myButton").attr("disabled", boolean);
}
});
如果电子邮件是无效的,你最终可能会禁用提交按钮,并启用它,如果它变得有效,只是取消注释的所有功能代码disableBtn(true);和disableBtn(false);
输出示例: 这是一个示例,您可以通过键入有效且无效的电子邮件来获取绿色或红色消息.当然,如果您提交检查无效的电子邮件,则您必须执行与键入相同的过程.
我使用的一些参考文献:
- 其中一些灵感来自这个答案.
- 检查AJAX请求是否在jQuery中成功的最佳方法
- 在JavaScript中验证电子邮件地址？
| 归档时间： |
|
| 查看次数： |
1404 次 |
| 最近记录： |