Question

我有一个需要电子邮件的注册表单。当用户使用Android设备并输入他们的电子邮件时，如果他们在android auto建议他们的电子邮件之前使用了该设备。如果用户选择自动建议，则会在末尾广告一个尾随空格。然后，当用户进行注册时，由于空白空间，系统会显示无效的电子邮件。用户不总是看到空白区域。如何自动删除尾随空格。

我已经有一块js使用check this函数来比较为重复电子邮件输入的电子邮件地址。

<form name="account_reg_form" method="post" action="{$rlBase}{if $config.mod_rewrite}{$pageInfo.Path}.html{else}?page={$pageInfo.Path}{/if}" enctype="multipart/form-data">
    <div style="margin-top:10px;">
        <input style="text-transform:lowercase;" id="eMail" size="45" class="wauto" type="text" name="profile[mail]" {if $smarty.post.profile.mail}value="{$smarty.post.profile.mail}"{/if} required oninput="check(this)" />
    </div>
    <div style="margin-top:10px;">
        <input size="45" class="wauto" id="eMail_repeat" type="text" name="email_addr_repeat" title="Repeat your email address" placeholder="Repeat your email address" required oninput="check(this)" />
    </div>
    <input type="submit" value="{$lang.next_step}" />
</form>
<script>
    function check() {
        var email = document.getElementById('eMail');
        var emailRepeat = document.getElementById('eMail_repeat');

        if (email.value != emailRepeat.value) {
            emailRepeat.setCustomValidity('The two email addresses must match.');
        } else {
            // input is valid -- reset the error message 
            emailRepeat.setCustomValidity('');
        }
    }
</script>
<input style="text-transform:lowercase;" id="eMail" size="45" class="wauto" type="text" name="profile[mail]" {if $smarty.post.profile.mail}value="{$smarty.post.profile.mail}"{/if} required oninput="check(this)" />

Answer 1

word_freq_dict()

可以找到

demo here。在要检查的电子邮件输入后输入空格。

编辑：可以找到更清晰的演示here，提供示例地址，并突出显示使用.trim（）和不使用它之间的差异。

Answer 2

您可以在此正则表达式String.replace中使用Javascript的/\s+$/。它会用空字符串替换文本。

string.replace(/\s+$/, '')

示例：

var testString = "      test string      ";
console.log(testString.replace(/\s+$/, '');  // logs: "     test string"

DEMO

注意：我们可以直接使用trim()函数，但它会删除前导空格和尾随空格，而我们只想尾随。 trimLeft和trimRight既未在所有浏览器中进行标准化也未实施。

Answer 3

你可以在这里使用$ .trim（）函数：

<form name="account_reg_form" method="post" action="{$rlBase}{if $config.mod_rewrite}{$pageInfo.Path}.html{else}?page={$pageInfo.Path}{/if}" enctype="multipart/form-data">
    <div style="margin-top:10px;">
        <input style="text-transform:lowercase;" id="eMail" size="45" class="wauto" type="text" name="profile[mail]" {if $smarty.post.profile.mail}value="{$smarty.post.profile.mail}"{/if} required oninput="check(this)" />
    </div>
    <div style="margin-top:10px;">
        <input size="45" class="wauto" id="eMail_repeat" type="text" name="email_addr_repeat" title="Repeat your email address" placeholder="Repeat your email address" required oninput="check(this)" />
    </div>
    <input type="submit" value="{$lang.next_step}" />
</form>
<script>
    function check() {
        var email = document.getElementById('eMail').value.trim();
        var emailRepeat = document.getElementById('eMail_repeat').value.trim();

        if (email.value != emailRepeat.value) {
            emailRepeat.setCustomValidity('The two email addresses must match.');
        } else {
            // input is valid -- reset the error message 
            emailRepeat.setCustomValidity('');
        }
    }
</script>
<input style="text-transform:lowercase;" id="eMail" size="45" class="wauto" type="text" name="profile[mail]" {if $smarty.post.profile.mail}value="{$smarty.post.profile.mail}"{/if} required oninput="check(this)" />

Answer 4

只需使用下面的Jquery代码段，即使您选择包含空格的电子邮件，也会使用input bind event修剪它。

它甚至不允许空格。

$(function(){
  $('#eMail').bind('change', function(){
    $(this).val(function(_, v){
     return v.replace(/\s+/g, '');
    });
  });
  
  $('#eMail_repeat').bind('change', function(){
    $(this).val(function(_, v){
     return v.replace(/\s+/g, '');
    });
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<input type="email" id="eMail"/>
<input type="email" id="eMail_repeat"/>

请运行代码段，直接粘贴包含空格的电子邮件，并自动修剪空格。

Here is a fiddle

jquery删除文本输入

4 个答案: