vue项目中使用正在失去焦点事件并对输入框进行正则校验

<!-- 邮箱输入框，为其设置失去焦点事件 -->
<input v-model="resourceapplication.cloudHostUserContactEmail" class="form-control" id="email" v-on:blur="email()">

<!-- 放置于script标签中的methods中 -->
email() {
	<!-- 获取id为email的整个标签数据 -->
	let email = document.getElementById("email");
	<!--
		校验email中的value值是否符合正则表达式要求，符合就将边框改为绿色，不符合就弹出错误提示，并将输入框中的数据改为空，再将边框置为红色
		/^[A-Za-z\d]+([-_.][A-Za-z\d]+)*@([A-Za-z\d]+[-.])+[A-Za-z\d]{2,5}$/ : 邮箱正则表达式
		/^1[3456789]\d{9}$/ : 手机号正则表达式
		/\d+/g : 数字正则表达式
		/^[\s\S]*.*[^\s][\s\S]*$/ : 为空正则表达式
		email.value : 用户输入到输入框中的数据，也可以通过resourceapplication.cloudHostUserContactEmail获取用户输入到输入框中的数据
	-->
	if (/^[A-Za-z\d]+([-_.][A-Za-z\d]+)*@([A-Za-z\d]+[-.])+[A-Za-z\d]{2,5}$/.test(email.value)) {

		email.style.border = "1px solid #00FF00";	

	} else {

		alert("邮箱格式错误, 请重新输入");
		email.value = "";
        email.style.border = "1px solid #FF4500";

	}
}