AngularJS:URLのバリデートチェック

goto_jp 349views 更新:2014年4月28日

サンプルはこちら。
http://codepen.io/KazuyoshiGoto/pen/pBbcm

HTML

<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.0.2/angular.min.js"></script>
<body ng-app>
  <div ng-controller="mainCtrl">
    <form novalidate name="myForm" ng-submit="submitForm()">
      <input type="url" name="url" ng-model="user.url" placeholder="URL" />
      <span ng-show="myForm.url.$error.url">「http」から始まるURLを記入してください。</span>
    </form> 
    <pre>{{user|json}}</pre>
  </div>
</body>

特にAngularJS用のプロパティを入れることなく、inputタグのtypeに対応したバリデートを行ってくれます。

ログイン / 新規登録してコメントする

このソースコードをストックして後で利用したり、作業に利用したソースコードをまとめることができます。

こちらもお役に立つかもしれません