1、手机号验证
<el-form ref="formRef" :model="form" :rules="rule" label-width="100px"><el-form-item label="联系电话" prop="mobile"><el-input type="tel" v-model="form.mobile" /></el-form-item>
</el-form><script setup lang="ts">
const rule: ElFormRules = {mobile: [{ validator: validateMobile, trigger: 'blur' }]
}
// 手机号验证(1)
const validateMobile = (rule, value, callback) => {const reg = /^1[3-9]\d{9}$/if (value && !reg.test(value)) {callback(new Error('请输入有效的电话号码!'))} else {callback()}
}//手机号验证2
const rule: ElFormRules = {mobile: [{pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,message: '请输入正确的手机号码',trigger: 'blur'}]
}
</script>
2、正整数验证
<el-form ref="formRef" :model="form" :rules="rule1" label-width="100px"><el-form-item label="数值" prop="num"><el-input type="number" v-model="form.threshold" placeholder="请输入正整数"/></el-form-item>
</el-form><script setup lang="ts">
const rule: ElFormRules = {mobile: [{ validator: validateMobile, trigger: 'blur' }]
}
// 正整数验证
const rule: ElFormRules = {num: [{ required: true, message: '请输入数字!', trigger: 'blur' },{validator: (rule, value, callback) => {const regex = /^[1-9]{1}[0-9]*$/if (regex.test(value)) {callback()} else {callback(new Error('请输入正整数!'))}},trigger: 'blur'}]
}
</script>
3、邮箱验证
const rule: ElFormRules = {email: [{type: 'email',message: '请输入正确的邮箱地址',trigger: ['blur', 'change']}]
}