jquery 如何检测是否在输入中输入了特定字符串(电子邮件域),以便在按钮中添加/删除属性/类

ijnw1ujt  于 2023-02-12  发布在  jQuery
关注(0)|答案(4)|浏览(80)

我知道如何从提交按钮中删除/添加类/属性,但我需要能够将此应用于基于输入的按钮。
场景是这样的,用户输入他们的电子邮件地址,但如果它在一个特定的域,例如:xxxx@troopers.gov然后我希望能够从提交按钮应用/删除类和属性,因为这是一个域,他们不应该进入注册。
我过去做过一些类似的验证,并尝试了jQuery .val()、indexOf等几种不同的方法,但似乎仍然无法使其工作。
我试过

var badDomain = 'troopers.gov';

然后

if (!$('#input').val() === badDomain) {
doStuff();
}

但似乎没什么效果。
我想我可以不使用RegEx就能做到这一点(我在这方面没有太多经验)
如果能考虑到case,那就太好了......我不介意解决方案是jQuery还是纯JS......出于学习的目的,如果能看到我如何用这两种方式来做,那就太好了......

d8tt03nd

d8tt03nd1#

这就是你想要的,把输入到字段中的任何内容都转换成小写,然后与一个给定的错误字符串数组进行比较,每当输入字段模糊时,它就会检查并打开或关闭提交。
查看一下代码,发现一些错误的地址,以供示例使用。

var badDomains = [
  "troppers.com",
  "fooBarBaz.org",
  "myReallyUselessDomainName.com",
  "a.net"
]
$(function(){
  $("#email").on("blur", function(){
    var addressBad = false;
    var thisEmail = $(this).val().toLowerCase();
    for (var i=0; i<badDomains.length; i++){
      if (thisEmail.includes(badDomains[i])){
        addressBad = true;
      }
    }
    if (addressBad) {
      console.log("bad address!")
      $(".disabledButton").attr('disabled', "disabled");
    } else {
      console.log("not a bad address!");
      $(".disabledButton").removeAttr("disabled");
    }
  })
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
  <label for="email">Email:</label>
  <input type="text" name="email" id="email" />
  <input class="disabledButton" type="submit" disabled />
</form>
50few1ms

50few1ms2#

简单解决方法:

var email = document.getElementById('email');
var checkEmail = document.getElementById('checkEmail');

checkEmail.onclick = function() {
	if ((email.value).includes('@troopers.gov')) alert('This email address cannot be used!');
}
<input id="email">
<button id="checkEmail">Check Email</button>

但是有多种方法。

pengsaosao

pengsaosao3#

您可以使用正则表达式来实现此目的。
超文本:

<input type="text" id="InputTest" />

<button id="TestBtn" type="button">
    Validate
</button>

<p>
    Valid
</p>

CSS:

.valid{
  background-color:green;
}

.invalid{
  background-color: red;
}

联森:

$("#TestBtn").on("click",function() {

var pattern = /\S+@troopers\.com/gi;

var str = $("#InputTest").val();

var arr = str.match(pattern);

alert(arr);  // just to see the value

if(arr !== null){
    $("p").addClass("invalid");
}
else{
    $("p").addClass("valid");
}

});

这是一个JSFiddle,基本上,如果用户在文本框中输入的内容与表达式..匹配,则背景颜色变为红色,但如果不匹配,则背景颜色变为绿色。
如果有帮助就告诉我。

z2acfund

z2acfund4#

您可以使用以下正则表达式作为相关Model的Email属性,以接受带有'abc.com'后缀的邮件:

[RegularExpression("^[a-zA-Z0-9_@./#&+-]+(\\.[a-zA-Z0-9_@./#&+-]+)*@abc.com$", 
    ErrorMessage = "Please enter an email with 'abc.com' suffix")]

相关问题