渐进式表单中集成jQuery邮箱验证的技术求助

问题分析 #

当前代码仅校验必填字段是否为空，未针对邮箱格式做验证，导致即便邮箱输入格式错误，表单仍会直接跳转至下一环节。

解决方案 #

在现有必填字段校验逻辑中，新增邮箱格式验证步骤：

1. 定义邮箱验证规则：使用标准正则表达式判断输入内容是否符合邮箱格式规范。
2. 识别邮箱字段：通过字段的type="email"属性或自定义类（如.msforms-email）标记邮箱输入框，便于代码精准识别。
3. 添加格式校验逻辑：在非空检查通过后，若当前字段为邮箱输入框，验证其格式是否正确；若格式错误，显示提示并阻止表单跳转。

修改后的完整代码 #

jQuery(document).ready(function() {
    // 点击下一步按钮
    jQuery('.msform-next-btn').click(function() {
        var parentFieldset = jQuery(this).parents('.msforms-fieldset');
        var currentActiveStep = jQuery(this).parents('.msform').find('.msform-steps .active');
        var next = jQuery(this);
        var nextmsformsStep = true;
        // 邮箱格式验证正则表达式
        const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;

        parentFieldset.find('.msforms-required').each(function(){
            var thisField = jQuery(this);
            var thisValue = thisField.val().trim(); // 去除输入首尾空格，避免空格误判

            if( thisValue === "") {
                thisField.siblings(".msforms-form-error").text("此字段不能为空").slideDown();
                nextmsformsStep = false;
            }
            else {
                // 判断当前字段是否为邮箱输入框（支持type属性或自定义类标记）
                if (thisField.is('[type="email"]') || thisField.hasClass('msforms-email')) {
                    if (!emailRegex.test(thisValue)) {
                        thisField.siblings(".msforms-form-error").text("请输入有效的邮箱地址").slideDown();
                        nextmsformsStep = false;
                    } else {
                        thisField.siblings(".msforms-form-error").slideUp();
                    }
                } else {
                    thisField.siblings(".msforms-form-error").slideUp();
                }
            }
        });

        if( nextmsformsStep) {
            next.parents('.msforms-fieldset').removeClass("show","400");
            currentActiveStep.removeClass('active').addClass('activated').next().addClass('active',"400");
            next.parents('.msforms-fieldset').next('.msforms-fieldset').addClass("show","400");
            jQuery(document).find('.msforms-fieldset').each(function(){
                if(jQuery(this).hasClass('show')){
                    var formAtrr = jQuery(this).attr('data-tab-content');
                    jQuery(document).find('.msform-steps .msform-step-item').each(function(){
                        if(jQuery(this).attr('data-attr') == formAtrr){
                            jQuery(this).addClass('active');
                            var innerWidth = jQuery(this).innerWidth();
                            var position = jQuery(this).position();
                            jQuery(document).find('.msform-step-move').css({"left": position.left, "width": innerWidth});
                        }else{
                            jQuery(this).removeClass('active');
                        }
                    });
                }
            });
        }
    });
});

关键改动说明 #

• 新增emailRegex变量，存储标准邮箱格式验证正则。
• 对输入值调用.trim()，避免首尾空格导致的非空误判。
• 支持两种邮箱字段标记方式：type="email"属性或自定义类.msforms-email，适配不同表单结构。
• 区分空值和格式错误的提示文本，提升用户纠错体验。
• 格式验证不通过时，同样设置nextmsformsStep = false，阻止表单跳转。

内容的提问来源于stack exchange，提问作者user6725932