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";
}
}
