• 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:表单没有填写记录;

  • 相关阅读:
    vue 插件的使用 todolist案例
    vue 传值 混入mixin
    vue 生命周期函数
    vue 指令总结
    vue 其它的指令
    vue 监听数据变化的原理 表单数据的收集
    vue for循环中的key
    vue 学习
    vue 学习
    HDU 1029
  • 原文地址:https://www.cnblogs.com/hqutcy/p/6100396.html
Copyright © 2020-2023  润新知