我需要验证 3030 和 3340 之间的邮政编码输入

Question

我正在制作一个表格供客户快速查看该企业是否为他们所在地区提供服务。我需要输入来验证从 3030 到 3340 的输入邮政编码。

如果为真，则会出现一个弹出对话框，确认服务和联系触发器。如果为 false，则会出现一个对话框，通知客户他们所在的区域目前没有商家提供服务。

我知道我还没有创建 .poscode-valid 或 .postcode-invalid。我也不想要选择箭头，所以删除它们的修复会很好。感谢您的帮助。

// // ********************************************************************************
// // This script checks to see if the postcode matched the excepted field and returns
// // a dialog box accordingly 
// // ********************************************************************************
// this script need to evaluate the input against input numbers >=3030 && <=3340.
jQuery(document).ready(function($) {
      $('.postcode_form').validate({
        rules: {
          range: [3030, 3340]
        }
        if (range = true) {
          $('.postcode_form').addClass('.postcode_valid')
        } else {
          $('.postcode_form').addClass('.postcode_invalid')
        }
      });

body {
  margin: 0;
  padding: 0;
}
#service_area {
  background: #245353;
  background-size: cover;
  height: 100vh;
}
.service_area_container {
  max-width: 800px;
  position: relative;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}
.area h1 {
  text-align: center;
  font-size: 2.5em;
  text-transform: uppercase;
  margin: 0;
}
.area h5 {
  margin: 0 2em 2em 2em;
  text-align: center;
  font-size: 1em;
  letter-spacing: 0.0385em;
  font-weight: 100;
  text-transform: uppercase;
}
.area_input {
  width: 184px;
  margin: 0 auto;
}
input.your_postcode {
  width: 70px;
  margin: 0 -6px 0 0;
  padding: 14px 17px 12px 17px;
  border: none;
  letter-spacing: 0.0585em;
  z-index: 1;
}
.area_input .submit {
  padding: 14px 17px 12px 17px;
  text-transform: uppercase;
  letter-spacing: 0.0356em;
  font-weight: 100;
  z-index: 3;
  margin: 0;
  border: none;
}

<section id="service_area" class="scrolling-bg bg-3">
  <div class="service_area_container area">
    <h1>Where's the job?</h1>

    <h5>Enter your <span class="high_light">postcode</span> below to see if we <span class="high_light">service</span> the <span class="high_light">area</span></h5>

    <div class="area_input">
      <form class="postcode_form">
        <input type="number" id="your_postcode" class="your_postcode" name="postcode" placeholder="Postcode">
        <input type="submit" class="submit" value="Submit">
        <div class="loading"></div>
      </form>
    </div>
    <!-- .area_input -->
  </div>
  <!-- .service_area_container -->
</section>
<!-- #service_area -->

你可以在这里看到我到目前为止的代码：http://jsfiddle.net/paralellos/6fr1chqo/

Answer 1

我会给一个的 "removal of the arrows" 位的可能性，尽管它有点混乱。

如果您将输入类型设置为 text 而不是 number，箭头将消失。

麻烦的是，您现在必须进行额外验证以确保输入的数据完全是数字，例如：

rules: {
    postcode: {
        number: true,
        range: [3030, 3340]
    }
}

Answer 2

关于your jsFiddle...

缺少 jQuery 本身。
缺少 jQuery 验证插件。

在rules选项里面，你忘了声明字段的name。

rules: {
    postcode: { // <- NAME of the input
        range: [3030, 3340]
    }
}

您忘记使用 });
您通过在 .validate() 方法中放置 if 语句破坏了插件。 The .validate() method only accepts an object literal, this is comprised of a comma separated list of key: value pairs enclosed by braces, as defined by the plugin's author，没有别的。
我添加了一个 required: true 以使该字段成为必填项。
将 type="number" 更改为 type="text" 以删除 input 元素上的 up/down 箭头。不允许用户输入非数字字符，因为 range 规则正在查找数字，否则会触发错误。

你的固定DEMO：http://jsfiddle.net/6fr1chqo/3/

If it is true then a pop-up dialog box will appear with confirmation of service and contact triggers. If false then a dialog appears informing the customer that their area is not currently serviced by the business.

jQuery 验证插件与弹出消息或对话框无关。该插件仅在每个输入元素之后立即插入错误消息的文本。弹出窗口的任何样式或集成都由您决定。但是，我推荐一个 jQuery 弹出窗口插件，因为它并不像看起来那么简单。

如果您希望在未错误且字段通过验证时显示消息，则必须使用 success 回调函数。

success: function(label) {
    label.addClass("valid").text("Area Serviced")
},

要在字段无效时说 "Area NOT serviced" 而不是通用消息，请使用 messages 选项...

messages: {
    postcode: {
        required: "enter a Postcode",
        range: "Area NOT serviced"
    }
},

已更新演示：http://jsfiddle.net/6fr1chqo/4/

A generic example that integrates the ToolTipster plugin with jQuery Validate.

我需要验证 3030 和 3340 之间的邮政编码输入

I need to validate a postcode input between 3030 and 3340

jquery

jquery-validate