Question

在给定的代码中，我只想出于演示目的验证自定义的用户名和密码。如果自定义用户名和密码不匹配，则应显示错误：“用户名或密码错误。请输入正确的用户名和密码，然后重试。”

    RTPUDPv4TransmissionParams transparams;
    RTPSessionParams sessparams;

    sessparams.SetOwnTimestampUnit(1.0 / 10.0);

    sessparams.SetAcceptOwnPackets(true);
    transparams.SetPortbase(portbase);

    transparams.SetRTCPMultiplexing(true);

    status = sender.Create(sessparams, &transparams);
    checkerror(status);
    RTPIPv4Address addr(destip, destport, true);

    status = sender.AddDestination(addr);
    checkerror(status);

    std::string msg;

    for (i = 1; i <= num; i++)
    {
        printf("\nSending packet %d/%d\n", i, num);
        std::cout << "Enter message to be sent: ";
        std::getline(std::cin, msg);

        // send the packet
        status = sender.SendPacket((void *)msg.c_str(), msg.length(), 0, false, 10);
        checkerror(status);

        status = sess.Poll();
        checkerror(status);

        RTPTime::Wait(RTPTime(1, 0));
    }

Username: user@lc.com
Password: 12345

$(document).ready(function(e) {
  $('#btnValidate').click(function() {
    var sEmail = $('#username').val();
    if ($.trim(sEmail).length == 0) {
      $('.error-msg.username').show();
      e.preventDefault();
    }
    if (validateEmail(sEmail)) {
      $('.error-msg.username').hide();
    } else {
      $('.error-msg.username').show();
      e.preventDefault();
    }
  });
  
  $('#btnValidate').click(function() {
    if ($('#password').val().length === 0) { //if password field is empty           
      $('.error-msg.password').show();
    }
    if ($('#password').val().length) { //if password has value      
      $('.error-msg.password').hide();
    }
  });
});

function validateEmail(sEmail) {
  var filter = /^([\w-\.]+)@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.)|(([\w-]+\.)+))([a-zA-Z]{2,4}|[0-9]{1,3})(\]?)$/;
  if (filter.test(sEmail)) {
    return true;
  } else {
    return false;
  }
}

.form {
  padding: 50px 100px;
}

.error-msg {
  display: none;
  color: red;
}

JS Fiddle Demo

Answer 1

请为此更新您的代码。肯定会起作用

$(document).ready(function(e) {
    $('#btnValidate').click(function() {
            $('.error-msg.password').hide();
        $('.error-msg.username').hide();
        $('.error-msg.up-error').hide();
        $('.succ-msg').hide();
            var sEmail = $.trim($('#username').val());
        var password = $.trim($('#password').val());
            if ($.trim(sEmail).length == 0) { //if password field isempty 
          $('.error-msg.username').show();
        }else if($('#password').val().length === 0){
          if (validateEmail(sEmail)) {
                            $('.error-msg.password').show();
          }else{
            $('.error-msg.username').show();
          }

        }else{
            if(sEmail=='user@lc.com' && password=='12345'){
                            $('.succ-msg').show();
            }else{
             $('.error-msg.up-error').show();
            }
        }
    });
});

function validateEmail(sEmail) {
    var filter = /^([\w-\.]+)@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.)|(([\w-]+\.)+))([a-zA-Z]{2,4}|[0-9]{1,3})(\]?)$/;
    if (filter.test(sEmail)) {
        return true;
    }
    else {
        return false;
    }
}

CSS

.form {padding: 50px 100px;}
.error-msg {display: none; color: red;}
.succ-msg {display: none; color: green;}

HTML

<div class="form">
  <div class="error-msg username">
    Please enter your user ID in email format (name@domain.com).
  </div>
  <div class="error-msg password">
    Please enter your password.
  </div>
  <div class="error-msg up-error">
    Incorrect user ID or password. <br>
    Please type the correct user ID and password, and try again.
  </div>
  <div class="succ-msg">
    Valid login details
  </div>
  <div class="form-group">
    <label for="userName">USER NAME</label>
    <input type="text" class="form-control" id="username" name="username">
  </div>
  <div class="form-group">
    <label for="pwd">PASSWORD</label>
    <input type="password" class="form-control" id="password" name="password">
  </div>
  <button type="submit" id='btnValidate' class="btn btn-block btn-primary">SIGN IN</button>
</div>

Answer 2

只需将e.preventDefault();替换为return.false;，它就可以正常工作。

Answer 3

请查看以下示例代码，希望它对您有用。当我在JsFiddle

上解决问题时

$(document).ready(function(e) {
    $('#btnValidate').click(function() {
        var sEmail = $('#username').val();
        if ($.trim(sEmail).length === 0) {
            $('.error-msg.username').show();
            e.preventDefault();
        }
        if (validateEmail(sEmail)) {
            $('.error-msg.username').hide();
        }
        else {
            $('.error-msg.username').show();
            e.preventDefault();
        }
    });
    $('#btnValidate').click(function() {
        if ($('#password').val().length !== 0 && $('#password').val() === '12345') { //if password field
          $('.error-msg.password').hide();
        } else if ($('#password').val().length === 0) { //if password has value      
          $('.error-msg.password').show();
        } else if ($('#password').val().length !== '12345') {
        	$('.error-msg.up-error').show();
        }
    });
    
    
});

function validateEmail(sEmail) {
    var filter = /^([\w-\.]+)@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.)|(([\w-]+\.)+))([a-zA-Z]{2,4}|[0-9]{1,3})(\]?)$/;
    if (filter.test(sEmail)) {
        return true;
    }
    else {
        return false;
    }
}

.form {padding: 50px 100px;}
.error-msg {display: none; color: red;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="form">
  <div class="error-msg username">
    Please enter your user ID in email format (name@domain.com).
  </div>
  <div class="error-msg password">
    Please enter your password.
  </div>
  <div class="error-msg up-error">
    Incorrect user ID or password. <br>
    Please type the correct user ID and password, and try again.
  </div>
  <div class="form-group">
    <label for="userName">USER NAME</label>
    <input type="text" class="form-control" id="username" name="username">
  </div>
  <div class="form-group">
    <label for="pwd">PASSWORD</label>
    <input type="password" class="form-control" id="password" name="password">
  </div>
  <button type="submit" id='btnValidate' class="btn btn-block btn-primary">SIGN IN</button>
</div>

使用jQuery验证自定义用户名和密码

3 个答案: