当前位置:小鱼儿玄机二站 > 关于计算机 > 表单验证续,表单验证

表单验证续,表单验证

文章作者:关于计算机 上传时间:2019-09-03

前一篇小说详解AngularJS实现表单验证说过,ng1.3+今后对于表单验证有了优化,它不再需求二个详实的表达式状态创设成分突显或掩饰。

表单验证续<AngularJs>

前一篇小说说过,ng1.3+现在对于表单验证有了优化,它不再要求八个详尽的表达式状态创制作而成分展现或遮蔽。

 

举个例子:大家在ng1.3事先的版本都急需如下写法:

 

<div class="error" ng-show="signup_form.name.$dirty && signup_form.name. $invalid && signup_form.submitted">

ng1.3从此新增加了叁个ngMessages指令,他被打包成三个模块公布,由此我们应用的时候只需求将这一个依据模块引进就可以

 

angular.module('myApp', ['ngMessages']); 

怎么用?

 

明天我们上学一下,它的用法,Code如下:

 

复制代码

<!DOCTYPE html>

<html ng-app="myTest">

    <head>

        <meta name="viewport" content="width=device-width" />

        <title>Index</title>

        <link href="~/Content/css/bootstrap.min.css" rel="stylesheet" />

        <script src="~/Javascript/angular.js"></script>

        <script src="~/Javascript/angular-messages.js"></script>

 

        <style type="text/css">

            body {

                padding-top: 30px;

            }

        </style>

    </head>

    <body>

        <div class="col-md-6">

            <form role="form" name="myForm" class="form-horizontal" novalidate>

                <div class="form-group">

                    <div class="col-md-2">

                        用户名

                    </div>

                    <div class="col-md-10">

                        <input type="text" placeholder="ng-Messages测试" name="name" ng-model="username.name"

                               ng-minlength=3 ng-maxlength=20 required />

                        <hr/>

                        $error:{{myForm.name.$error}}

                        <hr/>

                        <div ng-messages="myForm.name.$error">

                            <div ng-message="required">必填项</div>

                            <div ng-message="minlength">字符太短小于3</div>

                            <div ng-message="maxlength">字符太长大于20</div>

                        </div> 

                    </div>

                </div>

            </form>

        </div>

    </body>

</html>

<script type="text/javascript">

     angular.module("myTest", ['ngMessages']);

 

 

 

能够见到,其实ng是经过$error来监视模型的变迁,因为$error中隐含了错误的详细新闻,同一时间,就算大家的选择场景中只要还要,有几许处错误,那么,上边代码根据ng-message的依次只会显得一条错误音信,就算大家要求全体来得出来只要求增加ng-messages-multiple

 

复制代码

 <input type="text" placeholder="测试" name="name" ng-model="username.name" ng-minlength=3 ng-maxlength=20 required />

<div ng-messages="myForm.name.$error" ng-messages-multiple>

    <div ng-message="required">必填项</div>

    <div ng-message="email">邮件格式不对</div>

    <div ng-message="minlength">字符太短小于3</div>

    <div ng-message="maxlength">字符太长大于20</div>

</div> 

 

 

 

怎么复用?

 

我们的辨证消息在一个品种中山高校多是通用性极高的(对于样式,描述等皆有可观的统一性),由此大家这里也会设想到复用,ng中同样提供了建设方案

 

不畏将其看做模板,钦赐央浼路线由ng自动增加。这里再介绍二个下令 ng-messages-include

 

大家将地点的验证新闻保存到三个独门的html静态页面中,然后利用ng-messages-include内定央求路径即可。

 

Code:

 

  <div ng-messages="myForm.name.$error" ng-messages-multiple

        ng-messages-include ="@Url.Content("~/Content/template/error.html")">

   </div> 

error.html

 

<div ng-message="required">必填项</div>

<div ng-message="email">邮件格式不对</div>

<div ng-message="minlength">字符太短小于3</div>

<div ng-message="maxlength">字符太长大于20</div>

前一篇小说说过,ng1.3+以后对于表单验证有了优化,它不再要求三个详实的表明式状态创设成分展现或隐匿。 举个例子:笔者...

诸如:大家在ng1.3事先的本子都亟待如下写法:

复制代码 代码如下:

<div class="error" ng-show="signup_form.name.$dirty && signup_form.name. $invalid && signup_form.submitted">

ng1.3事后新扩大了一个ngMessages指令,他被打包成贰个模块发布,由此我们运用的时候只要求将以此依据模块引进就可以

复制代码 代码如下:

angular.module('myApp', ['ngMessages']);

怎么用?

现今大家学习一下,它的用法,Code如下:

<!DOCTYPE html>
<html ng-app="myTest">
  <head>
    <meta name="viewport" content="width=device-width" />
    <title>Index</title>
    <link href="~/Content/css/bootstrap.min.css" rel="stylesheet" />
    <script src="~/Javascript/angular.js"></script>
    <script src="~/Javascript/angular-messages.js"></script>

    <style type="text/css">
      body {
        padding-top: 30px;
      }
    </style>
  </head>
  <body>
    <div class="col-md-6">
      <form role="form" name="myForm" class="form-horizontal" novalidate>
        <div class="form-group">
          <div class="col-md-2">
            用户名
          </div>
          <div class="col-md-10">
            <input type="text" placeholder="ng-Messages测试" name="name" ng-model="username.name"
                ng-minlength=3 ng-maxlength=20 required />
            <hr/>
            $error:{{myForm.name.$error}}
            <hr/>
            <div ng-messages="myForm.name.$error">
              <div ng-message="required">必填项</div>
              <div ng-message="minlength">字符太短小于3</div>
              <div ng-message="maxlength">字符太长大于20</div>
            </div> 
          </div>
        </div>
      </form>
    </div>
  </body>
</html>
<script type="text/javascript">
   angular.module("myTest", ['ngMessages']);
</script>

作用如下:

图片 1

能够看到,其实ng是由此$error来监视模型的扭转,因为$error中满含了错误的详细音信,同临时间,若是大家的运用场景中一经相同的时候,有有个别处错误,那么,上边代码依照ng-message的逐个只会议及展览示一条错误音讯,如若我们必要全体显示出来只要求增多ng-messages-multiple

<input type="text" placeholder="测试" name="name" ng-model="username.name" ng-minlength=3 ng-maxlength=20 required />
<div ng-messages="myForm.name.$error" ng-messages-multiple>
<div ng-message="required">必填项</div>
<div ng-message="email">邮件格式不对</div>
<div ng-message="minlength">字符太短小于3</div>  
<div ng-message="maxlength">字符太长大于20</div>
</div> 

成效如下:

图片 2

怎么复用?

小编们的验证信息在四个品类中几近是通用性相当高的(对于样式,描述等都有中度的统一性),因而我们这边也会思考到复用,ng中一样提供了施工方案

纵使将其当作模板,钦赐央求路线由ng自动增加。这里再介绍二个限令 ng-messages-include

咱们将地点的求证音讯保存到多个单身的html静态页面中,然后使用ng-messages-include内定央求路线就能够。

Code:

 <div ng-messages="myForm.name.$error" ng-messages-multiple
    ng-messages-include ="@Url.Content("~/Content/template/error.html")">
  </div> 

error.html

<div ng-message="required">必填项</div>
<div ng-message="email">邮件格式不对</div>
<div ng-message="minlength">字符太短小于3</div>
<div ng-message="maxlength">字符太长大于20</div>

效果如下:

图片 3

自然,模板可能在非凡的不经常常一些字段错误提示不能够满足你的必要,你能够加多自定义的唤起如下:

<div class="error" ng-messages="signup_form.name.$error" 
ng-messages-include="templates/errors.html"> 
<!-- 
  按ng-message的顺序依次覆盖
--> 
</div> 

自定义表达(指令)涉及到的内情知识点非常多,若是轻易地为了用而用,大概写得出成效,不过代码丑陋,太菜了,还索要花个把月方能弄懂点皮毛,那部分暂告一段落,等根技术略了,在豪门享用,我们亦能够构成《理解AngularJs指令》扩充学习。

你或然感兴趣的文章:

  • AngularJS实现表单验证
  • AngularJS使用ngMessages实行表单验证
  • 详解AngularJS落成表单验证
  • AngularJS中落到实处顾客访谈的身份认证和表单验证作用
  • AngularJS使用angular-formly进行表单验证
  • 详尽解读AngularJS中的表单验证编程
  • AngularJS手动表单验证
  • AngularJS自动表单验证
  • 详解AngularJS中的表单验证(推荐)
  • 基于angularJS的表单验证指令介绍
  • AngularJS完毕表单验证作用
  • AngularJS学习笔记之表单验证效用实例详解

本文由小鱼儿玄机二站发布于关于计算机,转载请注明出处:表单验证续,表单验证

关键词: