聚合1.0验证两个输入[type=date]

Polymer1.0 validation of two input[type=date]

本文关键字：输入 type date 两个 验证 聚合      更新时间：2023-09-26

我开始使用聚合物，找不到很多问题的答案。

我有两个输入

<paper-input id="startDate" type="date" 
    error-message="The end date is before the start date"></paper-input>
<paper-input id="endDate" type="date"></paper-input>

当两者都为空或只填写了一个时，表单有效。如果两者都被填满，则需要验证endDate大于或等于startDate。怎么做呢?

如果您是新手，那么请阅读开发人员指南，在那里您可以找到大多数问题的答案。

在您的示例中，您需要声明带有纸张输入值的属性，并观察其变化。https://www.polymer-project.org/1.0/docs/devguide/properties.html change-callbacks。在该观察者中，您可以编写逻辑并将任何(或两个)字段设置为无效。

<dom-module id="my-form">
<template>
<paper-input id="startDate" type="date" value="{{startDate}}" error-message="The end date is before the start date"></paper-input>
<paper-input id="endDate" type="date" value="{{endDate}}"></paper-input>
</template>
<script>
(function() {
'use strict';
Polymer({
  is: 'my-form',
  properties: {
    startDate: Date,
    endDate: Date,
  },
  observers: ['_dateChange(startDate, endDate)'],
  _dateChange: function(startDate, endDate) {
     if(/*logic goes here*/) {
       this.$.startDate.invalid = true;
     } else {
       this.$.startDate.invalid = false;
     }
  }      
});
})();
</script>
</dom-module>
相关文章：