通过将文本区域中的无效电子邮件地址涂成红色来突出显示它们
我有一个包含多个电子邮件地址的文本区域，其中有一个；分隔的分隔符。我们有一个要求突出无效的电子邮件地址使用JavaScript或jQuery红色。
例如:我在文本区域中有10个用逗号分隔的电子邮件地址，其中3个是无效的，所以这些电子邮件地址应该突出显示为红色，用户将能够轻松识别无效的电子邮件地址。
回答 2
Stack Overflow用户
发布于 2013-05-31 04:25:39
同意该问题缺乏许多必要信息的评论，根据需要和范围，有一些可能的选择。下面是一个示例，演示了两种选择:要么将有效和无效的电子邮件地址分成两个不同的文本区域，要么使用div显示结果并隐藏文本区域表单控件。同样，在不知道列表来自何处、如何验证等的情况下，这只是一种尝试：
祝好运
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();Stack Overflow用户
发布于 2013-05-31 05:04:57
有关工作示例，请参阅以下 。
正如其他人所说，你不能用Textarea做到这一点。但是，您可以创建一个div，将其样式设置为与其他表单元素类似，并将ContentEditable属性设置为True。使用一点Javascript，你就会得到你想要的东西。
以下代码将遍历分号分隔的电子邮件地址列表，并使用regex测试每个地址。如果没有匹配项，文本将被包装在span中，并为其分配一个"red“类。然后，将生成的新HTML应用于可内容编辑的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(';'));
});当用户提交表单时，您所需要做的就是获取可内容编辑div的HTML，并剥离出HTML，然后您将只剩下输入的电子邮件地址的文本。
注意:尝试使用正则表达式来验证电子邮件地址(Using a regular expression to validate an email address)存在许多挑战。在你想要实现的目标上要小心。
https://stackoverflow.com/questions/16844730
复制相似问题
腾讯云开发者
