[英]How do I check for availability of record for a user and if available, re-enter for security?
我们需要使用Ajax来调用php文件,以检查数据库中记录的可用性。
如果记录存在,请要求用户再次输入另一个框来重新确认令牌编号。
如果它们匹配,则用户继续填写剩余的表格。
如果它们不匹配,则会引发错误。
我有两个单独的文件,可以实现双重目的:检查数据库的可用性,并通过要求用户重新输入相同的数字来比较该记录。
但是,我想将两个文件合并为一个。
有人可以指导我吗?
第一个文件使用ajax调用php文件,以检查记录的可用性。
它称为index.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Check Availability of Token</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script src="jquery.js" type="text/javascript" language="javascript"></script>
<script language="javascript">
$(document).ready(function()
{
$("#token").blur(function()
{
//remove all the class add the messagebox classes and start fading
$("#msgbox").removeClass().addClass('messagebox').text('Checking...').fadeIn(1000);
//check the token exists or not from ajax
$.post("checkToken.php",{ user_token:$(this).val() } ,function(data)
{
if(data=='no') //if token not avaiable
{
$("#msgbox").fadeTo(200,0.1,function() //start fading the messagebox
{
//add message and change the class of the box and start fading
$(this).html('Token exists').addClass('messageboxerror').fadeTo(900,1);
});
}
else
{
$("#msgbox").fadeTo(200,0.1,function() //start fading the messagebox
{
//add message and change the class of the box and start fading
$(this).html('Token does not exist').addClass('messageboxok').fadeTo(900,1);
});
}
});
});
});
</script>
</head>
<body>
<br>
<br>
<div align="center">
<div class="top" > Check Availability of token - <strong>Token "roshan", "mike" ,"jason" exists</strong><br>
Please move the focus out of the box to check the availability of token.
</div>
<div >
Token : <input name="token" type="text" id="token" value="" maxlength="15" />
<span id="msgbox" style="display:none"></span>
</div>
</div>
</body>
</html>
第二个文件称为tokencompare.html
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title> - Compare Validate token</title>
<script type='text/javascript' src='http://code.jquery.com/jquery-1.8.3.js'></script>
<script type='text/javascript'>//<![CDATA[
$(window).load(function(){
$("#confirm_token").parent().hide();
$("#token").keydown(function() {
var self = this, $self = $(this);
setTimeout(function(){
if ( $.trim(self.value) != "" && !$self.is(".error") ) {
$("#confirm_token").parent().show();
return;
}
$("#confirm_token").val('').parent().hide();
},0);
});
// validate signup form on keyup and submit
$("#tokenval").validate({
rules: {
token: {
required: true,
minlength: 5
},
confirm_token: {
required: true,
minlength: 5,
equalTo: "#token"
}
},
messages: {},
submitHandler: function(form) {
alert("submitted");
}
});
});//]]>
</script>
</head>
<body>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.9/jquery.validate.min.js" type="text/javascript"></script>
<form class="cmxform" id="tokenval" method="get" action="">
<fieldset>
<legend>Validating a complete form</legend>
<p>
<label for="token">token</label>
<input id="token" name="token" type="text" />
</p>
<p>
<label for="confirm_token">Confirm token</label>
<input id="confirm_token" name="confirm_token" type="text" />
</p>
<p>
<input class="submit" type="submit" value="Submit" />
</p>
</fieldset>
</form>
</body>
</html>
谢谢你的帮助
好的,让我们看看该FIDDLE是否满足您的要求。
“真实”令牌是xxxxx。
任何令牌的格式均为五个字符。 该代码去除了前导零和尾随零。
因此,您可以从xxxxx开始并观察会发生什么。
然后是xxx。
然后rrr
然后rrrrr。
JS
var validtoken = "xxxxx";
$('#checkme').click(function(){
$('#messagediv').html('');
var firsttoken = $('#token1').val();
firsttoken = firsttoken.trim();
if( firsttoken.length !== 5)
{
$('#messagediv').html('The token has an incorrect format<br /> Please reenter');
$('#token1').val('');
} else {
if (firsttoken == validtoken)
{
$('#messagediv').html('Your token exists<br /> click PROCEED for the next step');
$('.proceed').css('display', 'block');
} else {
$('.errordiv').css('display', 'block');
}
}
A});
$('#proceed').click(function(){
$('#token1').val('');
$('.proceed').css('display', 'none');
$('#messagediv').html('');
alert('And the next step is....');
});
$('#confirm').click(function(){
var confirmtoken1 = $('#token1').val();
var confirmtoken2 = $('#token2').val();
if(confirmtoken1 == confirmtoken2)
{ $('#token1').val('');
$('#token2').val('');
$('.proceed').css('display', 'none');
$('#messagediv').html('');
alert('Confirmed. And the next step is....');
} else {
$('#token1').val('');
$('#token2').val('');
$('.proceed').css('display', 'none');
$('.errordiv').css('display', 'none');
$('#messagediv').html('tokens do not match. Reenter');
}
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.