AngularJs表单自动验证

angular-auto-validate

地址:https://github.com/jonsamwell/angular-auto-validate

引用: <script src="/Assets/JS/AngularJS/angular-auto-validate/dist/jcs-auto-validate.js" charset="utf-8"></script>

依赖:var app= angular.module("appMain", ["jcs-autoValidate"]);

汉化:lang\jcs-auto-validate_zh-cn.json目录下文件

粘贴复制到jcs-auto-validate.js文件中

上图是已经复制粘贴以后的,原文是英文,替换即可中文.

注:如果发现最终显示的中文乱码,将jcs-auto-validate.js另存为UTF-8(650001)。

保存完毕即可完美显示中文错误。

如果发现现实错误消息地方有所偏差,可查看该处代码进行修正

以上设置完毕后即可在项目文件中调用。

    <div class="form-group">

      <label for="username" class="control-label">Username</label>

      <input type="text" class="form-control " placeholder="角色名称" ng-model="model.RoleName" ng-required="true"  ng-minlength="7" ng-pattern="/^[A-Za-z0-9_]{1,32}$/" ng-pattern-err-type="BadName">

    </div>

以上字段校验共有3个:1、必须填写;2:最小长度为7个字符;3:必须满足正则表达式要;

至于ng-required和ng-minlength有默认的错误消息信息,所以可以不用关系。但正则表达式则需要根据不同的需求而定义不同的消息内容,那么可以做如下定义:

ng-pattern="/^[A-Za-z0-9_]{1,32}$/" ng-pattern-err-type="BadName"

我们定义了BadName,这里只需要添加服务即可

app.run(function (defaultErrorMessageResolver) {
defaultErrorMessageResolver.getErrorMessages().then(function (errorMessages) {
errorMessages[‘BadName‘] = ‘用户名只能包含数字、字母或下划线‘;
});
});

这样,我们可以根据万能的正则表达式定义我们想要的错误信息

时间: 2024-12-30 11:09:04

AngularJs表单自动验证的相关文章

Thinkphp表单自动验证

之前项目经常用到,没做总结. 自动验证是Thinphp模型层提供的一种数据验证方法,可以在使用create创建数据对象的时候自动进行数据验证. 原理: create()方法收集表单($_POST)信息并返回,同时触发表单自动验证,过滤非法字段, 在控制器中使用create()方法,(返回值为true/false),会自动触发模型类中的$_validate属性(为父类Model中的方法,在子类Model中重写),在$_validate中自定义验证规则(验证规则下面会详细说明),当create()方

thinkPHP 表单自动验证功能

昨天晚上我们老大叫我弄表单自动验证功能,愁了半天借鉴了好多官网的知识,才出来,诶,总之分享一下我自己的成果吧! thinkphp 在Model基类为我们定义了自动验证的函数和正则表达式,我们只需要在对应的数据库表的模型类下建立$_validate属性就可以了. 1.我们找到Model基类,可以看到 protected $_validate       = array();  // 自动验证定,它是数组类型的,下面在对应数据模型文件定义它: 2. public function CheckVeri

AngularJS实现表单手动验证和表单自动验证

AngularJS的表单验证大致有两种,一种是手动验证,一种是自动验证.一.手动验证 所谓手动验证是通过AngularJS表单的属性来验证.而成为AngularJS表单必须满足两个条件: 1.给form元素加上novalidate="novalidate": 2.给form元素加上name="theForm",如下: <!DOCTYPE html> <html lang="en" ng-app="myApp1"

Thinkphp框架 表单自动验证登录注册 ajax自动验证登录注册

说明:这里没练习静态自动验证:如果用到静态验证首先自定义一个控制器,再在Model文件夹里创建一个NiHaoModel.php 类  NiHao是自定义的,前缀可以随意,但是一定要用驼峰法(首字母大写) 在自定义控制器里用D()方法时里面要写入NiHaoModel.php 类的前缀 NiHao   因为有这串代码 protected $trueTableName = 'yonghu'; //作用是找到真实表名,系统默认找yong_hu这个表,需要定义此方法,才能找到yonghu表 <?php n

2016/05/15 ThinkPHP3.2.2 表单自动验证实例 验证规则的数组 直接写在相应的控制器里

使用TP 3.2框架 验证规则也可以写到模型里,但感觉有些麻烦, 一是有时候不同页面验证的方式会不一样, 二是看到这个   Add  事件里的代码,就清楚要接收什么数据,如何验证数据能够在第一眼有个大致了解 ①控制器代码页 1 <?php 2 namespace Home\Controller; 3 use Think\Controller; 4 5 header("Content-type: text/html; charset=utf-8"); 6 7 class AddCo

Thinkphp框架 表单自动验证登录注册 ajax自动验证登录注册

动态验证:(不需要建Model模型) 1.建一个控制器,做表单操作(包含验证) <?php namespace Biaodan\Controller; use Think\Controller; class BiaodanController extends Controller { public function test() { if(empty($_POST))//如果$_POST空,显示添加页面, { $this->show(); } else //如果$_POST不为空,走验证,验证

ThinkPHP 表单自动验证运用

使用TP 3.2框架 public function add_post(){ //验证规则 $rule=array( array('name','require','请输入姓名',1),//必须验证name ); $m=M('user'); //获取name,sex,contact数据到模型,并验证 if(!$m->field('name,sex,contact')->validate($rule)->create()) $this->error($m->getError()

AngularJS表单验证,手动验证或自动验证

AngularJS的表单验证大致有两种,一种是手动验证,一种是自动验证. 手动验证 所谓手动验证是通过AngularJS表单的属性来验证.而成为AngularJS表单必须满足两个条件:1.给form元素加上novalidate="novalidate":2.给form元素加上name="theForm",如下: <!DOCTYPE html> <html lang="en" ng-app="myApp1"&g

走进AngularJs 表单及表单验证

年底了越来越懒散,AngularJs的学习落了一段时间,博客最近也没更新.惭愧~前段时间有试了一下用yeoman构建Angular项目,感觉学的差不多了想做个项目练练手,谁知遇到了一系列问题.yeoman是基于node.js的一套工具包,由于我一直在windows下编程,而且node.js对于windows环境的支持也在慢慢加强,所以想尝试在windows下用yeoman跟搭建一个项目.过程远比想象的坎坷多了,各种报错,各种搜资料解决问题,最终还是无法解决一些编译出错,以失败告终,转战Linux