<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<script src="jquery-1.10.2.min.js"></script>
<script src="jquery-ui.min.js"></script>
<script src="jquery.tag-editor.js"></script>
<link href="mailbox.css" rel="stylesheet" />
<link href="jquery.tag-editor.css" rel="stylesheet" />
<script>
(function ($) { var proto = $.ui.autocomplete.prototype, initSource = proto._initSource; function filter(array, term) { var matcher = new RegExp($.ui.autocomplete.escapeRegex(term), "i"); return $.grep(array, function (value) { return matcher.test($("<div>").html(value.label || value.value || value).text()); }); } $.extend(proto, { _initSource: function () { if (this.options.html && $.isArray(this.options.source)) { this.source = function (request, response) { response(filter(this.options.source, request.term)); }; } else { initSource.call(this); } }, _renderItem: function (ul, item) { return $("<li></li>").data("item.autocomplete", item).append($("<a></a>")[this.options.html ? "html" : "text"](item.label)).appendTo(ul); } }); })(jQuery);
var cache = {};
function googleSuggest(request, response) {
var term = request.term;
if (term in cache) { response(cache[term]); return; }
$.ajax({
url: 'http://query.yahooapis.com/v1/public/yql',
dataType: 'JSONP',
data: { format: 'json', q: 'select * from xml where url="http://google.com/complete/search?output=toolbar&q=' + term + '"' },
success: function (data) {
console.log(data)
var suggestions = [];
try { var results = data.query.results.toplevel.CompleteSuggestion; } catch (e) { var results = []; }
$.each(results, function () {
try {
var s = this.suggestion.data.toLowerCase();
suggestions.push({ label: s.replace(term, '<b>' + term + '</b>'), value: s });
} catch (e) { }
});
cache[term] = suggestions;
response(suggestions);
}
});
}
$(function () {
$('#hero-demo').tagEditor({
placeholder: '请输入',
forceLowercase: false,
autocomplete: {
delay: 0,
source:['123@11.com', '1234', '123444'],// googleSuggest,
minLength: 0,
html: true,
position: { collision: 'flip' },
select: function (e,ui) {
}
},
onChange: function (field, editor, tags) {
//alert(tags.join(', '))
$('li', editor).each(function () {
$('#hero-demo').tagEditor('removeTag', '')
var li = $(this);
var mail = li.find('.tag-editor-tag').html();
console.log(mail);
if (!validMail(mail)) {
li.addClass('red-tag');
} else {
li.removeClass('red-tag');
}
});
},
beforeTagSave: function (field, editor, tags, tag, val) {
$('li', editor).each(function () {
var li = $(this);
var mail = li.find('.tag-editor-tag').html();
console.log(mail);
if (!validMail(mail)) {
li.addClass('red-tag');
} else {
li.removeClass('red-tag');
}
});
},
});
$(".ui-menu-item").on("click", function () {
//alert($(this).children().html());
$('#hero-demo').tagEditor('addTag', "");
})
//alert($('#hero-demo').tagEditor('getTags')[0]);
//alert($('#hero-demo').tagEditor('getTags')[0].tags["0"]);
});
//Emailaddress验证
function validMail(mail) {
// var _mailreg = /^([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+@([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+\.[a-zA-Z]{2,3}$/;
var _mailreg = /^([a-zA-Z0-9_\-])+([a-zA-Z0-9_\-\.])*@([a-zA-Z0-9_\-])+([a-zA-Z0-9_\-\.])*((\.[a-zA-Z0-9_\-]{1,}){1,})$/;
if (_mailreg.test(mail)) {
return true;
}
return false;
}
</script>
</head>
<body>
<div style="border-top: 1px solid #eee;border-bottom:1px solid #eee;background:#fafafa;margin:30px 0;padding:20px 5px">
<div style="padding :0 7px 0 5px;max-width:900px;margin:auto">
<textarea id="hero-demo"></textarea>
</div>
</div>
</body>
</html>
Jquery仿163收件人效果+邮箱验证
5星 · 超过95%的资源 需积分: 10 190 浏览量
2017-07-26
16:53:59
上传
评论 1
收藏 99KB RAR 举报 
Jquery仿163收件人效果+邮箱验证.rar （8个子文件） 
Jquery仿163收件人效果+邮箱验证 
jquery-1.10.2.min.js 92KB mailbox.css 5KB jquery.tag-editor.min.js 9KB jquery-ui.min.js 223KB jquery.tag-editor.css 2KB
delete.png 227B
mailbox_write.html 5KB jquery.tag-editor.js 18KB资源评论
redlz25002020-01-28作为参考了，谢谢
sawyergg2018-07-02风格效果不错
jero丶泽2018-09-03效果还可以
