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 相关文章推荐
jquery随意添加移除html的实现代码
Jun 21 Javascript
浅谈Javascript事件处理程序的几种方式
Jun 27 Javascript
js根据鼠标移动速度背景图片自动旋转的方法
Feb 28 Javascript
详解Vue 实例中的生命周期钩子
Mar 21 Javascript
详解webpack2+node+react+babel实现热加载(hmr)
Aug 24 Javascript
深入理解vue-router之keep-alive
Aug 31 Javascript
vue进行图片的预加载watch用法实例讲解
Feb 07 Javascript
vue组件中使用props传递数据的实例详解
Apr 08 Javascript
详解组件库的webpack构建速度优化
Jun 18 Javascript
jQuery+ajax实现批量删除功能完整示例
Jun 06 jQuery
JQuery+Bootstrap 自定义全屏Loading插件的示例demo
Jul 03 jQuery
JS前端可扩展的低代码UI框架Sunmao使用详解
Jul 23 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生成带有雪花背景的验证码
2006/10/09 PHP
PHP 杂谈《重构-改善既有代码的设计》之一 重新组织你的函数
2012/04/09 PHP
PHP数组排序函数合集 以及它们之间的联系分析
2013/06/27 PHP
YiiFramework入门知识点总结(图文教程)
2015/12/28 PHP
smarty的section嵌套循环用法示例
2016/05/28 PHP
Yii框架参数配置文件params用法实例分析
2019/09/11 PHP
JavaScript基本对象
2007/01/11 Javascript
js获取提交的字符串的字节数
2009/02/09 Javascript
IE6图片加载的一个BUG解决方法
2010/07/13 Javascript
使用jquery动态加载javascript以减少服务器压力
2012/10/29 Javascript
jquery创建一个新的节点对象(自定义结构/内容)的好方法
2013/01/21 Javascript
JS+CSS制作DIV层可(最小化/拖拽/排序)功能实现代码
2013/02/25 Javascript
jquery each的几种常用的使用方法示例
2014/01/21 Javascript
jQuery中change事件用法实例
2014/12/26 Javascript
jQuery图片轮播滚动切换代码分享
2020/04/20 Javascript
基于javascript实现数字英文验证码
2017/01/25 Javascript
AngularJs定时器$interval 和 $timeout详解
2017/05/25 Javascript
详解vue.js移动端导航navigationbar的封装
2017/07/05 Javascript
使用node打造自己的命令行工具方法教程
2018/03/26 Javascript
vue 表单输入格式化中文输入法异常问题
2018/05/30 Javascript
详解使用Nuxt.js快速搭建服务端渲染(SSR)应用
2019/03/13 Javascript
微信小程序城市选择及搜索功能的方法
2019/03/22 Javascript
python控制台显示时钟的示例
2014/02/24 Python
Python模块的加载讲解
2019/01/15 Python
在django admin中添加自定义视图的例子
2019/07/26 Python
tensorflow下的图片标准化函数per_image_standardization用法
2020/06/30 Python
详解pycharm连接远程linux服务器的虚拟环境的方法
2020/11/13 Python
CSS3悬停效果案例应用
2012/11/21 HTML / CSS
迪卡侬(Decathlon)加拿大官网:源自法国的运动专业超市
2020/11/22 全球购物
史上最全面的Java面试题汇总!
2015/02/03 面试题
主持稿开场白
2015/06/01 职场文书
入党群众意见范文
2015/06/02 职场文书
学校2016年九九重阳节活动总结
2016/04/01 职场文书
GitHub上77.9K的Axios项目有哪些值得借鉴的地方详析
2021/06/15 Javascript
Java工作中实用的代码优化技巧分享
2022/04/21 Java/Android
css弧边选项卡的项目实践
2023/05/07 HTML / CSS