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常用运算符(Operators)-javascript基础教程
Dec 14 Javascript
Dom与浏览器兼容性说明
Oct 25 Javascript
分享8款优秀的 jQuery 加载动画和进度条插件
Oct 24 Javascript
jQuery ui实现动感的圆角渐变网站导航菜单效果代码
Aug 26 Javascript
解决Window10系统下Node安装报错的问题分析
Dec 13 Javascript
JavaScript实现数值自动增加动画
Dec 28 Javascript
使用express搭建一个简单的查询服务器的方法
Feb 09 Javascript
AngularJS下$http服务Post方法传递json参数的实例
Mar 29 Javascript
解决vue-cli项目打包出现空白页和路径错误的问题
Sep 04 Javascript
layer弹出层倒计时关闭的实现方法
Sep 27 Javascript
Vue3 中的数据侦测的实现
Oct 09 Javascript
JavaScript回调函数callback用法解析
Jan 14 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学习笔记(三)操作符与控制结构
2011/08/06 PHP
APACHE的AcceptPathInfo指令使用介绍
2013/01/18 PHP
php使用mysqli向数据库添加数据的方法
2015/03/20 PHP
js open() 与showModalDialog()方法使用介绍
2013/09/10 Javascript
js实现简单的星级选择器提交效果适用于评论等
2013/10/18 Javascript
jQuery中ajax的post()方法用法实例
2014/12/26 Javascript
JavaScript DOM基础
2015/04/13 Javascript
jQuery form插件之ajaxForm()和ajaxSubmit()的可选参数项对象
2016/01/23 Javascript
AngularJS表单基本操作
2017/01/09 Javascript
JS实现AES加密并与PHP互通的方法分析
2017/04/19 Javascript
Angular中使用better-scroll插件的方法
2018/03/27 Javascript
使用vue实现多规格选择实例(SKU)
2019/08/23 Javascript
Python使用htpasswd实现基本认证授权的例子
2014/06/10 Python
Python算法之栈(stack)的实现
2014/08/18 Python
python 读取摄像头数据并保存的实例
2018/08/03 Python
python绘制散点图并标记序号的方法
2018/12/11 Python
通过字符串导入 Python 模块的方法详解
2019/10/27 Python
Python字典底层实现原理详解
2019/12/18 Python
python数据库操作mysql:pymysql、sqlalchemy常见用法详解
2020/03/30 Python
python输出国际象棋棋盘的实例分享
2020/11/26 Python
tensorflow2.0教程之Keras快速入门
2021/02/20 Python
Troy-Bilt官网:草坪割草机、吹雪机、分蘖机等
2019/02/19 全球购物
巴西一家专门从事家居和装饰的连锁店:Camicado
2019/08/14 全球购物
大唐电信科技股份有限公司java工程师面试经历
2016/12/09 面试题
Tomcat中怎么使用log4j输出所有的log
2016/07/07 面试题
ajax是什么及其工作原理
2012/02/08 面试题
测量实习生自我鉴定
2013/09/19 职场文书
大专自我鉴定范文
2013/10/23 职场文书
大学生职业生涯规划范文
2014/01/22 职场文书
认购协议书范本
2014/04/22 职场文书
白岩松演讲
2014/05/21 职场文书
2014法制宣传日活动总结
2014/07/09 职场文书
大学生党员自我评价
2015/03/04 职场文书
2015年工商局个人工作总结
2015/07/23 职场文书
SpringBoot+VUE实现数据表格的实战
2021/08/02 Java/Android
Python matplotlib安装以及实现简单曲线的绘制
2022/04/26 Python