1

我有一个包含多个电子邮件地址的文本区域，其中包含 ; 分隔符。我们需要使用 JavaScript 或 jQuery 以红色突出显示无效的电子邮件地址。

例如：我在 textarea 中有 10 个用逗号分隔的电子邮件地址，其中 3 个无效，因此这些电子邮件地址应突出显示为红色，用户将能够轻松识别无效的电子邮件地址。

4

2 回答 2

1

同意该问题缺乏很多必要信息的评论，根据需要和范围，有一些可能的选择。这是一个演示 2 个选项的示例：将有效和无效的电子邮件地址拆分为 2 个不同的文本区域，或者使用 div 显示结果并隐藏 textarea 表单控件。同样，在不知道列表来自何处、如何验证等信息的情况下，这只是一个刺：

祝你好运

HTML

<form name="test" id="test">
<textarea name="valid" id="valid"></textarea><br />
<textarea name="invalid" id="invalid" style="color:red;"></textarea>
</form>
<div id="ta_sudo"></div>

脚本

function processEmailAddresses(){
    var addList = 'abc@123.com;www@www.com;t@d.cor;t.dd.www';
    separateInvalid(addList);
}

function separateInvalid(addList){
    var addArr = addList.split(';');
    var validArr = [];
    var invalidArr = [];
    var compositeArr = [];
    for(var i = 0; i < addArr.length; i++){
        if(!testEmail(addArr[i])){
            invalidArr.push(addArr[i]);
            compositeArr.push('<span style="color:red">' + addArr[i]) + '</span>';
        }else{
            validArr.push(addArr[i]);
            compositeArr.push(addArr[i]);
        }
    }
    $('#valid').val(validArr.join(';'));
    $('#invalid').val(invalidArr.join(';'));
    $('#ta_sudo').html(compositeArr.join(';'))

}

function testEmail(emailAddress){
    var regexEmail = /^([A-Za-z0-9_\-\.])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,4})$/;
    return regexEmail.test(emailAddress);
}

processEmailAddresses();
于 2013-05-30T20:25:39.103 回答
1

有关工作示例，请参阅以下jsFiddle 。

正如其他人所说，你不能用 Textarea 做到这一点。但是，您可以创建一个 div，将其设置为看起来像您的其他表单元素，并将 ContentEditable 属性设置为 True。使用一点 Javascript，您将拥有您正在寻找的东西。

以下代码将遍历以分号分隔的电子邮件地址列表，并使用正则表达式来测试每个地址。如果没有匹配，文本被包裹在一个跨度中并分配一个“红色”类。然后将生成的新 HTML 应用于 contenteditable div，用户将看到突出显示的无效电子邮件地址

JS

$('#btnSubmit').click(function() {
    var textEntered = $('#divEdit').text();
    var textResult = [];
    $.each(textEntered.split(';'), function(index, item) {
        if (item.match(/^\S+@\S+\.\S+$/)) {
            textResult.push(item);
        }
        else {
            textResult.push('<span class="red">' + item + '</span>');
        }
    });
    $('#divEdit').html(textResult.join(';'));
});

当用户提交表单时，您需要做的就是获取 contenteditable div 的 HTML 并去掉 HTML，您将只剩下输入的电子邮件地址的文本。

注意：尝试使用正则表达式验证电子邮件地址有很多挑战（Using a regular expression to validate an email address）。小心你想要达到的目标。

于 2013-05-30T21:04:56.983 回答