AngularJS使用angular-formly进行表单验证


Posted in Javascript onDecember 27, 2015

当验证表单中有很多字段时,这时候可能希望把html的生成以及验证逻辑放到controller中,在页面,也许是这样的:

<some-form fiedls="vm.someFields" ...></some-form>

然后,在controller中定义各个字段以及验证。angular-formly就是为这个需求而存在。

在controller中,把各个字段定义在数组中:

vm.rentalFields = [
{
key:'first_name',
type:'input',
templateOptions:{
type:'text',
label:'姓',
placeholder: '输入姓',
required: true
}
},
...
]

使用hideExpression字段定义隐藏的条件:

{
key:'under18',
type:'checkbox',
templateOptions:{
label:'是否不满18岁'
},
hideExpression: '!model.email' //email验证失败之前不显示
}

使用validators字段自定义验证规则:

{
key:'license',
type:'input',
templateOptions:{
label:'身份证号',
placeholder:'输入身份证号'
},
hideExpression: '!model.province',
validators:{
driversLicense: function($viewValue, $modelValue, scope){
var value = $modelValue || $viewValue;
if(value){
return validateDriversLicence(value);
}
},
expressionProperties:{
'templateOptions.disabled':function($viewValue, $modelValue, scope){
if(scope.model.province == '山东省'){
return false;
}
return true;
}
}
}

首先安装:npm install angular-formly angular-formly-templates-bootstrap bootstrap api-check

Demo的文件结构:

css/
.....style.css
node_modules/
scripts/
.....MainController.js
.....provinces.js [提供select的选项,有关省]

app.js

index.html

index.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="gb2312">
<title></title>
<link rel="stylesheet" href="css/style.css"/>
<link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.min.css"/>
</head>
<body ng-app="formlyApp" ng-controller="MainController as vm">
<div class="container col-md-4 col-md-offset-4">
<form novalidate>
<formly-form model="vm.rental" fields="vm.rentalFields" form="vm.rentalForm">
<button type="submit" class="btn btn-primary" ng-disabled="vm.rentalForm.$invalid">提交</button>
</formly-form>
</form>
</div>
<!--项目依赖-->
<script src="node_modules/api-check/dist/api-check.js"></script>
<script src="node_modules/angular/angular.min.js"></script>
<script src="node_modules/angular-formly/dist/formly.js"></script>
<script src="node_modules/angular-formly-templates-bootstrap/dist/angular-formly-templates-bootstrap.min.js"></script>
<!--项目引用-->
<script src="app.js"></script>
<script src="scripts/MainController.js"></script>
<script src="scripts/province.js"></script>
</body>
</html>

app.js

(function(){
'use strict';
angular.module('formlyApp',['formly','formlyBootstrap'])
})();

province.js

以factory的方式返回一个对象,包含获取select选项的方法。

(function(){
'use strict';

angular

.module('formlyApp')
.factory('province', province);
function province(){
function getProvinces(){
return [
{
"name":"山东省",
"value":"山东省"
},
{
"name":"江苏省",
"value":"江苏省"
}
];
}
return {
getProvinces:getProvinces
}
}
})();

MainController.js

(function(){
'use strict';
angular
.module('formlyApp')
.controller('MainController', MainController);

function MainController(province){
var vm = this;

vm.rental = {};

vm.rentalFields = [
{
key:'first_name',
type:'input',
templateOptions:{
type:'text',
label:'姓',
placeholder: '输入姓',
required: true
}
},
{
key:'last_name',
type:'input',
templateOptions:{
type:'text',
label:'名',
placeholder:'输入名',
required:true
}
},
{
key:'email',
type:'input',
templateOptions:{
type:'email',
label:'邮箱',
placeholder:'输入邮箱',
required:true
}
},
{
key:'under18',
type:'checkbox',
templateOptions:{
label:'是否不满18岁'
},
hideExpression: '!model.email' //email验证失败之前不显示
},
{
key: 'province',
type:'select',
templateOptions:{
label:'选择省',
options: province.getProvinces()
},
hideExpression: '!model.email'
},
{
key:'license',
type:'input',
templateOptions:{
label:'身份证号',
placeholder:'输入身份证号'
},
hideExpression: '!model.province',
validators:{
driversLicense: function($viewValue, $modelValue, scope){
var value = $modelValue || $viewValue;
if(value){
return validateDriversLicence(value);
}
},
expressionProperties:{
'templateOptions.disabled':function($viewValue, $modelValue, scope){
if(scope.model.province == '山东省'){
return false;
}
return true;
}
}
}
},
{
key: 'insurance',
type: 'input',
templateOptions:{
label:'保险',
placeholder:'输入保险'
},
hideExpression: '!model.under18 || !model.province'
}
];
function validateDriversLicence(value) {
return /[A-Za-z]\d{4}[\s|\-]*\d{5}[\s|\-]*\d{5}$/.test(value);
}
}
})();

以上内容是小编给大家分享的AngularJS使用angular-formly进行表单验证的全部叙述,希望大家喜欢。

Javascript 相关文章推荐
Javascript 获取链接(url)参数的方法[正则与截取字符串]
Feb 09 Javascript
Javascript insertAfter() 实现函数代码
Oct 12 Javascript
jquery实现excel导出的方法
Apr 04 Javascript
利用js实现在浏览器状态栏显示访问者在本页停留的时间
Dec 29 Javascript
jQuery避免$符和其他JS库冲突的方法对比
Feb 20 Javascript
深入理解JavaScript系列(22):S.O.L.I.D五大原则之依赖倒置原则DIP详解
Mar 05 Javascript
JavaScript数组的定义及数字操作技巧
Jun 06 Javascript
javascript十六进制数字和ASCII字符之间的转换方法
Dec 27 Javascript
JavaScript函数表达式详解及实例
May 05 Javascript
Javascript原型链及instanceof原理详解
May 25 Javascript
js实现拖拽与碰撞检测
Sep 18 Javascript
JS绘图Flot应用图形绘制异常解决方案
Oct 16 Javascript
延时加载JavaScript代码提高速度
Dec 27 #Javascript
AngularJS使用ngMessages进行表单验证
Dec 27 #Javascript
详解maxlength属性在textarea里奇怪的表现
Dec 27 #Javascript
SublimeText自带格式化代码功能之reindent
Dec 27 #Javascript
Javascript removeChild()删除节点及删除子节点的方法
Dec 27 #Javascript
JavaScript的removeChild()函数用法详解
Dec 27 #Javascript
JavaScript构造函数详解
Dec 27 #Javascript
You might like
PHP实现的比较完善的购物车类
2014/12/02 PHP
CI框架简单邮件发送类实例
2016/05/18 PHP
php 微信开发获取用户信息如何实现
2016/12/13 PHP
php获取'/'传参的值简单方法
2017/07/13 PHP
PHP实现类似于C语言的文件读取及解析功能
2017/09/01 PHP
PHP长网址与短网址的实现方法
2017/10/13 PHP
php-fpm中max_children的配置
2019/03/15 PHP
JavaScript 滚轮事件使用说明
2010/03/07 Javascript
JavaScript将数字转换成大写中文的方法
2015/03/23 Javascript
实现前后端数据交互方法汇总
2015/04/07 Javascript
node.js入门实例helloworld详解
2015/12/23 Javascript
强大的 Angular 表单验证功能详细介绍
2017/05/23 Javascript
Angular 4依赖注入学习教程之组件服务注入(二)
2017/06/04 Javascript
详解Angular系列之变化检测(Change Detection)
2018/02/26 Javascript
解决eclipse中没有js代码提示的问题
2018/10/10 Javascript
图文讲解vue的v-if使用方法
2019/02/11 Javascript
vue使用vue-quill-editor富文本编辑器且将图片上传到服务器的功能
2021/01/13 Vue.js
[01:09]DOTAPLUS——DOTA2的新时代
2018/04/04 DOTA
粗略分析Python中的内存泄漏
2015/04/23 Python
Python 使用类写装饰器的小技巧
2018/09/30 Python
Python中的函数式编程:不可变的数据结构
2018/10/08 Python
Python设计模式之享元模式原理与用法实例分析
2019/01/11 Python
python实现视频读取和转化图片
2019/12/10 Python
python基于plotly实现画饼状图代码实例
2019/12/16 Python
Python读取VOC中的xml目标框实例
2020/03/10 Python
使用pytorch 筛选出一定范围的值
2020/06/28 Python
零基础学Python之前需要学c语言吗
2020/07/21 Python
Python 解析简单的XML数据
2020/07/24 Python
python实现取余操作的简单实例
2020/08/16 Python
W3C公布最新的HTML5标准草案
2008/10/17 HTML / CSS
幼师专业毕业生自荐信
2013/09/29 职场文书
财务总监管理岗位职责
2014/03/08 职场文书
教堂婚礼主持词
2014/03/14 职场文书
服务员岗位职责范本
2015/04/09 职场文书
硕士毕业答辩开场白
2015/05/27 职场文书
Redis延迟队列和分布式延迟队列的简答实现
2021/05/13 Redis