AngularJS使用angular-formly进行表单验证
当验证表单中有很多字段时，这时候可能希望把html的生成以及验证逻辑放到controller中，在页面，也许是这样的：
<some-formfiedls="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){
varvalue=$modelValue||$viewValue;
if(value){
returnvalidateDriversLicence(value);
}
},
expressionProperties:{
'templateOptions.disabled':function($viewValue,$modelValue,scope){
if(scope.model.province=='山东省'){
returnfalse;
}
returntrue;
}
}
}
首先安装：npminstallangular-formlyangular-formly-templates-bootstrapbootstrapapi-check
Demo的文件结构：
css/
.....style.css
node_modules/
scripts/
.....MainController.js
.....provinces.js[提供select的选项，有关省]
app.js
index.html
index.html
<!DOCTYPEhtml> <htmllang="en"> <head> <metacharset="gb2312"> <title></title> <linkrel="stylesheet"href="css/style.css"/> <linkrel="stylesheet"href="node_modules/bootstrap/dist/css/bootstrap.min.css"/> </head> <bodyng-app="formlyApp"ng-controller="MainControllerasvm"> <divclass="containercol-md-4col-md-offset-4"> <formnovalidate> <formly-formmodel="vm.rental"fields="vm.rentalFields"form="vm.rentalForm"> <buttontype="submit"class="btnbtn-primary"ng-disabled="vm.rentalForm.$invalid">提交</button> </formly-form> </form> </div> <!--项目依赖--> <scriptsrc="node_modules/api-check/dist/api-check.js"></script> <scriptsrc="node_modules/angular/angular.min.js"></script> <scriptsrc="node_modules/angular-formly/dist/formly.js"></script> <scriptsrc="node_modules/angular-formly-templates-bootstrap/dist/angular-formly-templates-bootstrap.min.js"></script> <!--项目引用--> <scriptsrc="app.js"></script> <scriptsrc="scripts/MainController.js"></script> <scriptsrc="scripts/province.js"></script> </body> </html>
app.js
(function(){
'usestrict';
angular.module('formlyApp',['formly','formlyBootstrap'])
})();
province.js
以factory的方式返回一个对象，包含获取select选项的方法。
(function(){
'usestrict';
angular
.module('formlyApp')
.factory('province',province);
functionprovince(){
functiongetProvinces(){
return[
{
"name":"山东省",
"value":"山东省"
},
{
"name":"江苏省",
"value":"江苏省"
}
];
}
return{
getProvinces:getProvinces
}
}
})();
MainController.js
(function(){
'usestrict';
angular
.module('formlyApp')
.controller('MainController',MainController);
functionMainController(province){
varvm=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){
varvalue=$modelValue||$viewValue;
if(value){
returnvalidateDriversLicence(value);
}
},
expressionProperties:{
'templateOptions.disabled':function($viewValue,$modelValue,scope){
if(scope.model.province=='山东省'){
returnfalse;
}
returntrue;
}
}
}
},
{
key:'insurance',
type:'input',
templateOptions:{
label:'保险',
placeholder:'输入保险'
},
hideExpression:'!model.under18||!model.province'
}
];
functionvalidateDriversLicence(value){
return/[A-Za-z]\d{4}[\s|\-]*\d{5}[\s|\-]*\d{5}$/.test(value);
}
}
})();
以上内容是小编给大家分享的AngularJS使用angular-formly进行表单验证的全部叙述，希望大家喜欢。