Vue input标签 email和手机号输入验证
1、 email邮箱验证规则
2、 手机号正则表达式验证规则
vue写法:
<script>
export default {
data() {
// 验证手机号的规则
var cheackMobile = (rule, value, cb) => {
// 手机号一般最小以“13”开头
const regMobile = /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/
if (regMobile.test(value)) {
return cb
}
cb(new Error('请输入合法的手机号!'))
}
return {
email: '',
phone: '',
rules: {
email: [
{ required: true, message: '请输入邮箱', trigger: 'blur' },
{ type: 'email', message: '请输入正确的邮箱地址', trigger: ['blur', 'change'] }],
phone: [
{ required: true, message: '请输入手机号', trigger: 'blur' },
{ validator: cheackMobile, trigger: 'blur' }]
}
}
}
</script>
运行截图: