zoukankan      html  css  js  c++  java
  • 【15】AngularJS 输入验证

    AngularJS 输入验证


    AngularJS 表单和控件可以验证输入的数据。


    输入验证

    AngularJS 表单和控件可以提供验证功能,并对用户输入的非法数据进行警告。

     

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

    应用代码

    1. <!DOCTYPE html>
    2. <html lang="zh-cn">
    3. <head>
    4. <meta charset="utf-8">
    5. <meta name="renderer" content="webkit">
    6. <!--360,以webkit内核进行渲染-->
    7. <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
    8. <!--以最新内核进行渲染。-->
    9. <meta http-equiv="Cache-Control" content="no-siteapp"/>
    10. <!--百度禁止转码-->
    11. <title>moyu demo</title>
    12. <meta name="keywords" content="demo 测试 魔芋">
    13. <meta name="description" content="魔芋的测试示例">
    14. <meta name="robots" content="index,follow">
    15. <!--定义网页搜索引擎索引方式-->
    16. <meta name="viewport" content="width=device-width, initial-scale=1.0">
    17. <script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script>
    18. <script src="http://apps.bdimg.com/libs/angular.js/1.3.9/angular.min.js"></script>
    19. <style>
    20. </style>
    21. </head>
    22. <body>
    23. <h2>ValidationExample</h2>
    24. <form ng-app="myApp" ng-controller="validateCtrl" name="myForm" novalidate>
    25. <p>用户名:
    26. <br>
    27. <input type="text" name="user" ng-model="user" required>
    28. <span style="color:red" ng-show="myForm.user.$dirty && myForm.user.$invalid">
    29. <span ng-show="myForm.user.$error.required">用户名是必须的。</span>
    30. </span>
    31. </p>
    32. <p>邮箱:
    33. <br>
    34. <input type="email" name="email" ng-model="email" required>
    35. <span style="color:red" ng-show="myForm.email.$dirty && myForm.email.$invalid">
    36. <span ng-show="myForm.email.$error.required">邮箱是必须的。</span>
    37. <span ng-show="myForm.email.$error.email">非法的邮箱。</span>
    38. </span>
    39. </p>
    40. <p>
    41. <input type="submit" ng-disabled="myForm.user.$dirty && myForm.user.$invalid ||
    42. myForm.email.$dirty && myForm.email.$invalid">
    43. </p>
    44. </form>
    45. <script>
    46. var app = angular.module('myApp',[]);
    47. app.controller('validateCtrl',function($scope){
    48. $scope.user ='John Doe';
    49. $scope.email ='john.doe@gmail.com';
    50. });
    51. </script>
    52. </body>
    53. </html>
     

     

      HTML 表单属性 novalidate 用于禁用浏览器默认的验证。

    实例解析

    AngularJS ng-model 指令用于绑定输入元素到模型中。

     

    模型对象有两个属性: user 和 email

    我们使用了 ng-show指令, color:red 在邮件是 $dirty 或 $invalid 才显示。

    属性描述
    $dirty 表单有填写记录
    $valid 字段内容合法的
    $invalid 字段内容是非法的
    $pristine 表单没有填写记录





  • 相关阅读:
    remove white space from read
    optimize the access speed of django website
    dowload image from requests
    run jupyter from command
    crawl wechat page
    python version 2.7 required which was not found in the registry windows 7
    health
    alternate rows shading using conditional formatting
    word
    【JAVA基础】static 关键字
  • 原文地址:https://www.cnblogs.com/moyuling/p/5207341.html
Copyright © 2011-2022 走看看