正则匹配邮箱----全

效果图:

加逗号换行,可连续验证

代码:

<!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>
posted @ 2017-01-13 09:25  阿_猫阿_狗  阅读(251)  评论(0编辑  收藏  举报