elementPlus 中表单验证方法（手机号、正整数、邮箱）

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']
      }]
}