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中的undefined 与 null 的区别  补充篇
Mar 17 Javascript
dtree 网页树状菜单及传递对象集合到js内,动态生成节点
Apr 14 Javascript
jquery实现省市select下拉框的替换(示例代码)
Feb 22 Javascript
js创建对象的区别示例介绍
Jul 24 Javascript
JavaScript中用let语句声明作用域的用法讲解
May 20 Javascript
BootStrap Table对前台页面表格的支持实例讲解
Dec 22 Javascript
thinkphp标签实现bootsrtap轮播carousel实例代码
Feb 19 Javascript
js实现按座位号抽奖
Apr 05 Javascript
JS中判断字符串存在和非空的方法
Sep 12 Javascript
JavaScript中的事件与异常捕获详析
Feb 24 Javascript
详解auto-vue-file:一个自动创建vue组件的包
Apr 26 Javascript
VUE项目中加载已保存的笔记实例方法
Sep 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新手上路(六)
2006/10/09 PHP
PHP 图片上传实现代码 带详细注释
2010/04/29 PHP
破解图片防盗链的代码(asp/php)测试通过
2010/07/02 PHP
跟我学Laravel之请求与输入
2014/10/15 PHP
php微信公众号开发(3)php实现简单微信文本通讯
2016/12/15 PHP
PHP基于socket实现的简单客户端和服务端通讯功能示例
2017/07/10 PHP
改善你的jQuery的25个步骤 千倍级效率提升
2010/02/11 Javascript
JavaScript Distilled 基础知识与函数
2010/04/07 Javascript
网页前端优化之滚动延时加载图片示例
2013/07/13 Javascript
JavaScript中的无阻塞加载性能优化方案
2014/10/10 Javascript
jQuery图片轮播滚动切换代码分享
2020/04/20 Javascript
干货分享:让你分分钟学会javascript闭包
2015/12/25 Javascript
js弹出框、对话框、提示框、弹窗实现方法总结(推荐)
2016/05/31 Javascript
JavaScript中localStorage对象存储方式实例分析
2017/01/12 Javascript
JS正则表达式验证密码格式的集中情况总结
2017/02/23 Javascript
详解cordova打包成webapp的方法
2017/10/18 Javascript
Angular4.0中引入laydate.js日期插件的方法教程
2017/12/25 Javascript
使用vue中的v-for遍历二维数组的方法
2018/03/07 Javascript
Bootstrap table中toolbar新增条件查询及refresh参数使用方法
2018/05/18 Javascript
vue中组件的3种使用方式详解
2019/03/23 Javascript
Node.js利用Express实现用户注册登陆功能(推荐)
2020/10/26 Javascript
js属性对象的hasOwnProperty方法的使用
2021/02/05 Javascript
Python高效编程技巧
2013/01/07 Python
详解Python中的静态方法与类成员方法
2017/02/28 Python
python爬虫获取淘宝天猫商品详细参数
2020/06/23 Python
全球最大的中文旅行网站:去哪儿网
2017/11/16 全球购物
舞蹈教育学专业推荐信
2013/11/27 职场文书
运动会口号大全
2014/06/07 职场文书
大学生入党积极分子自我评价
2014/09/20 职场文书
学习三严三实心得体会
2014/10/13 职场文书
2015年公务员试用期工作总结
2015/05/28 职场文书
2016年端午节寄语
2015/12/04 职场文书
使用SQL实现车流量的计算的示例代码
2022/02/28 SQL Server
关于的python五子棋的算法
2022/05/02 Python
Java处理延时任务的常用几种解决方案
2022/06/01 Java/Android
JS实现九宫格拼图游戏
2022/06/28 Javascript