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表单校验代码，主要实现了：

任意一个input不满足条件，submit按钮不能点击（给submit按钮添加ng-disabled="myForm.$invalid",myForm为表单的name值，$invalid表示未通过验证）。
任意一个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;}样式为红色表框等"）。
给校验提示信息添加ng-if="!myForm.name.$pristine"，为了避免进入页面就提示XXX不能为空的信息，给校验提示信息添加ng-if="myForm.name.$touched"，实现用户点击表单元素后失去焦点就触发校验。只有编辑过input或input失去焦点后仍不满足校验条件才显示提示并且动态改变input边框颜色。

修改：ng-class="{'has-error':myForm.name.$invalid && (myForm.name.$touched || !myForm.name.$pristine)}" 如果不加上
!myForm.name.$pristine(表单内容有改动就会触发)，在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.$touched || !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 || myForm.name.$touched" 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.$touched || !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 || myForm.password.$touched" 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.$touched || !myForm.age.$pristine)}">

                <input class="form-control" type="number" placeholder="请输入年龄" name="age" ng-model="user.age" required>

            </div>

            <div ng-if="!myForm.age.$pristine || myForm.age.$touched" 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.$touched || !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 || myForm.times.$touched" 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.$touched}">

                <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 || myForm.name.$touched" 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相反。

$touched

表单项是否被访问过，如果获得过焦点，在失去时该值为 true，与之相对的是 $untouched

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