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" }]

},

};