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>

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

时间: 2024-08-29 18:37:01

Ionic ngMessage 表单验证的相关文章

Angular表单验证

在使用 AngularJS 进行开发的时候,表单填写是一个很常见的需求,而表单验证又是比较让人头疼的部分,本文对此做一个总结. 在 Angular 的视图中使用的 form 已经不是 HTML 中的普通 form 了,而是一个被 Angular 封装过的指令.它可以完成普通 form 无法实现的功能,比如 form 嵌套,而且自带强大的验证功能. Angular 在对表单进行校验的时候会使用 ngModelController 上的属性,如果不设置 ng-model,则 Angular 无法知道

AngularJS使用ngMessages进行表单验证

本文转载(已经找不到原作者...) 名称为"ngMessages"的module,通过npm install angular-messages进行安装.在没有使用ngMessages之前,我们可能这样写验证: <form name="userForm"> <input type="text" name="username" ng-model="user.username" ng-minle

表单验证续&lt;AngularJs&gt;

前一篇文章说过,ng1.3+以后对于表单验证有了优化,它不再需要一个详细的表达式状态创建元素显示或隐藏. 例如:我们在ng1.3之前的版本都需要如下写法: <div class="error" ng-show="signup_form.name.$dirty && signup_form.name. $invalid && signup_form.submitted"> ng1.3之后新增了一个ngMessages指令,他

angular之表单验证ngMessages

刚接触angular1.x很多经常用到的ngMessages的地方,这里顺便记一下,效果如下图: 如果引用了angular-messages.js报如下错误,说明你的angular.js和angular-messages.js版本不匹配,需要找到能用的版本. 可在这里在线测试各个版本https://docs.angularjs.org/api/ngMessages 引入版本匹配的angular-mseeages.js后,接下来开始使用它提供的表单验证提示吧... 最简单的就是将提示内容直接写在当

python :表单验证--对每一个输入框进行验证

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta charset="UTF-8"/> <title>Title</title> <style> .error{ color

jquery插件,表单验证validation plugin的使用

笔记: 一.首先引入插件 <script type="text/javascript" src="js/jquery-1.10.0.js" ></script> <script type="text/javascript" src="js/jquery.validate-1.13.1.js" ></script> 列子:一个简单的登录表单验证 1 <form id=&quo

AngularJs 表单验证

看到一些博客说这个框架要过时了,但是还是学习了下,觉的很方便的一个框架,有空的同学可以看看,适合我们入门看,比较基础. 对于日常的开发来说,最常见的开发场景就是通过表单编辑数据,这里涉及的问题就是验证问题. angularjs 内置已经支持了常见的验证方式,可以轻松实现表单验证. 1. 绑定 为了方便,我们在 $scope 上下文对象上创建一个 model 来表示我们编辑的内容. $scope.model = { id : 8, name: "alice", email: "

表单验证&amp;lt;AngularJs&amp;gt;

经常使用的表单验证指令 1. 必填项验证 某个表单输入是否已填写,仅仅要在输入字段元素上加入HTML5标记required就可以: <input type="text" required />   2. 最小长度 验证表单输入的文本长度是否大于某个最小值,在输入字段上使用指令ng-minleng= "{number}": <input type="text" ng-minlength="5" /> 3.

AngularJS复习------表单验证

在AngularJS中能够将HTML5表单验证功能同自己的验证指令结合起来使用,这里介绍使用的核心功能. 使用表单验证,首先要确保表单的每个控件都有name属性 如果想要屏蔽浏览器对表单的默认验证行为,可以在表单元素上添加novalidate标记. 必填项:只需要在输入字段元素上添加HTML5标记 required即可 最小长度:在输入字段上使用AngularJS指令ng-minlength="{number}" 最大长度:在输入字段上使用AngularJS指令ng-maxlength