Question

我已经在该网站上进行了一系列修订，基本上，我需要在电子邮件输入字段中添加验证，该字段仅允许.edu扩展用于唯一的学生类型注册。

当前，存在一个下拉菜单，用户可以通过该下拉菜单选择学生或公司。因此，当有人选择一个学生时，我希望该验证规则适用，只有.edu才能注册。

在通过google和StackOverflow奋斗之后，我在jQuery中编写了两个脚本，这些脚本似乎运行不佳。

用户填写所有表单字段，在选择学生时，应检查电子邮件输入字段，如果扩展名为.edu，则应停止用户创建帐户。

代码1：

jQuery( document ).ready(function(){
jQuery('#reg_email').on('input',function(e){
 var email = document.getElementById("reg_email");
 var counter = 0;
if(jQuery(".chosen-single span").text().search("Student") == 0){
if (email.value.indexOf("@") != -1) {
    if (!(/(.+)@(.+)\.(edu)$/.test(email.value))) {
   if(counter<=0){
        jQuery('#signup-dialog input[type="submit"]').prop('disabled', true);
    jQuery(".form-row.form-row-wide:eq(1)").append('<p id="alert" style="padding-top:5px;color:red;">You are not eligible for an account. Please enter a valid .edu email.</p>');
counter++;
}
    }else{
      jQuery(#alert).remove();
      jQuery('#signup-dialog input[type="submit"]').prop('disabled', false);
    }

}
}
});
});

上面的这段代码反复添加了p标签，但我试图将其绑定到仅一次。

代码2：

jQuery( document ).ready(function(){
var email = document.getElementById("reg_email");
if(jQuery(".chosen-single span").text().search("Student") == 0){
jQuery("#reg_email").validate({
    rules: {
        email: {
            required: true,
            email: true,
            pattern: /(\.edu\.\w\w\w?)$/
        }
    }
});
}
});

这甚至不起作用，我什至包含了两个脚本validate.min.js和Additional-methods.min.js，但仍然无法正常工作。

感觉就像我开始感觉这根本不可能。

请帮助的人。

网站为website，当您单击注册时，您会看到注册模式框。

目前，我已经删除了所有自定义JS代码。这样你们可以在控制台中签到。

P.S编辑

代码3：我什至尝试了

 jQuery( document ).ready(function(){
 var email = document.getElementById("reg_email");
 var done = false;
jQuery(".chosen-single span").on('DOMSubtreeModified', function () {
if(jQuery(".chosen-single span").html() == 'Student') {
if (email.value.indexOf("@") != -1) {
    if (!(/(.+)@(.+)\.(edu)$/.test(email.value))) {
   if(!done) {
    jQuery('#signup-dialog input[type="submit"]').prop('disabled', true);
    jQuery(".form-row.form-row-wide:eq(1)").append('<p id="alert" style="padding-top:5px;color:red;">You are not eligible for an account. Please enter a valid .edu email.</p>');
done = true;
}
 else{
      jQuery("#alert").remove();
      jQuery('#signup-dialog input[type="submit"]').prop('disabled', false);
    }
}
}
});
});

但是在这段代码中，如果span值为'Student'，但是下面的其余代码不起作用，我只会检查domsubtreemodified并生成一个警报框。

这是HTML表单

<form method="post" class="register workscout_form">
    <p class="form-row form-row-wide">
                        <label for="reg_username">Username <span class="required">*</span>
                        <i class="ln ln-icon-Male"></i>
                        <input type="text" class="input-text" name="username" id="reg_username" value="">
                        </label>
                    </p>

                <p class="form-row form-row-wide">
                    <label for="reg_email">Email address <span class="required">*</span>
                    <i class="ln ln-icon-Mail"></i><input type="email" class="input-text" name="email" id="reg_email" value="">
                    </label>
                </p>


                    <p class="form-row form-row-wide">
                        <label for="reg_password">Password <span class="required">*</span>
                        <i class="ln ln-icon-Lock-2"></i><input type="password" class="input-text" name="password" id="reg_password">
                        </label>
                    </p>

                             <p class="form-row terms wc-terms-and-conditions">
            <label class="woocommerce-form__label woocommerce-form__label-for-checkbox checkbox">
                <input type="checkbox" class="woocommerce-form__input woocommerce-form__input-checkbox input-checkbox" name="terms" id="terms" autocomplete="off"> <span>I’ve read and accept the <a href="https://brainbaitinc.com/terms-of-service/" target="_blank" class="woocommerce-terms-and-conditions-link">terms &amp; conditions</a></span> <span class="required">*</span>
            </label>
            <input type="hidden" name="terms-field" value="1">
        </p>
                    <label for="user_email">I want to register as</label><select name="role" class="input chosen-select" style="display: none;"><option value="employer">Business</option><option value="candidate">Student</option></select><div class="chosen-container chosen-container-single chosen-container-single-nosearch" style="width: 100%;" title=""><a class="chosen-single" tabindex="-1"><span>Business</span><div><b></b></div></a><div class="chosen-drop"><div class="chosen-search"><input type="text" autocomplete="off" readonly=""></div><ul class="chosen-results"></ul></div></div>
                <p class="form-row">
                    <input type="hidden" id="_wpnonce" name="_wpnonce" value="cc26c06e5b"><input type="hidden" name="_wp_http_referer" value="/">                    <input type="submit" class="button" name="register" value="Register">
                </p>
            </form>

这是我正在使用的最后一个代码4，它工作得很好，但只剩下一件事，当假设用户使用适当的edu电子邮件更正电子邮件时，警告应该发出并且按钮应该启用，我可以不能以此方式工作。

jQuery( document ).ready(function(){
 var email = document.getElementById("reg_email");
 var done = false;
 jQuery("select[name='role']").change(function() {
     if(jQuery("select[name='role']").children(':selected').html() == 'Student') {
if (email.value.indexOf("@") != -1) {
    if (!(/(.+)@(.+)\.(edu)$/.test(email.value))) {
    if(!done) {
    jQuery('#signup-dialog input[type="submit"]').prop('disabled', true);
    jQuery(".form-row.form-row-wide:eq(1)").append('<p id="alert" style="padding-top:5px;color:red;">You are not eligible for an account. Please enter a valid .edu email.</p>');
    done = true;
}
 else{
      jQuery("#alert").remove();
      jQuery('#signup-dialog input[type="submit"]').prop('disabled', false);
    }
}
}
}
});
});

Answer 1

这应该可行，请注意，它将在change上更新，而不是在提交表单之后。

function emailValid(email) {
    var re = /(\.edu\.\w\w\w?)$/;
    return re.test(email);
}

$(document).ready(function() {

    $(document).on('change', '#reg_email', function() {
        if ($(".chosen-single span").html() == 'Student') {
            if (!emailValid($('#reg_email').val())) {
                // Alert user that the email is not valid
            }
            else {
                // Remove the alert
            }
        }
    });

});

Answer 2

好的，这是帮助我完成此任务的完整代码。

jQuery( document ).ready(function(){
 var email = document.getElementById("reg_email");
 var done = false;
 jQuery("select[name='role']").change(function() {
     if(jQuery("select[name='role']").children(':selected').html() == 'Student') {
if (email.value.indexOf("@") != -1) {
    if (!(/(\.edu\.\w\w\w?)$/.test(email.value))) {
    if(!done) {
    jQuery('#signup-dialog input[type="submit"]').prop('disabled', true);
    jQuery(".form-row.form-row-wide:eq(1)").append('<p id="alert" style="padding-top:5px;color:red;">You are not eligible for an account. Please enter a valid .edu email.</p>');
    done = true;
}
 else{
      jQuery("#alert").remove();
      jQuery('#signup-dialog input[type="submit"]').prop('disabled', false);
    }
}
}
}if(jQuery("select[name='role']").children(':selected').html() == 'Business') {
      done = false;
      jQuery("#alert").remove();
      jQuery('#signup-dialog input[type="submit"]').prop('disabled', false);
}
});
jQuery("#reg_email").on("change keyup paste", function(){
 if(jQuery("select[name='role']").children(':selected').html() == 'Student') {
if (email.value.indexOf("@") != -1) {
    if (/(\.edu\.\w\w\w?)$/.test(email.value)) {
        jQuery("#alert").remove();
      jQuery('#signup-dialog input[type="submit"]').prop('disabled', false);
    }else{
if(jQuery("p#alert").length <= 1){
  jQuery("p#alert").remove();
 jQuery('#signup-dialog input[type="submit"]').prop('disabled', true);
    jQuery(".form-row.form-row-wide:eq(1)").append('<p id="alert" style="padding-top:5px;color:red;">You are not eligible for an account. Please enter a valid .edu email.</p>');
  done = true;
}
}
}
}
});
});

现在一切正常，很棒！发布此内容可能会对某人有所帮助。

jQuery Wordpress问题表单验证

2 个答案: