• 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>
  • 相关阅读:
    exercise 1-6
    第五章 Inheritance继承
    wk1&2 字符串
    <转>Python 多线程的单cpu与cpu上的多线程的区别
    Python字典增删操作技巧简述
    Python 拷贝对象(深拷贝deepcopy与浅拷贝copy)
    <转>Python3.x和Python2.x的区别介绍
    <转>Python运行的17个时新手常见错误小结
    常见测试流程
    <转>数据库设计的三大范式
  • 原文地址:https://www.cnblogs.com/synchronize/p/6350188.html
Copyright © 2020-2023  润新知