Question

我有一个包含多个电子邮件地址的textarea;分隔的分隔符。我们要求使用JavaScript或jQuery突出显示无效的电子邮件地址。

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

Answer 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>

SCRIPT

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();

Answer 2

有关工作示例，请参阅以下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和HTML，并且只留下输入的电子邮件地址的文本。

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

通过将红色着色，突出显示textarea中的无效电子邮件地址

2 个答案: