美高梅开户-美高梅官方网站开户

您的位置:美高梅开户 > 美高梅官方网站开户 > 使用AngularJS对表单提交内容进行验证的操作方法

使用AngularJS对表单提交内容进行验证的操作方法

发布时间:2019-08-09 19:20编辑:美高梅官方网站开户浏览(146)

    AngularJS是一款不错的前端JS框架,已经被用于谷歌(Google)的多款产品中间。它具有繁多特色,最为基本的是:MVC、模块化、自动化双向数据绑定、语义化标签、重视注入等……使用它能够大大减少书写代码的职业量,但和Jquery区别,使用AngularJS有料定的难度,由此前天自家将介绍以下哪些使用AngularJS来对表单的交由内容张开验证。

    需求

    AngularJS对表单中常用的辨证操作

    •     Name 必填
    •     Username 非必填,最小长度3,最大尺寸8
    •     Email 非必填,但必须是合法的email
    •     验证未通过的表单不能够交到
    •     突显贰个必填也许违规email格式的错误消息
    •     若是没有错提交就弹出叁个祝贺音讯

    $dirty 表单有填写记录
    $valid 字段内容合法的
    $invalid 字段内容是违规的
    $pristine 表单没有填写记录
    $error 表单验证不通过的错误新闻

    明日理解大家的对象了啊,让大家一块来营造那一个事物吧.

    1.息息相关插件的导入:AngularJS和Jquery一样,是一种由程序员用js编写好然后装进起来的js插件,由此在行使从前要用于下代码来导入它。

    Angular 的表单属性 $valid, $invalid, $pristine, $dirty

     <script src="libs/angular.js"></script> 
    

    Angular 提供了关于表单的品质来协助大家验证表单. 他们给我们提供了种种关于八个表单及其输入的消息,并且应用到了表单和输入.
    属性类  
     描述

    注:该js插件最佳放在body之后,自身写的js代码则放在AngularJS之后防止发生错误。

    • $valid  ng-valid  Boolean 告诉大家这一项当前依照你设定的法则是还是不是表明通过
    • $invalid  ng-invalid  Boolean 告诉咱们这一项当前依附你设定的平整是或不是表明未通过
    • $pristine  ng-pristine  Boolean 假若表单大概输入框未有采用则为True
    • $dirty  ng-dirty  Boolean 若是表单或许输入框有使用到则为True

    2.在导入完AngularJS插件之后,大家第一要在body中开创二个form表单,用于接下去的操作,然后在表单上也许body上助长ng-app=""属性来规定AngularJS的成效域,一般

    Angular 也提供了关于表单及其输入框的类,以便你可以遵照每贰个情景设置其样式.
    会见表单属性

    引入加在body上。

    •     方位表单: <form name>.<angular property>
    •     访谈两个输入框: <form name>.<input name>.<angular property>
     <body ng-app="app" ng-controller="ctrl"></body> 
    

    安装大家的表单

    注:ng-controller="ctrl"用于安装调控器。

    笔者们将利用贰个粗略的表单来做演示.

    3.给form表单和input的name属性命名,给form及input设置name后会将form表单新闻暗中同意绑定到$scope成效域中,故可以使用formName.inputName.$验证操作 得到申明结果。

    图片 1

    <form class="form-horizontal" name="myForm" novalidate>
      <input type="text" name="name" >
      <input type="email" name="mail">
      <input type="password" name="pwd" >
    </form>
    

    我们将索要五个公文:

    novalidata用于禁止h5自带的表单验证,制止多余影响。

    1.     index.html 我们用来浮现表单的代码
    2.     app.js 大家的Angular应用程序和调整器 (差非常少未有别的代码)

    例如:

    Our Form Code index.html  

    myForm.text.$dirty="true";表单被填写过
    myForm.text.$invalid"true";表单输入不合法
    myForm.text.$error.required="true";表单必填但未填。
    
    <!-- index.html -->
    <!DOCTYPE html>
    <html>
    <head>
      <!-- CSS ===================== -->
      <!-- load bootstrap -->
      <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css"> 
      <style>
        body   { padding-top:30px; }
      </style>
    
      <!-- JS ===================== -->
      <!-- load angular -->
      <script src="http://code.angularjs.org/1.2.6/angular.js"></script> 
      <script src="app.js"></script>
    </head>
    
    <!-- apply angular app and controller to our body -->
    <body ng-app="validationApp" ng-controller="mainController">
    <div class="container">
    <div class="col-sm-8 col-sm-offset-2">
    
      <!-- PAGE HEADER -->
      <div class="page-header"><h1>AngularJS Form Validation</h1></div>
    
      <!-- FORM -->
      <!-- pass in the variable if our form is valid or invalid -->
      <form name="userForm" ng-submit="submitForm(userForm.$valid)" novalidate> <!-- novalidate prevents HTML5 validation since we will be validating ourselves -->
    
        <!-- NAME -->
        <div class="form-group">
          <label>Name</label>
          <input type="text" name="name" class="form-control" ng-model="name" required>
        </div>
    
        <!-- USERNAME -->
        <div class="form-group">
          <label>Username</label>
          <input type="text" name="username" class="form-control" ng-model="user.username" ng-minlength="3" ng-maxlength="8">
        </div>
    
        <!-- EMAIL -->
        <div class="form-group">
          <label>Email</label>
          <input type="email" name="email" class="form-control" ng-model="email">
        </div>
    
        <!-- SUBMIT BUTTON -->
        <button type="submit" class="btn btn-primary">Submit</button>
    
      </form>
    
    </div><!-- col-sm-8 -->
    </div><!-- /container -->
    </body>
    </html>
    

    4.给input加上对应的证实:

    那边列出了有个别关键点:

    <input type="text" name="name" ng-minlength="4" ng-maxlength="10" required ng-class="{erro:myForm.name.$invalid&&myForm.name.$dirty}"/>
    <input type="email" name="mail" required />
    <input type="password" name="pwd" ng-model="user.pwd" pattern="^w{6,18}$"/>
    
    •     novalidate: 它将会协会暗许的HTML5评释,因为那会由大家友好来做(大家和好的将会更棒)
    •     大家在输入框上应用了ng-model,以便现在自表单的数据绑定到angular变量
    •     username上的ng-minlength 和 ng-maxlength会本人创建其法规
    •     name 输入框是必填的
    •     email 输入框有总体性 type=”email”

    注:

    表达准绳

    如上代码对text设置了小小长度4,最大尺寸10,必填的注解消息,

    Angular 有那个评释法规,疑似 tong-min leng than dng-max length.

    对email则选拔了email自带验证,扩充了必填需要,

     Angular还足以友善安顿准绳.  Angular输入辅导上有表达 .  

    对password则是设置了正则验证须要是6到17人的假名数字下划线。

    <input
      ng-model="{ string }"
      name="{ string }"
      required
      ng-required="{ boolean }"
      ng-minlength="{ number }"
      ng-maxlength="{ number }"
      ng-pattern="{ string }"
      ng-change="{ string }">
    </input>
    

    5.给提交开关加上ng-disabled="myForm.$dirty&&myForm.$invalid"属性在表单输入不合规时将开关禁止使用来阻拦表单内容交给。

    到现在建好了表单, 接着创制Angular应用和调整器,ng-app ng-调节器.
    应用的 Codeapp.js

    注:myForm.$dirty&&myForm.$invalid表示在表单有输入的情况下输入错误。

    // app.js
    // create angular app
    var validationApp = angular.module('validationApp', []);
    
    // create angular controller
    validationApp.controller('mainController', function($scope) {
    
      // function to submit the form after all validation has occurred      
      $scope.submitForm = function(isValid) {
    
        // check to make sure the form is completely valid
        if (isValid) {
          alert('our form is amazing');
        }
    
      };
    
    });
    

    如上步骤落成之后表单的辨证就到位了,也足以加多span的ng-show="myForm.name.$invalid&&myForm.name.$dirty"属性来设置在区别错误时出现差别的提醒音信,那样,叁个足以印证是或不是交由的表单就成功了。

     
    使HTML5验证器的novalidate

    如上所述是我给大家介绍的利用AngularJS对表单提交内容打开认证的操作方法,希望对我们持有支持,假若我们有其余疑问请给自家留言,小编会及时还原大家的。在此也非常谢谢大家对剧本之家网址的支持!

    作者们将要我们的表单使用novalidate。那是三个很好的做法,因为我们将会和睦解和管理理验证。即便大家让我们的表单那样做,它看起来非常丑。

    你恐怕感兴趣的稿子:

    • Angularjs 事件指令详细整理
    • 详解angularjs获取成分以及angular.element()用法
    • 选用AngularJS编写多选开关选中时接触钦命方法的吩咐代码详解
    • AngularJS中利用three.js的实例详解
    • AngularJS达成的JSONP跨域访谈数据传输成效详解
    • 详解使用angularjs的ng-options时怎么样设置私下认可值(起首值)
    • 详细AngularJs4的图片剪裁组件的实例
    • Angularjs的键盘事件的绑定

    图片 2

    剥夺提交开关 ng-disabled

    未来实在的好戏上演了。大家开始应用Angular的属性 。首先让大家禁用我们的交付按键。尽管大家的表单是$invalid的,大家只想禁用它。  

    <!-- index.html -->
    ...
    
      <!-- SUBMIT BUTTON -->
      <button type="submit" class="btn btn-primary" ng-disabled="userForm.$invalid">Submit</button>
    
    ...
    

    只使用一些代码(ng-disabled),如果我们的表单是$invalid的,表单按键将被剥夺。
     那意味,大家的name input 字段是必备的,况兼email input字段需求一个实用的电子邮件。

    用 eng-show彰显错误音信

    ng-valid 和ng-invalid 会基于提供的表单准则自动验证输入的有效性性.

    本文由美高梅开户发布于美高梅官方网站开户,转载请注明出处:使用AngularJS对表单提交内容进行验证的操作方法

    关键词: 美高梅开户

上一篇:JavaScript代码执行的先后顺序问题

下一篇:没有了