Question

我有下一个表格：

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
function submit(form) {
        var first_pass = form.find('.first_try');
        var second_pass = form.find('.second_try');
        if (first_pass.value == second_pass.value) {
            return true
        }
        first_pass.value = '';
        second_pass.value = '';
        first_pass.attr('placeholder', 'Пароли не совпадают');
        first_pass.css('border-color', 'red');
        second_pass.css('border-color', 'red');
    
        return false
    }
</script>
<form role="form" method="post" onsubmit="return submit($('#PasswordChange form'))">
    <h3>Редактирование пользователя</h3>
    <div class="form-group">
        <input type="password" class="form-control first_try" name="password"
               placeholder="Новый пароль"
               required>
    </div>
    <div class="form-group">
        <input type="password" class="form-control second_try" name="password"
               placeholder="Повтор пароля"
               required>
    </div>
   
    <input type="submit" name="submit" class="btn btn-primary pull-right" value="Отправить"></input>

</form>

＆＃13;

此脚本检查密码是否相同。

但是使用firefox调试器我无法发现它进入这种方法。

这是脚本的问题吗？或者是否有关于声明onsubmit处理程序的问题？

Answer 1

存在很多问题：

将value更改为val
使用其他名称作为提交功能，它有点保留
使用this代替$('#PasswordChange form')
使用var first_pass = $('.first_try');代替find
你忘了写else
您需要使用event.preventDefault();停止刷新页面或提交页面。

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
function save(form) {
        var first_pass = form.querySelector('.first_try');
        var second_pass = form.querySelector('.second_try');
        if (first_pass.value == second_pass.value) {
            alert('its ok');
            return true;
        } else {
        first_pass.value = '';
        second_pass.value = '';
        first_pass.placeholder = 'Пароли не совпадают';
        first_pass.style.borderColor='red'; 
        second_pass.style.borderColor='red'; 
    
        return false
    }
    }
</script>
<form role="form" method="post" onsubmit="event.preventDefault(); return save(this)">
    <h3>Редактирование пользователя</h3>
    <div class="form-group">
        <input type="password" class="form-control first_try" name="password"
               placeholder="Новый пароль"
               required>
    </div>
    <div class="form-group">
        <input type="password" class="form-control second_try" name="password"
               placeholder="Повтор пароля"
               required>
    </div>
   
    <input type="submit" name="submit" class="btn btn-primary pull-right" value="Отправить"/>

</form>

＆＃13;

Answer 2

使用此功能：

onsubmit="return submit(this)"

Answer 3

请更改提交功能名称，因为它是关键字，所以不使用它。同时删除提交按钮旁边的</input>

Answer 4

使用此代码

<!DOCTYPE html>
<html>

<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script type="text/javascript">
    function submitData(form) {
      var first_pass = form.find('.first_try');
      var second_pass = form.find('.second_try');
      if (first_pass.value == second_pass.value) {
        return true
      }
      first_pass.value = '';
      second_pass.value = '';
      first_pass.attr('placeholder', 'Пароли не совпадают');
      first_pass.css('border-color', 'red');
      second_pass.css('border-color', 'red');
      return false
    }
  </script>
</head>

<body>
  <form role="form" method="post" onsubmit="return submitData($('#PasswordChange form'))">
    <h3>Редактирование пользователя</h3>
    <div class="form-group"> <input type="password" class="form-control first_try" name="password" placeholder="Новый пароль" required></div>
    <div class="form-group"> <input type="password" class="form-control second_try" name="password" placeholder="Повтор пароля" required></div><input type="submit" name="submit" class="btn btn-primary pull-right" value="Отправить"></form>
</body>

</html>

Answer 5

如果您不需要取消提交操作，则不应返回任何内容。您还可以使用jQuery $("form").submit(function(e) { var passwords = $('[name=password]'); if (passwords.eq(0).val() !== passwords.eq(1).val()) { alert("Пароли не совпадают!"); return false; } });方法的提交表单事件处理程序，而不是<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <form role="form" method="post" action="/"> <h3>Редактирование пользователя</h3> <div class="form-group"> <input type="password" class="form-control first_try" name="password" placeholder="Новый пароль" required > </div> <div class="form-group"> <input type="password" class="form-control second_try" name="password" placeholder="Повтор пароля" required /> </div> <input type="submit" name="submit" class="btn btn-primary pull-right" value="Отправить" /> </form>属性中的hanler定义。

＆＃13;

h1.display-2 {
    font-family: tahoma;
}

＆＃13;

{{1}}

＆＃13;

另外，我建议您使用Bootstrap验证状态而不是输入的边框样式设置。

表单中的提交不会被调用

5 个答案: