<el-form
ref="ruleForm"
:model="ruleForm"
:rules="rules"
label-width="100px"
class="demo-ruleForm"
>
<el-form-item
label="联系方式"
prop="mobilePhone"
/>
<el-form-item
label="电子邮箱"
prop="email"
/>
</el-form>
data() {
var checkMobile = (rule, value, cb) => {
const regMobile = /^(0|86|17951)?(13[0-9]|15[0123456789]|16[0123456789]|17[0123456789]|18[0-9]|14[57])[0-9]{8}$/
if (regMobile.test(value)) {
return cb()
}
cb(new Error('请输入合法手机号码'))
}
var checkEmail = (rule, value, cb) => {
const regMobile = /^[A-Za-z0-9\u4e00-\u9fa5]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/
if (regMobile.test(value)) {
return cb()
}
cb(new Error('请输入合法电子邮箱'))
}
return {
rules: {
mobilePhone: [
{ required: true, message: '请输入手机号码', trigger: 'blur' },
{ validator: checkMobile, max: 11, message: '请输入正确的格式', trigger: 'blur' }
],
email: [
{ required: true, message: '请输入电子邮箱', trigger: 'blur' },
{ validator: checkEmail, max: 11, message: '请输入正确的格式', trigger: 'blur' }
]
}
}
}
uni-app form表单校验
vue + ivew 校验form表单俩次密码输入是否一致