Question

我使用jQuery非常新，但我知道它将是我需要的最佳应用程序。我构建了一个小表单，其中包含一个输入文本框，要求输入邮政编码。表单工作正常，但我想确保该字段有值，并且它是特定格式（邮政编码）。如果没有，我想停止SUBMIT的跟踪，并更改文本框类。

<form action="url" class="form-inline" method="post" accept-charset="utf-8">
    <label for="zipcode">Zipcode</label>
    <input type="text" name="zipcode" value="" maxlength="5" placeholder="" class="form-control">
    <button type="submit" class="btn btn-primary btn-xs">Search</button>
</form>

我不想使用jQuery提交表单，我只想在表单提交到ACTION之前验证

Answer 1

首先，在验证之前禁用表单提交的最简单方法是将disabled属性添加到按钮，并仅在验证通过后将其删除。如果您使用此路线，则可以在输入字段上使用keyup事件侦听器来检查验证并相应地启用提交按钮。至于验证，如果您只对美国邮政编码感兴趣，那么要测试的简单正则表达式应该没问题。

const $zipInput = $('input[name=zipcode]')
const $submit = $('button[type=submit]')

function validate(input) {
  const value = input.currentTarget.value
  const regex = /[0-9]{5}/;
  
  if (!regex.test(value)) {
    $submit.prop('disabled', true)
  } else {
    $submit.prop('disabled', false)
  } 
}

$zipInput.on('keyup', function(input) {
  const value = input.currentTarget.value
  
  if (value.length > 4) {
    validate(input)
  } else {
    $submit.prop('disabled', true)
  }
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="url" class="form-inline" method="post" accept-charset="utf-8">
    <label for="zipcode">Zipcode</label>
    <input type="text" name="zipcode" value="" maxlength="5" placeholder="" class="form-control">
    <button disabled type="submit" class="btn btn-primary btn-xs">Search</button>
</form>

Answer 2

您好根据国家/地区的邮政编码更改，如果您使用的是jquery验证插件，请添加此方法是完整的

InsecureRequestWarning

如果textfield为空或不是zip，则jQuery停止表单提交

2 个答案: