zoukankan      html  css  js  c++  java
  • AngularJs的一个简单的表单验证

    最近学习了AngularJs框架,觉得确实特别有用。之前学习了一点点的ASP.NET,它的控件也是挺好的,不过还是没有AngularJs轻巧。

    定义一个应用程序myApp,一个控制器。接着是表单的验证。

    AngularJs中,表单控件的HTML元素有:input select button textarea元素

    其实还算是很简单的例子。

    不过我觉得对比起ASP那种庞大的控件来说,它确实很轻巧。

    AngularJS 输入验证
    $dirty    表单有填写记录
    $valid    字段内容合法的
    $invalid   字段内容是非法的
    $pristine   表单没有填写记录

    原来这四个值是不知道怎么使用,后来发现,结合表单使用。

    我觉得特别有意思的是最后那个提交按钮的disabled的属性,如果两个输入框中任何一个没有填写或者没有填写正确,都是不可用状态。

     1 <!DOCTYPE html>
     2 <html lang="en">
     3 <head>
     4     <meta charset="UTF-8">
     5     <title>表单验证的例子</title>
     6     <script src="js/angular.min.js"></script>
     7     <script>
     8         var app=angular.module('myApp',[]);
     9         app.controller('validCtrl',function($scope){
    10             $scope.username="SliyCat";
    11             $scope.useremail="123@qq.com"
    12         });
    13     </script>
    14 </head>
    15 <body>
    16     <form ng-app="myApp" ng-controller="validCtrl" name="login">
    17         <p>用户注册</p>
    18         <div>
    19             <label>UserName:</label>
    20             <input type="text" name="username" ng-model="username" required>
    21             <span ng-show="login.username.$dirty && login.username.$invalid">
    22                 <span ng-show="login.username.$error.required">用户名不能为空</span>
    23             </span>
    24         </div>
    25         <div>
    26             <label>Email:</label>
    27             <input type="email" name="useremail" ng-model="useremail" required>
    28             <span ng-show="login.useremail.$dirty&&login.useremail.$invalid">
    29                 <span ng-show="login.useremail.$error.required">
    30                     邮箱不能为空
    31                 </span>
    32                 <span ng-show="login.useremail.$error.email">
    33                     非法格式
    34                 </span>
    35             </span>
    36         </div>
    37         <div>
    38             <input type="submit" name="okey" value="Next" ng-disabled="(login.username.$dirty && login.username.$invalid)||(login.useremail.$dirty&&login.useremail.$invalid)">
    39         </div>
    40     </form>
    41 </body>
    42 </html>
  • 相关阅读:
    Android AHandle AMessage
    android java 与C 通过 JNI双向通信
    android 系统给应用的jar
    UE4 unreliable 同步问题
    UE4 difference between servertravel and openlevel(多人游戏的关卡切换)
    UE4 Run On owing Client解析(RPC测试)
    UE4 TSubclassOf VS Native Pointer
    UE4 内容示例网络同步Learn
    UE4 多人FPS VR游戏制作笔记
    UE4 分层材质 Layerd Materials
  • 原文地址:https://www.cnblogs.com/synchronize/p/6350188.html
Copyright © 2011-2022 走看看