angular之表单验证ngMessages-白红宇

angular之表单验证ngMessages

阅读量：2214 次

发布时间：2019-05-07

本文共 3772 字，大约阅读时间需要 12 分钟。

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

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

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

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

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

　　检验提示信息我放在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等）的真假，然后显示最小长度（最大长度、不能为空等）的提示，比如：

　　下面贴上一个简单的较为完整的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不能为空的信息，只有编辑过input后仍不满足校验条件才显示提示。

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


            
                 
      *帐号：

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

可以看下方官网的介绍：

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

你可能感兴趣的文章