zoukankan      html  css  js  c++  java
  • Ionic ngMessage 表单验证

    出于不想写复杂的表单验证,找到了ngMessages,简单、粗暴、有效——只需要修改HTML模板。

    Ionic ngMessages

    1.安装

    bower install angular-messages --save
    

    2.添加到 Index.html

    <script src="lib/angular-messages/angular-messages.min.js"></script>
    

    3.模板中操作

    如Input

        <label class="item item-input">
          <span class="input-label">Title</span>
          <input id="slug" type="text" name="title" placeholder="Write here" ng-model="posts.title" required
                 ng-minlength="2" ng-maxlength="70">
        </label>
    

    限定了长度和必选,其实还应该有ng-messages,如:

      <div ng-messages="myForm.myField.$error" role="alert">
        <div ng-message="required">You did not enter a field</div>
        <div ng-message="minlength, maxlength">
          Your email must be between 5 and 100 characters long
        </div>
      </div>
    

    但是,我觉得个人用的博客没必要这样搞,于是直接往下了

       <button class="button button-block button-positive" ng-click="create(postsForm)" ng-disabled="postsForm.$invalid"
              type="submit">发送
      </button>
    

    如果表单无效,则发送按钮是不可点的。

  • 相关阅读:
    数据结构实现(四)二叉查找树java实现
    数据结构实现(三)二叉树
    git
    抓包原理
    数据结构实现(二)队列
    86. Partition List
    82. Remove Duplicates from Sorted List II
    83. Remove Duplicates from Sorted List
    排序算法总结
    上下文切换详解
  • 原文地址:https://www.cnblogs.com/adjk/p/6003340.html
Copyright © 2011-2022 走看看