js正则表达式验证邮箱用户名

Js代码：

<script>
		var username=document.getElementById("username");
		var email=document.getElementById("email");
		var btn=document.getElementById("btn");
		var btn2=document.getElementById("btn2");
		btn.onclick=function(){
			var user_ipt=username.value;//动态获取input输入框的值进行正则表达式判断
			var pa=/^[a-z][a-zA-Z0-9_]/;
			if (pa.test(user_ipt)) {
				alert("用户名验证成功!");
			}else{
				alert("用户名输入错误!");
			}	
		}
		btn2.onclick=function(){
			var e_ipt=email.value;		
			//要求：邮箱的开头不能使用数字及非法字符；.必须在@后面；
			var pa2=/^[a-z]([a-zA-Z0-9_]{5,20})@([a-z0-9]{1,10})([.]{1})([a-z]{2,4})$/;
			if (pa2.test(e_ipt)) {
				alert("邮箱输入成功!");
			}else{
				alert("邮箱格式错误!");
			}
		}
	</script>

css代码:

	<style>
		.cont{
			width: 400px;
			height:253px;
			border:4px solid black;
			margin:0 auto;
			background-color: lightblue;
			color: white;
			font-weight: bold;
		}
		.container{
			width: 240px;
			height: 200px;
			margin:0 auto;
			/*border: 1px solid black;*/
		}
		input{
			display: inline-block;
			height: 30px;
			margin-top:20px;
			margin-bottom: 20px;
		}
		 button{
		 	display:block;
		 	width: 90px;
		 	height: 30px;
		 	margin:0 auto;
		 }
		 #btn{
		 	float: left;
		 }
		 #btn2{
		 	float: right;
		 }
</style>

html代码：

<div class="cont">
		<div class="container">
			用户名：<input type="text" id="username" placeholder="请输入正确用户名"><br>
			邮 箱 ：<input type="text" id="email"placeholder="请输入正确邮箱">
			<button id="btn">用户名验证</button>
			<button id="btn2">邮箱验证</button>
		</div>
		<p style="color: red;">注：用户名及邮箱不能以数字及其非法字符开头!</p>
	</div>

希望这篇文章可以帮助到有需要的你！