angular之表单验证ngMessages

　　刚接触angular1.x很多经常用到的ngMessages的地方，这里顺便记一下，效果如下图：

　　如果引用了angular-messages.js报如下错误，说明你的angular.js和angular-messages.js版本不匹配，需要找到能用的版本。

可在这里在线测试各个版本https://docs.angularjs.org/api/ngMessages

　　引入版本匹配的angular-mseeages.js后，接下来开始使用它提供的表单验证提示吧。。。

最简单的就是将提示内容直接写在当前文件里了，只需要将它的ng-messages指令里的参数与需要检验的input的name一致即可，比如：

<form name="myForm">
        <div class="form-group">
            <label class="col-md-2">帐号：</label>
            <input class="form-control" type="text" placeholder="请输入帐号" name="name" ng-model="user.name" ng-minlength="3" ng-maxlength="9" required>
            <div ng-messages="myForm.name.$error" role="alert">
                <div ng-message="minlength">至少3位</div>
                <div ng-message="maxlength">最多9位</div>
                <div ng-message="required">不能为空</div>
              </div>
</form>

　　检验提示信息我放在input后面的，它的ng-messages里的myForm对应的当前的form的name值，ng-messages里myForm后面的name就是要校验的input的name的值了，最后的$error表示这个input数据不对就显示出来，可以在里面继续校验具体哪里不正确，比如这里的子元素上添加ng-message="minlength"，就是当input设置了ng-minlength后，输入的内容不满足设置的minlength，就显示minlength的提示信息。

　　当然，如果你只需要验证一个条件的话也可以不用ngMessages，可以直接判断myForm.name.$error.minlength （maxlength、required等）的真假，然后显示最小长度（最大长度、不能为空等）的提示，比如：

<div class="form-group">
            <label class="col-md-2"><span class="req-red">*</span>帐号：</label>
            <div ng-class="{‘has-error‘:myForm.name.$invalid && !myForm.name.$pristine}">
                <input class="form-control" type="text" placeholder="请输入帐号" name="name" ng-model="user.name" ng-minlength="3" ng-maxlength="9" required>
            </div>
            <div ng-if="myForm.name.$error.minlength">至少3位数</div>
</div>

<div class="form-group">
            <label class="col-md-2"><span class="req-red">*</span>帐号：</label>
            <div ng-class="{‘has-error‘:myForm.name2.$invalid && !myForm.name2.$pristine}">
                <input class="form-control" type="text" placeholder="请输入帐号" name="name2" ng-model="user.name" ng-maxlength="9" required>
            </div>
            <div ng-if="myForm.name2.$error.maxlength">最多9位数</div>
</div>

<div class="form-group">
            <label class="col-md-2"><span class="req-red">*</span>帐号：</label>
            <div ng-class="{‘has-error‘:myForm.name3.$invalid && !myForm.name3.$pristine}">
                <input class="form-control" type="text" placeholder="请输入帐号" name="name3" ng-model="user.name" required>
            </div>
            <div ng-if="myForm.name3.$error.required">不能为空</div>
</div>

　　下面贴上一个简单的较为完整的form表单校验代码，主要实现了：

  1. 任意一个input不满足条件，submit按钮不能点击（给submit按钮添加ng-disabled="myForm.$invalid",myForm为表单的name值，$invalid表示未通过验证）。
  2. 任意一个input不满足条件，其边框颜色变成红色，满足后返回原始样式（给input添加ng-class="{‘has-error‘:myForm.name.$invalid && !myForm.name.$pristine}，!myForm.name.$pristine有编辑过input内容并且myForm.name.$invalid表示input未通过验证，添加类名has-error，bootstrap的CSS里定义了.has-error .form-control{border-color: #a94442;}样式为红色表框等"）。
  3. 给校验提示信息添加ng-if="!myForm.name.$pristine"，为了避免进入页面就提示XXX不能为空的信息，只有编辑过input后仍不满足校验条件才显示提示。
<body ng-app="myApp">
<div class="form" ng-controller="myCtrl">
    <form name="myForm">
        <div class="form-group">
            <label class="col-md-2">帐号：</label>
            <div ng-class="{‘has-error‘:myForm.name.$invalid && !myForm.name.$pristine}">
                <input class="form-control" type="text" placeholder="请输入帐号" name="name" ng-model="user.name" ng-minlength="3" ng-maxlength="9" required>
            </div>
            <div ng-if="!myForm.name.$pristine" ng-messages="myForm.name.$error" role="alert">
                <div ng-message="minlength">至少3位</div>
                <div ng-message="maxlength">最多9位</div>
                <div ng-message="required">不能为空</div>
              </div>
        </div>
        <div class="form-group">
            <label class="col-md-2">密码：</label>
            <div ng-class="{‘has-error‘:myForm.password.$invalid && !myForm.password.$pristine}">
                <input class="form-control" type="password" placeholder="请输入密码" name="password" ng-model="user.password" ng-minlength="6" ng-maxlength="16" required>
            </div>
            <div ng-if="!myForm.password.$pristine" ng-messages="myForm.password.$error" role="alert">
                <div ng-message="minlength">至少6位</div>
                <div ng-message="maxlength">最多16位</div>
                <div ng-message="required">不能为空</div>
              </div>
        </div>
        <div class="form-group">
            <label class="col-md-2">年龄：</label>
            <div ng-class="{‘has-error‘:myForm.age.$invalid && !myForm.age.$pristine}">
                <input class="form-control" type="number" placeholder="请输入年龄" name="age" ng-model="user.age" required>
            </div>
            <div ng-if="!myForm.age.$pristine" ng-messages="myForm.age.$error" role="alert">
                <div ng-message="number">必须位数字</div>
                <div ng-message="required">不能为空</div>
              </div>
        </div>
        <div class="form-group">
            <label class="col-md-2">Times：</label>
            <div ng-class="{‘has-error‘:myForm.times.$invalid && !myForm.times.$pristine}">
                <select class="form-control" name="times" ng-minlength="1" ng-model="user.times" required>
                    <option value="">请选择</option>
                    <option value="1">first</option>
                    <option value="2">second</option>
                </select>
            </div>
            <div ng-if="!myForm.times.$pristine" ng-messages="myForm.times.$error" role="alert">
                <div ng-message="minlength">必须选择一个</div>
                <div ng-message="required">不能为空</div>
              </div>
        </div>
        <input class="btn btn-success" type="submit" value="提交" ng-disabled="myForm.$invalid">
    </form>
</div>
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://cdn.bootcss.com/angular.js/1.4.0-beta.4/angular-1.4.0-beta.5/angular.js"></script>
    <script src="https://cdn.bootcss.com/angular-ui-router/1.0.3/angular-ui-router.min.js"></script>
    <script src="//code.angularjs.org/1.5.4/angular-messages.js"></script>
    <script src="https://cdn.bootcss.com/angular-ui-bootstrap/2.5.0/ui-bootstrap-tpls.js"></script>
<script>
         angular.module(‘myApp‘, [‘ngMessages‘,‘ui.bootstrap‘]).controller("myCtrl",function ($scope) {

    })
</script>
</body>

　　有点时候会遇到几个页面的提示信息和校验条件都一样，那么我们可以将所有的提示信息单独放在一个html文件里当公共模板使用，这样修改起来也方便，那么就需要用到ng-messages-include了，比如：

<form name="myForm">
        <div class="form-group">
            <label class="col-md-2"><span class="req-red">*</span>帐号：</label>
            <div ng-class="{‘has-error‘:myForm.name.$invalid && !myForm.name.$pristine}">
                <input class="form-control" type="text" placeholder="请输入帐号" name="name" ng-model="user.name" ng-minlength="3" ng-maxlength="9" required>
            </div>
              <div ng-if="!myForm.name.$pristine" ng-messages="myForm.name.$error" role="alert">
                <ng-messages-include src="views/tpls/error.html"></ng-messages-include>
              </div>
        </div>
</form>

　　其中src="views/tpls/error.html"就是你提示信息的文件路径了。其内容比如：

<div ng-message="minlength">至少3位</div>
<div ng-message="maxlength">最多9位</div>
<div ng-message="required">不能为空</div>

可以看下方官网的介绍：

https://docs.angularjs.org/api/ngMessages/directive/ngMessagesInclude

$error

$error对象中保存着没有通过验证的验证器名称以及对应的错误信息。

$pristine

$pristine的值是布尔型的，可以告诉我们用户是否对控件进行了修改。

$dirty

$dirty的值和$pristine相反，可以告诉我们用户是否和控件进行过交互。

$valid

$valid值可以告诉我们当前的控件中是否有错误。当有错误时值为false，没有错误时值为true。

$invalid

$invalid值可以告诉我们当前控件中是否存在至少一个错误，它的值和$valid相反。

具体的一些表单校验状态和方法可以看http://www.cnblogs.com/rohelm/p/4033513.html

时间： 2024-11-05 12:11:16

angular之表单验证ngMessages的相关文章

angular js 表单验证

1 <!doctype html> 2 <html ng-app="myapp"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 <style> 7 body{ 8 padding: 50px; 9 font-family: "微软雅黑"; 10 } 11 input{ 12 margi

基于angular的表单验证实例

最近,在学习angular下面就和大家分享一个简单的表单验证实例 在分享实例之前先整理一下,一些基础知识 input元素上使用的所有验证选项: 1必填项  <input type="text"  required/> 2最小长度 <input type="text" ng-minlength="5"/> 3最大长度 <input type="text" ng-maxlength="20&

angularjs 表单验证ngMessages和创建自定义指令结合

index.html 1 <!doctype html> 2 <html > 3 <head> 4 <meta charset="utf-8"> 5 </head> 6 <style> 7 /*input.ng-invalid { 8 border: 1px solid red; 9 } 10 input.ng-valid { 11 border: 1px solid green; 12 }*/ 13 </s

angular js h5关于表单验证的例子

angular js表单验证 <!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title></title> <script src="angular.min.js"></script> <link rel="stylesheet" href="

angularjs中的表单验证

angular对html原生的form做了封装,增加了很多验证功能 1.代码结构 <form name="signup_form" novalidate ng-submit="signupForm()"> <div> <label>用户名</label> <input type="text" placeholder="Name" name="name"

Angular表单验证

在使用 AngularJS 进行开发的时候,表单填写是一个很常见的需求,而表单验证又是比较让人头疼的部分,本文对此做一个总结. 在 Angular 的视图中使用的 form 已经不是 HTML 中的普通 form 了,而是一个被 Angular 封装过的指令.它可以完成普通 form 无法实现的功能,比如 form 嵌套,而且自带强大的验证功能. Angular 在对表单进行校验的时候会使用 ngModelController 上的属性,如果不设置 ng-model,则 Angular 无法知道

AngularJS使用ngMessages进行表单验证

本文转载(已经找不到原作者...) 名称为"ngMessages"的module,通过npm install angular-messages进行安装.在没有使用ngMessages之前,我们可能这样写验证: <form name="userForm"> <input type="text" name="username" ng-model="user.username" ng-minle

angular表单验证实例----可用的代码

前段时间,公司做一个单页面,就是一个表单验证,早开始在菜鸟教程上关注了angular,所以下派上用场了 angular里面对于表单验证,设置了很多指令. 也就是说不用自己写一些逻辑,直接绑定指令就行. ng-app     启动你angular的模块 ng-controller 控制器,启动你angualr里面的逻辑代码作用在页面上 ng-options  循环你select里面的option标签,很好用的 ng-submit,表单提交执行的 novalidate  表单form配合后期检测的

简话Angular 05 Angular表单验证

一句话: 可以使用所有html5表单验证功能,同时Angular还增强了部分验证,支持动态验证 1. 上源码 1 <div ng-controller="ExampleController"> 2 <form action="" name="exampleForm"> 3 <label>姓名(required ng-minlength=1 ng-maxlength=3): </label> <