使用空格验证用户输入

Posted

技术标签:

【中文标题】使用空格验证用户输入【英文标题】:Validate user input with whitespace 【发布时间】:2020-07-19 11:51:14 【问题描述】:

如何实时格式化用户输入?比如用户在输入框输入A9364470240ZGS001,在输入框使用javascript实时格式化为:A 936 447 02 40 ZGS 001?

<div class="childDumpFile">
     <label for="ds">Dataset</label>
     <input type="text" class="form-control" id="ds" name="ds" value="Request::get('ds') ?? ''">
</div>

【问题讨论】:

您的意思是按照用户输入的格式设置输入值吗? 是的,用户输入A9364470240ZGS001,我需要将实时字符串格式化为A 936 447 02 40 ZGS 001 你的格式有什么逻辑背景吗?我想知道用户是否必须一个一个地写入这个值,或者他们可以粘贴它?我准备了一个代码来提供实时格式,但是用户必须一个一个地写出值。 不,我没有写任何关于格式化的逻辑。但是如果很难实时实现这个逻辑,那么它可能没有实时。我只需要将这个字符串A9364470240ZGS001 格式化为A 936 447 02 40 ZGS 001 您可以通过here查看。但正如我在用户必须一一写字符之前感到难过的那样。 【参考方案1】:

我找到了真正的答案。如果您愿意,这些期望被命名为“输入掩码”。您必须使用 3. 方库。其中一些在以下网站中列出:

Libraries 1 Libraries 2

我为您的问题选择了Cleave.js。这是演示:

<script src="https://nosir.github.io/cleave.js/dist/cleave.min.js"></script>
<script src="https://nosir.github.io/cleave.js/dist/cleave-phone.i18n.js"></script>
<script>
    function loadFunction() 
        // custom
        var cleaveCustom = new Cleave('.input-custom', 
            blocks: [1, 3, 3, 2, 2, 3, 3],
            delimiter: ' ',
        );
    
</script>

<body onload="loadFunction()">
    A 936 447 02 40 ZGS 001
    <div class="container">
        <input class="input-custom" placeholder="Custom delimiter & blocks" />
    </div>
</body>

【讨论】:

【参考方案2】:

如果我们假设用户必须一个一个地写字符。这将起作用。

<body>
    <input type="text" class="form-control" id="ds" name="ds" onkeypress="keyPress()" maxlength="23">
</body>
<script>
    function keyPress() 
        var field = document.getElementById("ds");
        var text = field.value;
        if(text.length == 1 || text.length == 5 
        || text.length == 9 || text.length == 12
        || text.length == 15 || text.length == 19 ) 
            var newText = text + " ";
            field.value = newText;
        
    
</script>

【讨论】:

【参考方案3】:

这是一个小例子。

<div class="childDumpFile">
     <label for="ds">Dataset</label>
     <input type="text" class="form-control" id="ds" name="ds">
</div>

<div class="test_ds"></div>

带有 jquery 的 JS。

$("#ds").change(function()
    var ds_value = $("#ds").val();

var temp = ds_value;
temp = temp.substring(0,1) + " " + temp.substring(1, 4) + " " + temp.substring(4, 7) + " " + temp.substring(7, 9) + " " + temp.substring(9, 11) + " " + temp.substring(11, 14) + " " + temp.substring(14, 17);

  $("#ds").val(temp);
  $(".test_ds").html(temp);
);

这是一个演示 - https://jsfiddle.net/Kistlak/7bkdtev8

【讨论】:

我检查了你的演示。我必须离开盒子才能开始验证。他要求实时。你的答案就像onChange() event【参考方案4】:

首先,您需要在输入中添加 onchange="getTimeNow()" oninput="getTimeNow()"

<input type="text" class="form-control" id="ds" name="ds" value="Request::get('ds') ?? ''" onchange="getTimeNow()" oninput="getTimeNow()">

最后,你得到事件输入文本

<script>function getTimeNow()console.log(new Date())</script>

【讨论】:

我需要实时格式化字符串。这不是我要求的。

以上是关于使用空格验证用户输入的主要内容,如果未能解决你的问题,请参考以下文章

javascript/jquery 输入验证

JSP中插入javascript语句,要求用一个正则表示验证输入的用户名是不是含有空格

element-ui禁止用户输入空格

信用卡验证 - 带有空格的匹配模式

php用函数判断用户输入信息是否为邮箱

没有空格的文本输入?