zoukankan      html  css  js  c++  java
  • AngularJS学习之输入验证

    1.AngularJS可以验证表单和控件可以验证输入的数据;

    2.输入验证:客户端不能确保用户输入数据的安全,所以服务器端的数据验证也是必须的;

    3.应用实例:

    <! DOCTYPE html>

    <html>

    <script src=http://apps.bding.com/libs/angular.js/1.4.6/angular.min.js></script>

    <body>

    <h2>Validation Example</h2>

    <form ng-app="myApp" ng-controller="validateCtrl" name="myForm" novalidate>      

    <p>用户名:<br>

      <input type="text" name="user" ng-model="user" required>          //ng-model指令用于绑定输入元素到模型中

      <span style="color:red" ng-show="myForm.user.$dirty && myForm.user.$invalid">

      <span ng-show="myForm.user.$error.required">用户名是必须的</span></span>

    </p>

    <p>邮箱:<br>

      <input type="email" name="email" ng-model="email" required>           //模型有两个属性:user和email

      <span style="color:red" ng-show="myForm.email.$dirty && myForm.email.$invalid">

      <span ng-show="myForm.email.$error.required">邮箱是必须的。</span>

      <span ng-show="myForm.email.$error.email">非法的邮箱</span>

      </span>

    </p>

    <p>

      <input type="submit"

       ng-disabled="myForm.user.$dirty && myForm.uer.$invalid || myForm.email.$dirty && myForm.email.$invalid">

    </p>

    </form>

    <script>

    var app=angular.module('myApp',[]);

    app.controller('validateCtrl',function($scope){

      $scope.user='John Doe';

      $scope.email='john.doe@gmail.com';

    });

    </script>

    </body>

    </html>

    4.验证属性:

    **$dirty:表单有填写记录;

    **$valid:字段内容合法的;

    **$invalid:字段内容是非法的;

    **$pristine:表单没有填写记录;

  • 相关阅读:
    js(四) 全选/全不选和反选
    js(三) ajax异步局部刷新技术底层代码实现
    js(二) 实现省市联动(json)
    接口
    内部类
    封装
    Static关键字
    this关键字
    带参数的方法
    abstract关键字
  • 原文地址:https://www.cnblogs.com/hqutcy/p/6100396.html
Copyright © 2011-2022 走看看