效果

image.png

在methods中

//檢查手機號

isCellPhone(val) {

if (!/^1(3|4|5|6|7|8)\d{9}$/.test(val)) {

return false;

} else {

return true;

}

}

在template中

v-model="forgetForm.phone"

type="text"

auto-complete="off"

placeholder="請輸入你的手機號"

@input="phoneChange"

>

elementui 通過prop="phone"驗證規則

在data中

data() {

var checkphone = (rule, value, callback) => {

// let phoneReg = /(^1[3|4|5|6|7|8|9]\d{9}$)|(^09\d{8}$)/;

if (value == "") {

callback(new Error("請輸入手機號"));

} else if (!this.isCellPhone(value)) {

//引入methods中封裝的檢查手機格式的方法

callback(new Error("請輸入正確的手機號!"));

} else {

callback();

}

};

return {

loginForm: {

username: "admin",

password: "admin123",

rememberMe: false,

},

loginRules: {

username: [

{ required: true, trigger: "blur", message: "用戶名不能為空" }

],

password: [

{ required: true, trigger: "blur", message: "密碼不能為空" }

],

phone: [{ required: true, validator: checkphone, trigger: "blur" }]

},

};