Question

我正在尝试使用bootstrap模式开发一个简单的登录，但它无法正常工作，所以如果有任何帮助，我会非常感谢他们的善意。

我对JavaScript或Bootstrap知之甚少。

[root@SambaServer softwareRC]# cat 2017-03-11.log
-------- START  --------
-------- END  --------

function login(){
        
        var username=document.getElementsByName("username").value;
        var password=document.getElementsByName("password").value;
        if(username.value == null && password.value == null){
             $('.alert').show();
            
        }
         else{
       document.getElementById("wrongpassword").innerHTML="Thank u very much"; 
         }
    }

.alert{
  display:none;
}

强文

Answer 1

您的代码无法按预期运行有三个主要原因：

您将getElementsByName的返回值视为单个DOM元素，而不是元素集合。如果您想要返回集合的第一个元素，请在函数调用后添加索引属性访问[0]。
您为value和username元素多次访问password媒体资源。在创建变量时，您已经完成了一次;当您将它们包含在if声明中时，无需再次执行此操作。
您可能希望在!username || !password而非username == null && password == null时显示提醒，因为username和password将始终是字符串（因此永远不会{ {1}}）。您可以将它们与空字符串（null）进行比较，但将每个字符串转换为布尔值是实现相同目标的一种方法。

演示片段：

＆＃13;

username === '' || password === ''

＆＃13;

function login() {
  var username = document.getElementsByName("username")[0].value;
  var password = document.getElementsByName("password")[0].value;
  
  if (!username || !password) {
    $('.alert').show();
  } else {
    document.getElementById("wrongpassword").innerHTML = "Thank u very much";
  }
}

＆＃13;

.alert { display: none; }

＆＃13;

Answer 2

因为您正在访问.value属性两次：

    function login(){

         var username=document.getElementsByName("username");
         var password=document.getElementsByName("password");
         if(username.value == null && password.value == null){
              $('.alert').show();

         }
         else{
       document.getElementById("wrongpassword").innerHTML="Thank u very much"; 
          }
     }

这应该有效。

Answer 3

您将username和password设置为值：

    var username=document.getElementsByName("username").value;
    var password=document.getElementsByName("password").value;

所以你可以这样写：

    if(username == "" || password == ""){

不要使用null，只需与空字符串进行比较即可。我认为您的意思是||而不是&&。

Answer 4

你在函数中使用.value两次，所以它不起作用。你必须改变如下

function login(){

    var username=document.getElementsByName("username");
    var password=document.getElementsByName("password");
    if(username.value == null && password.value == null){
         $('.alert').css("display","block");

    }
     else{
   document.getElementById("wrongpassword").innerHTML="Thank u very much"; 
     }
}

如何使用bootstrap模式登录？

4 个答案:

演示片段：