当我尝试检查边框是否相同时，功能不起作用

Question

我让系统检查用户名是否可用，如果没有，它使"username"输入的边框1px实心红色，但如果它可用更改为1px实心绿色。它的工作原理!我也对电子邮件和密码匹配和其他做了同样的事情……但我也想检查用户是否纠正了他们的错误，当他们点击提交按钮。所以我写了一个函数

function checkRegisterErrors() {
    if( $('#register_username').css('border')=='1px solid red') {
        return false;
    } 
}

，但它不起作用。我还添加了一个属性"onclick"在我的提交和检查…如果我只是改变我的函数内容alert();点击按钮效果很好

Answer 1

也许你应该使用一个类来知道一个元素是处于一个状态还是另一个状态。是比阅读css属性更可靠的做法。

.selected{
    border-bottom: 1px solid red;
}

然后在HTML 中

<input id="name" class="selected" />

和javascript中的

if( $("#name").hasClass("selected")){
    ... do something;
}

Answer 2

虽然你可以检查css样式来执行验证，但它的方法非常不可靠，因为你要检查字符串和css样式在浏览器中有不同的变体。更可靠的方法是使用类、视图模型或数据属性来确定字段的有效性。

var model = {
  username:'',
  usernameAvailable: false
};
$('#myusernameinput').on('change', function(){
   if(checkUserNameIsAvailable()){
     model.usernameAvailable = true;
   }
   else{
     model.usernameAvailable = false;
   }
});

然后

function checkRegisterErrors() {
  if(!model.usernameAvailable) {
    return false;
  } 
}

或者你可以使用data- attributes

$('#myusernameinput').on('change', function(){
  if(checkUserNameIsAvailable()){
     $(this).attr('data-userNameAvailable', 'false');
  }
  else{
    $(this).attr('data-userNameAvailable', 'true');
  }
});

然后

function checkRegisterErrors() {
   if($('#register_username').attr('data-userNameAvailable')== 'false') {
      return false;
   } 
}