elementui表单校验手机号
<el-form :model="areaForm" ref="numberValidateForm" :rules="addAddressRules" >
<el-form-item label="联系电话" label-width="120px" prop="cellphone">
<el-input v-model="areaForm.cellphone" maxlength="11" type="number"
oninput="if(value.length>11)value=value.slice(0,11)"
style="width: 80%" ></el-input>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button @click="locationNone">取 消</el-button>
<el-button type="primary" @click.stop="areaSubmit('numberValidateForm')" >提交订单</el-tton>
</div>
data() {
var checkPhone = (rule, value, callback) => {
// 手机号验证
if (!value) {
return callback(new Error("手机号不能为空"));
} else {
const reg = /^1[3456789]\d{9}$/;
if (reg.test(value)) {
callback();
} else {
return callback(new Error("请输入正确的手机号"));
}
}
};
return {
addAddressRules: {
cellphone: [
{ required: true, message: "请输入正确手机号", trigger: "blur" },
{ validator: checkPhone, trigger: ["blur", "change"] },
],
},
}
areaSubmit(formName) {
this.$refs[formName].validate((valid) => {
if (valid) {
// 表单输入完提交事件
} else {
console.log("error submit!!");
return false;
}
});
},
// 表单重置事件(清空表单输入框内容，初始化校验）
this.$refs["numberValidateForm"].resetFields();
//表单重置校验事件(移除表单校验，表单已输入的内容不会清空）
this.$refs["numberValidateForm"].clearValidate();
