element手机验证格式_vue封装 element-ui form表单验证 正则匹配手机号 自定义校验表格内容...
效果
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" }]
},
};
總結
以上是生活随笔為你收集整理的element手机验证格式_vue封装 element-ui form表单验证 正则匹配手机号 自定义校验表格内容...的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 私藏几十款程序员必备效率工具：一次性都给
- 下一篇： vue 移动端头像裁剪_使用vue-cr