天天看點

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