Question

我尝试编写一个从输入中获取值并检查值的代码按钮单击时启动该功能，以及它如何工作并且不返回#res div

$( document ).ready(function() {
    $("button#RegisterB").click(function(){
        var UserName=$('#username').value();
        var PassWord=$('#password').value();
        var RPassWord=$('#repassword').value();
        var Email=$('#email').value();
        var phonenum=$('#phonenum').value()+$('#select').value();
        if((UserName=="")&&(PassWord=="")&&(RPassWord=="")&&(Email=="")&&(phonenum==""))
            $('#res').html("fill all");
        else { 
            if(PassWord!=RPassWord)
                $('#res').html("not match");
            if($.isNumeric(phone)==flase&&phonenum.length()!=10)
                $('#res').html("phone worng");
        }
    });
});

Answer 1

我猜你正在尝试评估用户输入。我建议单独评估字段，而不是复杂的if-else-if-else-elseif。

$(function(){
  $("button#RegisterB").click(function(){
    var error = '';

    if( $('#username').val().length == 0 ) { error += 'Fill in the username please<br />'; }
    if( $('#PassWord').val().length == 0 ) { error += 'Fill in the password please<br />'; }
    if( $('#RPassWord').val().length == 0 ) { error += 'Fill in the re-password please<br />'; }
    if( $('#PassWord').val() != $('#RPassWord').val() ) { error += 'The passwords do not match<br />'; }
    var phonenum=$('#phonenum').val()+$('#select').val();
    if( phonenum.length == 0 ) { error += 'Fill in the phonenumber please<br />'; }
    else if ( $.isNumeric(phone) == false or phonenum.length != 10 ) { error += 'The phonenumber is invalid<br />'; }

    if( error != '' ) {
        $('#res').html( error );
    }
    else {
        // everything okay!
    }

  });
});

请注意，您的代码中存在一些错误。

.length()不是函数，应该是.length
$.isNumeric(phone)==flase，错字flase应为false

Answer 2

#select select元素是否包含选项？此外，value()中没有jQuery，它只有val()。您在代码中定义phonenum，但在phone和$.isNumeric(phone)时使用flase != false，最后希望我没有错过任何其他内容，phonenum.length()应为phonenum.length，因为.length是对象的属性，而不是方法。

$(document).ready(function() {
  $("button#RegisterB").click(function() {
    var UserName = $('#username').val();
    var PassWord = $('#password').val();
    var RPassWord = $('#repassword').val();
    var Email = $('#email').val();
    var phonenum = $('#phonenum').val() + $('#select :selected').val();
    if ((UserName == "") && (PassWord == "") && (RPassWord == "") && (Email == "") && (phonenum == ""))
      $('#res').html("fill all");
    else {
      if (PassWord != RPassWord)
        $('#res').html("not match");
      if ($.isNumeric(phonenum) == false && phonenum.length != 10)
        $('#res').html("phone wrong");
    }
  });
});

input, select{
  display: block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<input type='text' id='username' name='username' placeholder='username'>
<input type='password' id='password' name='password' placeholder='password'>
<input type='password' id='repassword' name='repassword' placeholder='repassword'>
<input type='text' id='email' name='email' placeholder='email'>
<input type='text' id='phonenum' name='phonenum' placeholder='phonenum'>
<select id='select'>
  <option value='a'>a</option>
  <option value='b'>b</option>
  <option value='c'>c</option>
</select>
<button id='RegisterB' type='button'>Button</button>
</form>
<p id='res'></p>

Answer 3

首先让我们看看代码中的错误：

value()不是jQuery函数，而是使用val()。
var phonenum=$('#phonenum').value()+$('#select').value();，如果您不输入任何内容，变量phonenum将为undefined，这将导致第一个if测试始终为false
代码phone中的变量if($.isNumeric(phone)==flase&&phonenum.length()!=10)未定义，我猜它应该是phonenum
您在上面一行代码中的拼写错误flase，它是false
在这行代码中，length不是string的函数，它是一个属性，您需要将其称为phonenum.length

如果您打开浏览器控制台并再次运行代码，则可以重现它。

我添加了一些HTML代码段来测试固定的js，您可以根据自己的要求进行更改：

$( document ).ready(function() {
$("button#RegisterB").click(function(){
    var UserName=$('#username').val();
    var PassWord=$('#password').val();
    var RPassWord=$('#repassword').val();
    var Email=$('#email').val();
    var phonenum=$('#phonenum').val()+$('#select').val();
    console.log("phonenum is undefined here!!!")
    console.log(phonenum)
    if((UserName=="")&&(PassWord=="")&&(RPassWord=="")&&(Email=="")&&(phonenum=="")) {
    
        $('#res').html("fill all");}
    else { if(PassWord!=RPassWord)
            $('#res').html("not match");
            
            if($.isNumeric(phonenum) == false &&phonenum.length!=10)
                $('#res').html("phone worng");
        }
});
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
 Username: <input type="text" id="username" ><br>
 Password: <input type="password" id="password" ><br>
 Re password: <input type="repassword" id="password" ><br>
 Email: <input type="text" id="email" ><br>
 Phone Num: <input type="text" id="phonenum" ><br>
 Select: <input type="text" id="phonenum" ><br>
 <button id="RegisterB">click me</button><br>
 <span id="res">Res info<span>

</div>

Answer 4

$(document).ready(function() {
  $("button#RegisterB").click(function() {
    var UserName = $('#username').val();
    var PassWord = $('#password').val();
    var RPassWord = $('#repassword').val();
    var Email = $('#email').val();
    var phonenum = $('#phonenum').val();
    //alert(phonenum);
    var select  =$('#select').val();
    if ((UserName == "") || (PassWord == "") || (RPassWord == "") || (Email == "") || (phonenum == ""))
      $('#res').html("fill all");
    else if (PassWord != RPassWord)
    $('#res').html("not match");
    else if ($.isNumeric(phonenum) == false || phonenum.length != 10)
        $('#res').html("phone wrong");
      else
        $('#res').html("");
  });
});

input, select{
  display: block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<input type='text' id='username' name='username' placeholder='username'>
<input type='password' id='password' name='password' placeholder='password'>
<input type='password' id='repassword' name='repassword' placeholder='repassword'>
<input type='text' id='email' name='email' placeholder='email'>
<input type='text' id='phonenum' name='phonenum' placeholder='phonenum'>
<select id='select'>
  <option value='a'>a</option>
  <option value='b'>b</option>
  <option value='c'>c</option>
</select>
<button id='RegisterB' type='button'>Button</button>
</form>
<p id='res'></p>

尝试使用jquery

4 个答案: