Question

制作了一个脚本，用于检查：$("#password")是否有9个符号以及$("#password") = $("#confirm_password")。

问题是当我尝试启用＆＃34;提交＆＃34;按钮...＆＃34;函数submitButton（）＆＃34;

有什么问题

$("form span").hide();
$('input[type="submit"]').attr("disabled", "true");

var samePass = false;
var eight = false;

var $password01 = $("#password");
var $password02 = $("#confirm_password")

//Why this function doesn't work?
function submitButton() {
  if (samePass && eight){
    $('input[type="submit"]').removeAttr('disabled');
  };
};

//Checks if the pass has 8 symbles
function passwordEvent() {
  if ($password01.val().length > 8) { 
    eight = true;
    $password01.next().hide().submitButton();

  } else {
    $password01.next().show();
  };
};

//Checks if the two passwards are the same
function passwordCheck() {
  if($password02.val() !== $password01.val()) {
    $password02.next().show();
  } else {
    samePass = true;
    $password02.next().hide().submitButton();

  };
};



$password01.focus(passwordEvent).keyup(passwordEvent).focus(passwordCheck).keyup(passwordCheck);
$password02.focus(passwordCheck).keyup(passwordCheck);

＆＃13;

$("form span").hide();
$('input[type="submit"]').attr("disabled", "true");

var samePass = false;
var eight = false;

var $password01 = $("#password");
var $password02 = $("#confirm_password")

//Why this function doesn't work?
function submitButton() {
  if (samePass && eight){
    $('input[type="submit"]').removeAttr('disabled');
  };
};

//Checks if the pass has 8 symbles
function passwordEvent() {
  if ($password01.val().length > 8) { 
    eight = true;
    $password01.next().hide().submitButton();

  } else {
    $password01.next().show();
  };
};

//Checks if the two passwards are the same
function passwordCheck() {
  if($password02.val() !== $password01.val()) {
    $password02.next().show();
  } else {
    samePass = true;
    $password02.next().hide().submitButton();

  };
};



$password01.focus(passwordEvent).keyup(passwordEvent).focus(passwordCheck).keyup(passwordCheck);
$password02.focus(passwordCheck).keyup(passwordCheck);

＆＃13;

body {
  background: #384047;
  font-family: sans-serif;
  font-size: 10px
}

form {
  background: #fff;
  border-radius: 10px;
  padding: 4em 4em 2em;
  box-shadow: 0 0 1em #222;
  
  max-width: 400px;
  margin: 100px auto;
}

p {
  margin: 0 0 3em 0;
  position: relative;
}

label {
  font-size: 1.6em;
  font-weight:600;
  color: #333;
  
  display: block;
  margin: 0 0 .5em;
}

input {
  display: block;
  height: 40px;
  width: 100%;
  box-sizing: border-box;
  outline: none
}

input[type="text"], 
input[type="password"] {
  background: #f5f5f5;
  border: 1px solid #F0F0F0;
  border-radius: 5px;
  
  font-size: 1.6em;
  padding: 1em 0.5em;
}

input[type="text"]:focus, 
input[type="password"]:focus {
  background: #fff
}

span {
  border-radius: 5px;
  padding: 7px 10px;
  background: #2F558E;
  color: #fff;
  
  width: 160px;
  display: block; /* Needed for the width to work */
  
  text-align: center; /* For the inner text */
  
  position: absolute;
  left: 105%;
  top: 25px;
}

span:after {
  content: " ";
  
  position: absolute;
/*  pointer-events: none;*/
  right: 100%;
  top: 50%;
/*
  height: 0;
  width: 0;
*/
  
  border: solid transparent;
/*  border-color: rgba(136, 183, 213, 0);*/
  border-right-color: #2F558E;
  border-width: 8px;
  margin-top: -8px;
}

.enableSub {
  background: #0099FF;
  border: none;
  border-radius: 5px;
  color: white;
  height: 50px;
  box-shadow: 0 3px 0 0 #005C99;
}

.disableSub {
  background: #AEAEAE;
  border: none;
  border-radius: 5px;
  color: white;
  height: 50px;
  }

＆＃13;

<!DOCTYPE html>
<html>
<head>
	<title>Sign Up Form</title>
	<link rel="stylesheet" href="css/style.css" type="text/css" media="screen" title="no title" charset="utf-8">
</head>
<body>

	<form action="#" method="post">
		<p>
			<label for="username">Username</label>
			<input id="username" name="username" type="text">
		</p>
		<p>
			<label for="password">Password</label>
			<input id="password" name="password" type="password">
			<span>Enter a password longer than 8 characters</span>
		</p>
		<p>
			<label for="confirm_password">Confirm Password</label>
			<input id="confirm_password" name="confirm_password" type="password">
			<span>Please confirm your password</span>
		</p>
		<p>
			<input type="submit" class="disableSub" value="SUBMIT">
		</p>
	</form>
	<script src="http://code.jquery.com/jquery-1.11.0.min.js" type="text/javascript" charset="utf-8"></script>
	<script src="js/app.js" type="text/javascript" charset="utf-8"></script>
</body>
</html>

＆＃13;

Answer 1

$password01.next().hide().submitButton();

等。不会工作。你需要这样做;

$password01.next().hide();
submitButton();

您已将submitButton声明为函数，而不是jQuery对象上的方法，因此您需要将其称为。</ p>

＆＃34; undefined不是一个功能＆＃34;错误最初看起来很神秘，但一旦理解就会变得清晰。

由于从hide()返回的jQuery对象没有submitButton属性（或方法），hide().submitButton会返回undefined。您之后尝试将其称为函数（使用()），因此JavaScript会告诉您undefined不是函数。

除了上述内容之外，您的逻辑也存在缺陷。即，您点击samePass字段时，password1被设置为true（因为，在焦点上，当它们都为空白时，$password02.val() === $password01.val()）。这意味着只要password是＆gt; 8个字符，两个条件都匹配，您的提交将被启用。

要解决此问题，您可能应该在不符合其条件时将samePass和eight设置为false，并致电submitButton()在所有情况下都要更新状态

//Why this function doesn't work?
    function submitButton() {
        if (samePass && eight) {
            $('input[type="submit"]').removeAttr('disabled');
        } else {
            $('input[type="submit"]').attr('disabled', "true");
        }
    };

//Checks if the pass has 8 symbles
function passwordEvent() {
    if ($password01.val().length > 8) {
        eight = true;
        $password01.next().hide();
        submitButton();
    } else {
        eight = false;
        $password01.next().show();
        submitButton();
    };
};

//Checks if the two passwards are the same
function passwordCheck() {
    if ($password02.val() !== $password01.val()) {
        samePass = false;
        $password02.next().show();
        submitButton();
    } else {
        samePass = true;
        $password02.next().hide();
        submitButton();
    };
};

......然后起作用; http://jsfiddle.net/9qqnqLxm/

函数错误：未捕获TypeError：undefined不是函数

1 个答案: