vue监控表单输入事件，正则验证手机号，邮箱

vue监控表单输入事件，正则验证手机号，邮箱

<div class="input-name">
	<input
	class="input-type"
	type="text"
	placeholder="请输入您的邮箱"
	v-model="mail"
	@change="email"
	/>
</div>
<div class="input-name">
	<input
	class="input-type"
	type="text"
	placeholder="请输入您的电话"
	v-model="phone"
	@change="tel"
	/>
</div>



export default {
  data() {
    return {
      chooseProduct: "",
      companyName: "",
      mail: "",
      name: "",
      phone: "",

      isShow1: true,
      isShow2: false,

      chooseProduct: [],
      cities: [
        { id: "1", name: "公司产品" },
        { id: "2", name: "宝宝箱" },
        { id: "3", name: "商务合作" }
      ]
    };
  },
  methods: {
    email: function() {
      var email = /^[A-Za-z\d]+([-_.][A-Za-z\d]+)*@([A-Za-z\d]+[-.])+[A-Za-z\d]{2,4}$/;
      if (!email.test(this.mail)) {
        alert("请输入正确的邮箱");
        this.mail = "";
        // return;
      }
    },
    tel: function() {
      if (!/^1[345789]\d{9}$/.test(this.phone)) {
        alert("请输入正确的手机号");
        this.phone = "";
        // return;
      }
    },