仅在输入格式正确时才保存输入数据

时间:2016-11-11 19:38:08

标签: javascript html twitter-bootstrap

目前我有两个输入字段。一个用于约会,另一个用于时间。我想要做的是阻止保存这些字段的默认值,因为现在我能够实际保存占位符值,并且我希望能够保存某些东西,只有它是日期或小时。

这是我的HTML:

<div class="form-group">
        <label class="control-label col-sm-2" for="date" ">Date:</label>
        <div class="col-sm-2">
          <input type="date" class="form-control">
        </div>
      </div>

  <div class="form-group">
        <label class="control-label col-sm-2" for="text">Hour:</label>
        <div class="col-sm-2">
          <select class="form-control" id="time">
            <option value="Time" class="">Time</option>
                        <option value="10am" class="">10:00-10:30</option>
                        <option value="1030am" class="">10:30-11:00</option>
                        <option value="11am" class="">11:00-11:30</option>
                        </select>
        </div>
      </div>

请帮忙!

2 个答案:

答案 0 :(得分:1)

对于日期,只需使用类似这样的内容<input type="date"/>这是日期的输入。 当时,只需使用<input type="time"/>你猜对了;这是一个意味着时间的输入。

要测试您的日期是否有效,您可以使用

if ( Object.prototype.toString.call(d) === "[object Date]" )

我对正则表达式不太了解,但在<​​em> 4标题下有一个函数here。模块化checkTime()函数 似乎使用一个进行时间验证。

您可以在JS中执行所需的任何格式设置,但这将确保您获得有效的日期和时间。

答案 1 :(得分:1)

验证日期: 是不是默认值undefined?如果是这样,如果使用javascript未定义提交的值,则拒绝日期。更多信息here

验证时间: 你是想弄清楚他们是否选择了一个日期,小时是否包含两个半小时?这是我的理解。 首先,让他们选择不止一次:

<select class="form-control" id="time" multiple>

其次,使用javascript来解析在那里输入的值并检查只有两个,并且在一个日期的' - '之后的所有内容都与另一个日期的' - '相匹配。例如:

正确:

10:00- 10:30 10:30 -11:00

不正确:

10:00- 10:30 11:00 -11:30