简体   繁体   English

如何检查用户记录的可用性,如果可用,请重新输入以确保安全性?

[英]How do I check for availability of record for a user and if available, re-enter for security?

We have a need to use Ajax to make a call to a php file to check for availability of record from the database. 我们需要使用Ajax来调用php文件,以检查数据库中记录的可用性。

If record exists, ask a user to reconfirm the token number by entering again into another box. 如果记录存在,请要求用户再次输入另一个框来重新确认令牌编号。

If they match, the user continues on with filling rest of form. 如果它们匹配,则用户继续填写剩余的表格。

If they don't match, an error is raised. 如果它们不匹配,则会引发错误。

I have two separate files that accomplish the dual goal of checking availability from the db and comparing that record by asking user to re-enter that same number. 我有两个单独的文件,可以实现双重目的:检查数据库的可用性,并通过要求用户重新输入相同的数字来比较该记录。

However, I would like to combine the two files into one. 但是,我想将两个文件合并为一个。

Could someone please guide me? 有人可以指导我吗?

This first file uses ajax to make a call to a php file to check for availability of records. 第一个文件使用ajax调用php文件,以检查记录的可用性。

It is called index.html 它称为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 &quot;roshan&quot;, &quot;mike&quot; ,&quot;jason&quot; 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>

The second file is called tokencompare.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>

Thanks for your help 谢谢你的帮助

Ok, let's see if this FIDDLE does what you want. 好的,让我们看看该FIDDLE是否满足您的要求。

The "real" token is xxxxx. “真实”令牌是xxxxx。

The format for any token is five characters. 任何令牌的格式均为五个字符。 The code strips leading and trailing zeros. 该代码去除了前导零和尾随零。

So you can start with xxxxx and watch what happens. 因此,您可以从xxxxx开始并观察会发生什么。

Then xxx. 然后是xxx。

Then rrr 然后rrr

Then rrrrr. 然后rrrrr。

JS 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.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM