form表单数字校验（三）——手机号校验-当前页面

form表单数字校验（三）——手机号校验-当前页面

效果1-手机号空值校验

效果2-手机号校验

代码

index.vue

<el-form-item v-if='!isDisabled' label='紧急联系电话' prop='emergencyPhone'>
    <el-input
        v-model.trim='ruleForm.emergencyPhone'
        class='n_form_is'
    
    ></el-input>
</el-form-item>

<el-form-item v-if='!isDisabled' label='手机号' prop='phone'>
    <el-input
        v-model.trim='ruleForm.phone'
        class='n_form_is'
        maxlength='11'
    
    ></el-input>
</el-form-item>
<el-form-item v-else label='手机号' prop='phone'>
    {{ ruleForm.phone }}
</el-form-item>


<script>
    setup(props, context) {
        // 当前页面数据
        
        const router = useRouter();
        const route = useRoute();
        const store = useStore();
        const isDisabled = computed(() => {
            return route.query.isDisabled == '1' ? false : true;
        });
        /*校验电话码格式 */
        const isTelCode = (rule, value, callback) => {
            const reg = /^1(3|4|5|6|7|8|9)\d{9}$/;
            if (!reg.test(value)) {
                callback(new Error('请输入正确的手机号'));
            } else {
                callback();
            }
        };
        // 邮箱
        const IsEmail = (rule, value, callback) => {
            const reg = /^([A-Za-z0-9_\-.])+@([A-Za-z0-9_\-.])+\.([A-Za-z]{2,4})$/;
            if (!reg.test(value)) {
                callback(new Error('请输入正确的邮箱'));
            } else {
                callback();
            }
        };
        // 正整数
        const isNumber = (rule, value, callback) => {
            if (regexRoles.isNumber(value) !== value) {
                callback(new Error('仅支持正整数'));
            } else {
                callback();
            }
        };    
    const state = reactive({
        ruleForm: {
            phone: '',
            emergencyPhone:'',
        },
        rules: {
            emergencyPhone: [
                {
                    required: true,
                    message: '请输入紧急联系人电话',
                    trigger: 'blur'
                },
                {
                    validator: isTelCode,
                    trigger: 'blur'
                }
            ],
            phone: [
                {
                    required: true,
                    message: '请输入手机号',
                    trigger: 'blur'
                },
                {
                    validator: isTelCode,
                    trigger: 'blur'
                }
            ],            
        }
    })
    
    //方法
    staffFile.getResumeDetail({ resumeId: route.query.resumeId })
                    .then(res => {
                        if (res.code === 200) {
                            state.ruleForm.phone = res.data.phone;
	         			}
                     })
</script>