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