jQuery-仅允许特定的电子邮件域注册

Question

我正在尝试使用2种特定的用户类型（称为usertype1和usertype2 。

1. usertype1允许所有电子邮件域
2. usertype2仅特定的电子邮件域

在usertype2中，域列表：

• schoolA.com
• schoolB.com
• schoolC.com

这是我的代码：

 (function() { $("#email").attr('placeholder', 'Please put your student email'); $("#usertype").change(function() { if($("#usertype").val() == "usertype1") { $("#email").attr('placeholder', 'Please put your student email'); email = $("#email").split('@').slice(1); var domains = ['schoolA.com', 'schoolB.com', 'schoolC.com']; if ($.inArray(email, domains) ! == 1) { $(':input[type="submit"]').prop('disabled', false); } else { $(':input[type="submit"]').prop('disabled', true); } } else { $("#email").attr('placeholder', 'Please put your student email'); } }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <select name="school" id="usertype"> <option value="usertype1">School A</option> <option value="usertype2">School B</option> </select> <input type="text" id="email" /> <input type="submit" value="Submit" /> 

我尝试了我的代码，但是由于缺少参数或某些东西而无法使用。 任何想法如何解决这个问题？

Answer 1

代码段中有几个问题：

• 函数包装在()但从未执行过，这就是“未出现占位符”的原因-没有代码在运行。 建议：将函数包装在$()以便在加载页面后执行该函数。
• $("#email")没有方法split() 。 我认为这里应该是$("#email").val().split() 。
• .slice(1)返回一个不正确的数组。 要获取电子邮件的域名，这里应该是普通的[1] 。
• 检查userType的内部函数仅在更改#userty选择器时运行。 最好在初始化页面/更改#userty选择器/更改#email输入值时使其运行。
• jQuery选择器被过度使用。 最好一次使用选择器并将结果存储在变量中。 效率更高。

解决了这些问题后，就可以开始了。 这是一个有效的代码段：

 $(function() { var $email = $("#email"); var $userType = $("#usertype"); var $submitButton = $(':input[type="submit"]'); $email.attr('placeholder', 'Please put your student email'); $userType.change(checkUserType); $email.keyup(checkUserType); checkUserType(); function checkUserType() { if($userType.val() == "usertype1") { $email.attr('placeholder', 'Please put your student email'); var emailDomain = $email.val().split('@')[1]; var domains = ['schoolA.com', 'schoolB.com', 'schoolC.com']; if ($.inArray(emailDomain, domains) < 0) { $submitButton.prop('disabled', true); } else { $submitButton.prop('disabled', false); } } else { $email.attr('placeholder', 'Please put your student email'); $submitButton.prop('disabled', false); } } }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <select name="school" id="usertype"> <option value="usertype1">School A</option> <option value="usertype2">School B</option> </select> <input type="text" id="email" /> <input type="submit" value="Submit" /> 

还提供了一个jsfiddle供参考。