文章描述了如何在Vue.js应用中进行手机号的验证。首先，在utils文件夹中创建了一个使用正则表达式校验手机号的方法。然后，在页面的UI结构中设置了表单验证规则，并在data对象中定义了自定义的校验函数，用于在用户输入时检查手机号码的格式。如果格式不正确，将显示错误信息。
第一步：在utils文件夹中写一个校验手机号的方法
export function validMobile(str) {
return /^1[3-9]\d{9}$/.test(str) // 校验手机号
}
第二步：在页面UI结构中表单验证规则（此处省略）
第三步：在页面中data数据中校验
import { validMobile } from '---'
data() {
// 自定义校验函数
const validateMobile = function(rule, value, callback) {
validMobile(value) ? callback() : callback(new Error('手机号格式不正确'))
}
return {
loginForm: {
mobile: '',
password: ''
},
loginRules: {
mobile: [
{ required: true, trigger: 'blur', message: '手机号不能为空' },
{ validator: validateMobile, trigger: 'blur'}
],
password: [
{ required: true, trigger: 'blur', message: '密码不能为空' },
{ min: 6, max: 16, message: '密码的长度在6-16位之间 ', trigger: 'blur'}
]
},
}
},
扫一扫
599
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
