正则匹配邮箱----全
效果图:
加逗号换行,可连续验证
代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src="../jquery-3.1.0.js" ></script>
<title>邮箱验证</title>
<style type="text/css">
textarea{
height: 200px;
width: 400px;
border: 3px solid #FF69B4;
font-size: 30px;
}
.green{
color: blue;
}
.red{
color: red;
}
button{
width: 200px;
height: 50px;
font-size: 40px;
font-weight: bold;
background-image: linear-gradient(pink,lightblue,lightgreen);
}
</style>
</head>
<body>
<textarea></textarea><br>
<button class="btn">提交验证</button>
<div>
<p class="green"> </p>
<p class="red"></p>
</div>
</body>
</html>
<script type="text/javascript">
var emailReg = /^\w+@[a-z-0-9]+(\.[a-zA-Z0-9-]+)?\.([a-zA-Z0-9\u4e00-\u9fa5]{2,8})(\.cn)?$/
// console.log(emailReg.test('1334671@qq.com'))
// console.log(emailReg.test('13346@qq.sina.cn'))
// console.log(emailReg.test('133467@163.中国我的'))
// console.log(emailReg.test('1334619@356.cn'))
// [\u4e00-\u9fa5]{2}
// 拆分正则
var splitReg = /[;,\r\n\s,]+/
$(function () {
$('button').on('click',function () {
// 声明空字符串
var str = ''
var emailAllStr = $('textarea').val();
// 拆分成email的数组
var emailAllArr = (emailAllStr + ';').split(splitReg)
// 删除最后的空元素
emailAllArr.pop()
console.log(emailAllArr)
emailAllArr.forEach(function (ele) {
console.log(ele)
if (emailReg.test(ele)){
console.log(ele)
str += ('<p class="green">邮箱 '+ ele +' 验证成功!</p>')
}else {
str += ('<p class="red">邮箱 '+ ele +' 验证失败!</p>')
}
})
$('div').html(str)
})
})
</script>