form表单通过anjularJS异步验证

作者: BugMyGod | 来源:发表于2018-05-15 14:30 被阅读0次

form表单通过anjularJS异步验证
Vue 后台管理项目4-登录页表单验证
Web中的常用的两种表单验证
前端文件操作--上传篇
Vue Element Form组件v-for循环里的表单验证
登录请求
Element UI Form表单验证
XMLHttpRequest —— 文件上传
使用 jQuery ajax() 方法异步提交，验证用户登录
2019-04-03 验证form表单，获取错误信息

简单实现：用户名、邮箱输入正确，login可点击
输入错误，login不可点击

用到的参数：

$dirty :脏数据
返回值：true/false
$pristine:空数据
没有操作的时候，返回值也是真
$valid :合法数据
$invalid : 非法数据
$error: 错误
用法：formName.inputName.参数 =true/false
eg: login.username.$prinstine
三目运算符：条件？语句A：语句B

<!DOCTYPE html>  
<html >  
<head lang="en">  
    <meta charset="UTF-8">  
    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1"/>  
    <!-- 解决兼容问题-->  
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">  
    <meta name="renderer" content="webkit">  
  
    <script src="bootstrap/js/jquery-3.1.0.min.js"></script>  
    <!-- jquery在前边，bootstrap依赖jQuery-->  
    <script src="bootstrap/js/bootstrap.min.js"></script>  
    <script src="js/angular.min.js"></script>  
  
    <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css"/>  
    <link rel="icon" href="favicon.icon">  
    <title></title>  
  
</head>  
<body class="container">  
<header class="page-header">  
    <h1 class="text-capitalize">form表单通过AngularJS异步验证练习</h1>  
</header>  
<div >  
    <form action="" class="form-horizontal"  
          ng-app="myApp"  
          ng-controller="form2Ctrl"  
            name="login">  
        <div class="form-group has-feedback"  
                data-ng-class="login.username.$pristine?'':(login.username.$valid?'has-success':'has-error')">  
            <!-- username是空数据？  执行 空 or 语句B  
         语句B：    username是合法数据？ 执行 成功 or 错误  
         -->  
           <label class="control-label" for="username">username:</label>  
            <input type="text" class="form-control " id="username" name="username" required ng-model="username">  
            <span class="glyphicon form-control-feedback"  
                  data-ng-class="'glyphicon-ok'"  
                  ng-show="!login.username.$pristine&&login.username.$dirty&&login.username.$valid"></span>  
            <!-- 非空，脏数据，合法-->  
            <span class="glyphicon form-control-feedback"  
                  data-ng-class="'glyphicon-remove'"  
                  ng-show="!login.username.$pristine&&login.username.$dirty&&login.username.$invalid" ></span>  
            <!-- 非空，脏数据，不合法-->  
        </div>  
        <div class="form-group has-feedback"  
             data-ng-class="login.email.$pristine?'':(login.email.$valid?'has-success':'has-error')">  
            <!-- email是空数据？  执行 空 or 语句B  
         语句B：   email是合法数据？ 执行 成功 or 错误  
         -->  
            <label class="control-label" for="email">email:</label>  
            <input type="email" class="form-control " id="email" name="email" required ng-model="email">  
            <span class="glyphicon form-control-feedback"  
                  data-ng-class="'glyphicon-ok'"  
                  ng-show="!login.email.$pristine&&login.email.$dirty&&login.email.$valid"></span>  
            <!-- 非空，脏数据，合法-->  
            <span class="glyphicon form-control-feedback"  
                  data-ng-class="'glyphicon-remove'"  
                  ng-show="!login.email.$pristine&&login.email.$dirty&&login.email.$invalid" ></span>  
        </div>  
        <p class="pull-right">  
        <button type="button" class="btn btn-primary" data-ng-disabled="!login$valid">login</button>  
                                                        <!-- 不合法-->  
        </p>  
    </form>  
</div>  
<script>  
    var app= angular.module('myApp',[]);  
    app.controller('form2Ctrl',function($scope){  
  
    })  
  
</script>  
  
  
</body>  
  
</html>