【angularjs表单验证】AngularJS使用angular-formly进行表单验证-用angularjs验证表单-angular_formly

欢迎您访问我爱IT技术网，今天小编为你分享的javascript教程：【AngularJS使用angular-formly进行表单验证】，下面是详细的讲解！

AngularJS使用angular-formly进行表单验证

(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进行表单验证的用户互动如下：

　　相关问题：用angularjs表单验证怎么写

　　答：客户端表单验证是AngularJS里面最酷的功能之一。 AngularJS表单验证可以让你从一开始就写出一个具有交互性和可相应的现代HTML5表单。 在AngularJS中，有许多表单验证指令。 在这里，我们将谈谈几个最流行指令，然后我们将讨论如何编写自定义的验... >>详细

　　相关问题：angularjs 表单验证 提示 文本框怎么没有红的

　　答：客户端表单验证是AngularJS里面最酷的功能之一。 AngularJS表单验证可以让你从一开始就写出一个具有交互性和可相应的现代HTML5表单。 在AngularJS中，有许多表单验证指令。 在这里，我们将谈谈几个最流行指令，然后我们将讨论如何编写自定义的验... >>详细

　　相关问题：angularjs 获取表单值问题

　　答：.controller('registeredMobileCtrl', ['$scope','$log',function ($scope,$log) { $scope.mobile = ""; $scope.VerifyCode = ""; $scope.getVerifyCode = function () { $log.info('控制台输出号码',$scope.mobile); }])//不要使用console输出... >>详细