Question

我正在尝试查看所有表单输入是否已填写并符合我的规范。在输入字段之间发生的每个'keyup'事件中，调用函数'checker'来验证输入。如果出现问题，则应禁用提交按钮。由于某种原因，按钮永远不会被禁用，因此我认为这是一个逻辑错误。

$('.confirm,.password,.username,.email').on('keyup', function(){
    if(!checker){
        $('.submit').prop('disabled', true);    
    }else{
        $('.submit').prop('disabled', false);   
    }
});


function checker(){
    if(!($('.username').length >= 2 && $('.username').length <= 12) || !( 
        isValidEmailAddress($('.email').val())) || !($('.password').length 
        >= 8 && $('.password').length <= 20 ) || !($('.confirm').length 
        >= 8 && $('.confirm').length <= 20) || !($('.password').val() === 
        $('.confirm').val()))
        {
            return False;
        }else{
            return True;
        }   
}

我设置的方式是，如果其中一个配对条件为真（$（'。username'）。length＆gt; = 2＆amp;＆amp; $（'。username'）。length＆lt; = 12），然后它将被转为false并且不会触发if语句返回false。如果出现问题，if语句应返回true。

Answer 1

两件小事：

您需要实际调用checker()。现在，您只需检查表达式中是否存在checker，而不是根据其返回值进行解析。
将True/False更改为true/false。 True/False未在JavaScript中定义。

真
    ReferenceError：未定义True

＆＃13;

$('.confirm,.password,.username,.email').on('keyup', function(){
    if(!checker()){
        $('.submit').prop('disabled', true);    
    }else{
        $('.submit').prop('disabled', false);   
    }
});


function checker(){
    if(!($('.username').length >= 2 && $('.username').length <= 12) || !( 
        isValidEmailAddress($('.email').val())) || !($('.password').length 
        >= 8 && $('.password').length <= 20 ) || !($('.confirm').length 
        >= 8 && $('.confirm').length <= 20) || !($('.password').val() === 
        $('.confirm').val()))
        {
            return false;
        } else {
            return true;
        }   
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input class="password"></input>
<input class="username"></input>
<input class="email"></input>
<button class="submit">submit<button>

＆＃13;

另外，这不是你如何在jQuery中检查输入的长度。你必须检查$('.password')[0].val().length。

您还应该看看这个https://css-tricks.com/the-difference-between-id-and-class/

Answer 2

getAsString ()说“如果标有getAsCString ()的框是假名，请运行此块”

您想要说“如果调用标有if(!checker)的框的结果为假，请运行此块。”

为此，我们需要调用checker：

checker

Answer 3

不要使用javascript验证表单。请改用约束验证。也不要禁用提交按钮。在表单无效的状态下单击它可以反馈表单的错误，如果禁用该按钮，则无法获取。

＆＃13;

<form>
  <input type="password" required minlength="8" maxlength="20" placeholder="password"><br>
  <!-- comfirm -->
  <input type="password" required minlength="8" maxlength="20" placeholder="repeat password"><br>
  <input type="email" placeholder="Email"><br>
  <input type="text" name="username" minlength="2" maxlength="12" placeholder="username"><br>
  <input type="submit">
</form>

＆＃13;

另外，为什么要在密码上设置maxlength？那只是愚蠢的。认为它在数据库中占用太多？你应该总是哈希它，然后它总是固定长度。

javascript表单验证按钮禁用

3 个答案: