使用Angularjs和Bootstrape datepicker进行StartDate EndDate验证

时间:2016-07-21 09:14:20

标签: javascript angularjs html5 angular-ui-bootstrap bootstrap-datepicker

这是我的HTML

 <form name="myForm">
         <div class="row">
          <div class="col-md-2">
            <input data-ng-model="Data.StartDate" type="text" id="startDate"   name="startDate"
            class="form-control" data-datepicker-popup="MM-dd-yyyy" data-datepicker-append-to-body="true"
            data-is-open="popup.fromOpened" data-ng-click="fromOpen()" placeholder="Start Date" data-ng-required="true" />
        </div>
        <div class="col-md-2">
          <input data-ng-model="Data.EndDate" type="text" id="endDate" name="endDate"
            class="form-control" data-datepicker-popup="MM-dd-yyyy" data-datepicker-append-to-body="true"
            data-is-open="popup.toOpened" data-ng-click="toOpen()" placeholder="End Date" data-ng-required="true" />
        </div>
        <div class="col-md-2">
          <button data-ng-click="Search()" class="btn btn-info">Search</button>
        </div>
      </div>
      <div class="row">
        <span>Error list</span>
      </div>
    </form>

角度代码是这样的。

 $scope.$watch('Data.StartDate', validateDates);
$scope.$watch('Data.EndDate', validateDates);

function validateDates() {
//      some code and highlight it on form
}

我想在页面中为日期添加一些不错的验证。任何帮助将不胜感激.. 提前致谢

2 个答案:

答案 0 :(得分:0)

只需在html输入标记中写入type =“date”即可。

答案 1 :(得分:0)

您通过&#39; $ watch&#39;作为示例编写的代码非常不受支持且难以维护。如果要添加新字段,您只需要制作一个500+的控制器。

我建议你创建:

  1. ValidationFactory将包含所有类型的验证方法;
  2. FIELDS_CONFIG您要存储{fieldName: 'string', validationErrorMessage: 'string', fieldType: 'string', validateIf: 'function', value: {} //path to another factory, where field origin value stored};
  3. 的对象
  4. 仅在专用formdiv等处以及您将提供给它的$watch整个模型上执行验证的指令;
  5. 将所有属性移动到专用的form模型对象。
  6. 因此,一旦model中的某些内容发生变化,指令将根据ValidationFactoryfieldType执行验证方法,该方法将使用value传递给taht方法。验证结果将存储在ValidationFactory.errors = {},密钥为fieldName,以便轻松访问错误以显示validationErrorMessage

    以某种方式反模式的简单方法是:

    对要验证的每个字段的

    ng-change指令。 ng-change将接受ValidationFactory.validateDate(value, message)。所有错误都应存储在ValidationFactory.errors = [],以便具有从父控制器等检查ValidationFactory.isAnyErrors()的访问点。