为表单字段添加后缀答案

【问题标题】：Add suffix to form field为表单字段添加后缀
【发布时间】：2023-03-14 17:10:01
【问题描述】：

我有一些（超过一千个）用户坚持只使用他们的姓名登录，但系统坚持提供完整的电子邮件地址（姓名+@my-mail.com）。哪个是在不打扰用户的情况下向字段添加后缀的智能解决方案？

形式：

<form id="login_form" action="processing.php" method="post" class="form">
  <fieldset>
     <ul class="input_block">
        <li>
           <input type="text" name="email" id="email" value="" />
        </li>
        <li>
           <input type="password" name="passwort" id="password" />
        </li>
     </ul>
  </fieldset>

我尝试了该字段的按键功能，但没有太大帮助。

<script>
$('#email').keyup(function(e){
   if(this.value.length > 12){
     this.value = this.value + '@my-mail.com';
  if( this.value.indexOf('@my-mail.com') <= 0 ){ 
     this.value = String.fromCharCode(e.which) + '@my-mail.com'; 
  }
});
</script>

我认为在提交之前操作字段的解决方案更“正确”（遗憾的是，我无权访问正在接收提交的 PHP 文件）。所以我也尝试了提交功能，这也不起作用。

<script>
$( "#login_form" ).submit(function( event ) {
   ("#email").value = ("#email").value + '@my-mail.com';
});
</script>

有人建议如何使用提交功能或其他似乎更好的想法来解决它？

【问题讨论】：

标签： javascript jquery html forms

【解决方案1】：

$('#email').change(function() {
  var val = $(this).val();
  if(val.indexOf('@my-mail.com') == -1)
    $(this).val(val+'@my-mail.com');
});

http://jsfiddle.net/g4oLtfw7/

如果“@my-mail.com”后缀还不是输入值的一部分，这将添加它。如果您想允许其他类型的电子邮件，但默认为“my-mail.com”，请尝试以下操作：

$('#email').change(function() {
  var val = $(this).val();
  if(val.indexOf('@') == -1)
    $(this).val(val+'@my-mail.com');
});

【讨论】：

【解决方案2】：

要么：

$('#login_form').submit(function (e) {
    var email = $('#email'),
        user = email.val().split('@')[0],
        domain = '@my-mail.com';
    if (email.val().toLowerCase() !== (user + domain).toLowerCase()) {
        email.val(user + domain);
    }
});

或

$('#email').change(function (e) {
    var email = $(this),
        user = email.val().split('@')[0],
        domain = '@my-mail.com';
    if (email.val().toLowerCase() !== (user + domain).toLowerCase()) {
        email.val(user + domain);
    }
});

是我将如何处理这个问题（强制性小提琴：http://jsfiddle.net/e84v7nat/）。

此方法可确保您的用户指定了域并且该域是正确的。如果用户名区分大小写，请删除对.toLowerCase 的调用。

【讨论】：

这也是一个非常有用的解决方案！