AngularJS使用angular-formly进行表单验证
程序员文章站
2023-01-30 21:42:50
当验证表单中有很多字段时，这时候可能希望把html的生成以及验证逻辑放到controller中，在页面，也许是这样的：
当验证表单中有很多字段时，这时候可能希望把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进行表单验证的全部叙述，希望大家喜欢。