如何创建文本验证框

How to create a text verification box

本文关键字：文本 验证 创建 何创建      更新时间：2023-09-26

我试图弄清楚如何创建一个文本验证框，这是假设出现当一个按钮被点击，用户必须输入一定的值后，如果这个值是正确的按钮应该继续做它的正常功能。

这是我的代码:

<div id="texto-cupon" class="panel-boton-canjear">
  <?php 
    if ($comprobarCanjear == 1 || $comprobarCanjear == 2 || $comprobarCanjear == 3) {
  ?>
  <input disabled=disabled id="canjear" class="btn" type="button" value="<?php echo JText::_('COM_CUPHONEO_BOTON_CANJEAR'); ?>" data-id="<?php echo $valor->item_id; ?>" data-codigo="<?php echo $value->value; ?>" />
  <?php 
    } elseif($comprobarCanjear == 4) {
  ?>
  <input id="canjear" class="btn btn-info" type="button" value="<?php echo JText::_('COM_CUPHONEO_BOTON_CANJEAR'); ?>" data-id="<?php echo $valor->item_id; ?>" data-codigo="<?php echo $value->value; ?>" />
  <?php 
    }
  ?>
</div>

下面的elseif($comprobarCanjear == 4)是按钮出现的地方，当单击该按钮时，应该出现一个文本框。

这个按钮调用的ajax代码如下:

<script>
jQuery(function(){
    jQuery("#canjear").click(function(e){
        if(this.tagName==="A"){
            e.preventDefault();
        }
        jQuery.ajax({
            url: "index.php?option=com_cuphoneo&task=miscuponess.canjearCupon",
            type: "POST",
            data: {id:jQuery(this).data("id"), codigo:jQuery(this).data("codigo")}
            success: window.location.href = "index.php?option=com_cuphoneo&view=miscuponess&layout=default"
        });
    });
});
</script>

试试这个，但要确保将一些内容更改为您自己的。对话框需要jQuery UI。

示例HTML 

<button id="canjear">Click me</button>
<div class="dialog" style="display:none;">
    <input type="text" id="prompt" placeholder="Insert value hello" />
    <button id="test">Submit</button>
</div>

JS 

jQuery(function () {
    jQuery("#canjear").click(function (e) {
        jQuery('.dialog').dialog({
            title: 'Prompt',
            modal: true,
            open: function (event, ui) {
                jQuery('#test').click(function (evt) {
                    var theValue = jQuery('#prompt').val();
                    if (theValue == "hello") {
                        jQuery.ajax({
                            url: "index.php?option=com_cuphoneo&task=miscuponess.canjearCupon",
                            type: "POST",
                            data: {
                                id: jQuery(e.currentTarget).data("id"),
                                codigo: jQuery(e.currentTarget).data("codigo")
                            }
                            success: function (response) {
                                window.location.href = "index.php?option=com_cuphoneo&view=miscuponess&layout=default"
                            }
                        });
                    }
                });
            }
        });
    });
});

如果不担心样式问题，可以直接使用浏览器内置的" prompt()"函数。否则，您可以创建自己的窗口。第一个选择很简单。做如下操作:

var input = prompt("Title");
if( input != null && input == "expectedValue")
{
    window.location.href = "index.php?option=com_cuphoneo&view=miscuponess&layout=default"
}
else
{
    //invalid input
}

我想你需要这样的东西:

编辑:输入

HTML 

?>
  <input type="text" id="txt" class="hidden">
  <input id="canjear" class="btn btn-info" type="button"...
Jquery 

$("#canjear").on('click', btnClick);
function btnClick() {
    $("#txt").show();
    $(this).off().on('click', function() {
        jQuery.ajax({
            url: "index.php?option=com_cuphoneo&task=miscuponess.canjearCupon",
            type: "POST",
            data: {id:jQuery(this).data("id"), codigo:jQuery(this).data("codigo")},
            success: function (data) {
                // check against codigo ** codigo is returned by the server right??
                if ($("#txt").val() != data.codigo) {
                    // invalid ** write code for invalid input.
                    alert("Please enter valid whatever into the field.");
                    return false;
                } else {
                    // valid input
                    window.location.href = "index.php?option=com_cuphoneo&view=miscuponess&layout=default";
                }
        });
    }
}

也许这更接近你想要的…

相关文章：