form表单数字校验（二）——邮箱校验-当前页面

form表单数字校验（二）——邮箱校验-当前页面

效果

代码

index.vue

<el-form-item v-if='!isDisabled' label='邮箱'>
    <el-input
        v-model.trim='ruleForm.email'
        class='n_form_is'
    
    ></el-input>
</el-form-item>
<el-form-item v-else label='邮箱'>
    {{ ruleForm.email }}
</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: {
            email: '',
        },
        rules: {
            email: [
                {
                    required: true,
                    message: '请输入邮箱信息',
                    trigger: 'blur'
                },
                // {
                //     max: 16,
                //     message: '最大16',
                //     trigger: 'blur'
                // },
                {
                    validator: IsEmail,
                    trigger: 'blur'
                }
            ], 
        }
    })
    
    //方法
    staffFile.getResumeDetail({ resumeId: route.query.resumeId })
                    .then(res => {
                        if (res.code === 200) {
                            state.ruleForm.email = res.data.email;
	         			}
                     })
</script>