总体描述
一个返回过来的json格式的数据,里面含有validation属性,利用x-adpter-id和x-field-name来确定控件使用的是哪种validation。使用Angular5,需要用到boostrap4
数据源
数据源写成了一个ts文件,以后可以从后台获取
// tslint:disable-next-line:eofline
export const returnjson = {"status":"","errorCode":"","data":{"page":{'viewName':'View1',"viewData":{"viewName":"View1","adpIds":[49,50,51,198,200,47,206,209,211],"isDefault":true},"adapters":[{"adpId":49,"parentId":-1,"keyName":"UniversityID","foreignKey":"-1","parentKey":"-1","stringForeignKey":false,"stringKey": false,'pageSize':3,'kendoDataSource':{'keyName':'UniversityID','adpId': 49,'schema':{'model':{'id':'UniversityID','fields':[{'name':'UniversityID','type':'number'},{'name':'UniversityName','type':'string','validation':{'required':{'ruleName':'required','errorMessage':'WebSite is required.','rule':null},'maxlength':{'ruleName':'maxlength','errorMessage':'Please enter no more than 50 characters.','rule':'50'},'minlength':{'ruleName':'minlength','errorMessage':'Please enter at least 5 characters.','rule':'5'}}},{'name':'Location','type':'string','validation':{'required':{'ruleName':'required','errorMessage':'This field is required.','rule':null}}},{'name':'WebSite','type':'string','validation':{'url':{'ruleName':'url','errorMessage':'This field is not a valid fully-qualified http, https, or ftp Url.','rule':null}}},{'name':'Created','type':'date','validation':{'required':{'ruleName':'required','errorMessage':'This field is required.','rule':null},'date':{'ruleName':'date','errorMessage':'Please enter a valid date.','rule':null}}},{'name':'Level','type':'number','validation':{'min':{'ruleName':'min','errorMessage':'Please enter a value greater than or equal to 2.','rule':'2'},'max':{'ruleName':'max','errorMessage':'Please enter a value less than or equal to 5.','rule':'5'}}}]}}}},{'adpId':50,'parentId':49,'keyName':'CollegeID','foreignKey':'UniversityID','parentKey':'UniversityID','stringForeignKey':false,'stringKey':false,'pageSize':0,'kendoDataSource':{'keyName':'CollegeID','adpId':50,'schema':{'model':{'id':'CollegeID','fields':[{'name':'CollegeID','type':'number'},{'name':'UniversityID','type':'string','validation':{'number':{'ruleName':'number','errorMessage':'Please enter a valid number.','rule':null}}},{'name':'Description','type':'string'},{'name':'ActivityNumber','type':'string'},{'name':'ApplicationID','type':'string'}]}}}},{'adpId':51,'parentId':50,'keyName':'ID','foreignKey':'CollegeID','parentKey':'CollegeID','stringForeignKey':false,'stringKey':false,'pageSize':5,'kendoDataSource':{'keyName':'ID','adpId':51,'schema':{'model':{'id':'ID','fields':[{'name':'DepartmentID','type':'number'},{'name':'CollegeID','type':'string'},{'name':'DepartmentName','type':'string'},{'name':'ID','type':'string'}]}}}},{'adpId':198,'parentId':-1,'keyName':'QuestionKey','foreignKey':'','parentKey':'','stringForeignKey':true,'stringKey':true,'pageSize':100,'kendoDataSource':{'keyName':'QuestionKey','adpId':198,'schema':{'model':{'id':'QuestionKey','fields':[{'name':'Caption','type':'string'},{'name':'Answer','type':'string'},{'name':'GroupName','type':'string'},{'name':'Comment','type':'string'},{'name':'Required','type':'bool'},{'name':'Code','type':'string'},{'name':'MultiAnswer','type':'string'},{'name':'MASK','type':'string'},{'name':'Type','type':'string'},{'name':'QuestionOrder','type':'number'},{'name':'QuestionKey','type':'string'},{'name':'QuestionListKey','type':'string'},{'name':'QueryFieldName','type':'string'},{'name':'ActivityDetailsNumber','type':'string'}]}}}},{'adpId':200,'parentId':-1,'keyName':'AnswerKey','foreignKey':'','parentKey':'','stringForeignKey':true,'stringKey':true,'pageSize':100,'kendoDataSource':{'keyName':'AnswerKey','adpId':200,'schema':{'model':{'id':'AnswerKey','fields':[{'name':'Content','type':'string'},{'name':'JumpTo','type':'string'},{'name':'CommentRequired','type':'bool'},{'name':'AnswerType','type':'string'},{'name':'QuestionKey','type':'string'},{'name':'AnswerKey','type':'string'},{'name':'Sys','type':'bool'},{'name':'AnswerOrder','type':'number'}]}}}},{'adpId':47,'parentId':-1,'keyName':'AnswerKey','foreignKey':'','parentKey':'','stringForeignKey':true,'stringKey':true,'pageSize':3,'kendoDataSource':{'keyName':'AnswerKey','adpId':47,'schema':{'model':{'id':'AnswerKey','fields':[{'name':'Content','type':'string'},{'name':'JumpTo','type':'string'},{'name':'CommentRequired','type':'bool'},{'name':'AnswerType','type':'string'},{'name':'QuestionKey','type':'string'},{'name':'AnswerKey','type':'string'},{'name':'Sys','type':'bool'},{'name':'AnswerOrder','type':'number'}]}}}},{'adpId':206,'parentId':-1,'keyName':'AnswerKey','foreignKey':'','parentKey':'','stringForeignKey':true,'stringKey':true,'pageSize':3,'kendoDataSource':{'keyName':'AnswerKey','adpId':206,'schema':{'model':{'id':'AnswerKey','fields':[{'name':'Content','type':'string'},{'name':'JumpTo','type':'string'},{'name':'CommentRequired','type':'bool'},{'name':'AnswerType','type':'string'},{'name':'QuestionKey','type':'string'},{'name':'AnswerKey','type':'string'},{'name':'Sys','type':'bool'},{'name':'AnswerOrder','type':'number'}]}}}},{'adpId':209,'parentId':-1,'keyName':'DocumentID','foreignKey':'','parentKey':'','stringForeignKey':false,'stringKey':true,'pageSize':0,'kendoDataSource':{'keyName':'DocumentID','adpId':209,'schema':{'model':{'id':'DocumentID','fields':[{'name':'DocumentName','type':'string'},{'name':'DocumentID','type':'string'}]}}}},{'adpId':211,'parentId':49,'keyName':'CollegeID','foreignKey':'UniversityID','parentKey':'UniversityID','stringForeignKey':false,'stringKey':false,'pageSize':0,'kendoDataSource':{'keyName':'CollegeID','adpId':211,'schema':{'model':{'id':'CollegeID','fields':[{'name':'CollegeID','type':'number'},{'name':'UniversityID','type':'string'},{'name':'Description','type':'string'},{'name':'ActivityNumber','type':'string'},{'name':'ApplicationID','type':'string'}]}}}}],'error':null,'viewMode':0,'masterAdpId':49,'enableDataNavigation':1,'showPrintButton':1,'showTicketButton':1,'showCalendarButton':1,'childViews':[],'pageTitleSetting':[],'pageStatusSetting':[{'adpId':49,'fieldName':'UniversityName','defaultValue':'','format':'University:{0}'},{'adpId':50,'fieldName':'Location','defaultValue':'','format':'Location:{0}'},{'adpId':51,'fieldName':'DepartmentName','defaultValue':'','format':'Department:{0}'},{'adpId':-1,'fieldName':'','defaultValue':'','format':'{0}'}],'pageTitleSeparator':'|','pageDefaultTitle':null,'pageHelp':'','pageHelpVideo':null},'control':{'controlEvent':[{'controlName':'Button_1','event':'Click','eOrder':1,'before':true,'parameter':'<x></x>','id':7,'type':'Control','focusControlName':null},{'controlName':'btnPre','event':'Click','eOrder':1,'before':true,'parameter':'<x></x>','id':8,'type':'Control','focusControlName':null},{'controlName':'btnLast','event':'Click','eOrder':1,'before':true,'parameter':'<x></x>','id':9,'type':'Control','focusControlName':null},{'controlName':'ttt_','event':'CustomTextChanged','eOrder':1,'before':true,'parameter':'<x></x>','id':10,'type':'Control','focusControlName':null},{'controlName':'Page','event':'AfterPageChanged','eOrder':1,'before':true,'parameter':'<x></x>','id':16,'type':'Page','focusControlName':null},{'controlName':'Page','event':'BeforeRefreshDataSources','eOrder':0,'before':true,'parameter':'<x></x>','id':17,'type':'Page','focusControlName':null},{'controlName':'Page','event':'AfterRefreshDataSources','eOrder':1,'before':true,'parameter':'<x></x>','id':18,'type':'Page','focusControlName':null},{'controlName':'Page','event':'BeforePageChanging','eOrder':1,'before':true,'parameter':'<x></x>','id':19,'type':'Page','focusControlName':null},{'controlName':'Page','event':'AdapterStatusChanged','eOrder':1,'before':true,'parameter':'<x></x>','id':20,'type':'Page','focusControlName':null},{'controlName':'Page','event':'DataSourceDirtyChanged','eOrder':1,'before':true,'parameter':'<x></x>','id':21,'type':'Page','focusControlName':null},{'controlName':'Page','event':'AfterMenuClick','eOrder':1,'before':true,'parameter':'<x></x>','id':22,'type':'Page','focusControlName':null},{'controlName':'Page','event':'BeforeRefreshDataSources','eOrder':1,'before':true,'parameter':'<x></x>','id':23,'type':'Page','focusControlName':null},{'controlName':'tg1','event':'Sorted','eOrder':0,'before':true,'parameter':'<x></x>','id':25,'type':'Control','focusControlName':null}],'controlGroup':[],'controlPermission':[]},'dropDown':[{'ID':13,'Class':'SM','ItemValue':'System','ItemText':'System','IsDefault':false,'IsNumeric':false,'ItemOrder':1},{'ID':14,'Class':'SM','ItemValue':'Region','ItemText':'Region','IsDefault':true,'IsNumeric':false,'ItemOrder':2},{'ID':15,'Class':'SM','ItemValue':'Organization','ItemText':'Organization','IsDefault':false,'IsNumeric':false,'ItemOrder':3},{'ID':18,'Class':'DS','ItemValue':'Organization','ItemText':'Organization','IsDefault':false,'IsNumeric':false,'ItemOrder':3},{'ID':19,'Class':'DS','ItemValue':'Group','ItemText':'Group','IsDefault':false,'IsNumeric':false,'ItemOrder':4},{'ID':16,'Class':'SM','ItemValue':'Group','ItemText':'Group','IsDefault':false,'IsNumeric':false,'ItemOrder':4},{'ID':17,'Class':'SM','ItemValue':'Private','ItemText':'Private','IsDefault':false,'IsNumeric':false,'ItemOrder':5},{'ID':20,'Class':'DS','ItemValue':'Private','ItemText':'Private','IsDefault':false,'IsNumeric':false,'ItemOrder':5}]},'dataset': []};
validationtest.coponent.ts
import { Component, OnInit } from '@angular/core';
import { returnjson } from './getdata';
import * as $ from 'jquery';
import { AfterViewInit } from '@angular/core/src/metadata/lifecycle_hooks';
import { isNumber } from 'util';
@Component({
selector: 'app-validationtest',
templateUrl: './validationtest.component.html',
styleUrls: ['./validationtest.component.css']
})
export class ValidationtestComponent implements OnInit, AfterViewInit {
private getdata = returnjson;
constructor() { }
ngOnInit() {
}
ngAfterViewInit(): void {
// min 在 max 之前
const NeedData = this.getdata.data.page.adapters;
$('.x-textbox').change(function(){
const id = $(this).attr('x-adapter-id');
const getvalue = $(this).val();
const name = $(this).attr('x-field-name');
let item;
let ValidationData;
for (let i = 0; i < NeedData.length; i++) {
if (NeedData[i].adpId.toString() === id) {
item = NeedData[i];
}
}
item = item.kendoDataSource.schema.model.fields;
for (let i = 0; i < item.length; i++) {
if (item[i].name === name) {
ValidationData = item[i];
}
}
ValidationData = ValidationData.validation;
console.log(ValidationData);
console.log(getvalue.toString().length);
// -------------------------------------------------------------------------------------------------------------
// required id=49 name=UniversityName
// -------------------------------------------------------------------------------------------------------------
if (ValidationData.required !== undefined) {
if (getvalue.toString().length === 0) {
$(this).attr('data-content', ValidationData.required.errorMessage);
$(this).addClass('kendo-x-invalldation');
return;
} else {
$(this).attr('data-content', '');
$(this).removeClass('kendo-x-invalldation');
}
}
// -------------------------------------------------------------------------------------------------------------
// minlength id = 49 name=UniversityName
// -------------------------------------------------------------------------------------------------------------
if (ValidationData.minlength !== undefined) {
// tslint:disable-next-line:radix
if (getvalue.toString().length < parseInt(ValidationData.minlength.rule)) {
$(this).attr('data-content', ValidationData.minlength.errorMessage);
$(this).addClass('kendo-x-invalldation');
return;
} else {
$(this).attr('data-content', '');
$(this).removeClass('kendo-x-invalldation');
}
}
// -------------------------------------------------------------------------------------------------------------
// maxlength
// -------------------------------------------------------------------------------------------------------------
if (ValidationData.maxlength !== undefined) {
// tslint:disable-next-line:radix
if (getvalue.toString().length > parseInt(ValidationData.maxlength.rule)) {
$(this).attr('data-content', ValidationData.maxlength.errorMessage);
$(this).addClass('kendo-x-invalldation');
return;
} else {
$(this).attr('data-content', '');
$(this).removeClass('kendo-x-invalldation');
}
}
// -------------------------------------------------------------------------------------------------------------
// url id=49 name=WebSite
// -------------------------------------------------------------------------------------------------------------
if (ValidationData.url !== undefined) {
const Reg = /^([wW]{0,3}\.[\w]+\.[\w]{0,5}|[w]{0})$/;
if (!Reg.test(getvalue.toString())) {
$(this).attr('data-content', ValidationData.url.errorMessage);
$(this).addClass('kendo-x-invalldation');
return;
} else {
$(this).attr('data-content', '');
$(this).removeClass('kendo-x-invalldation');
}
}
// -------------------------------------------------------------------------------------------------------------
// date id=49 name=Created
// m/d/yyyy h:mm tt.
// -------------------------------------------------------------------------------------------------------------
if (ValidationData.date !== undefined) {
const Reg = /^[\d]{1,2}\/[\d]{1,2}\/[\d]{4}[\s]{1}[\d]{1,2}[\72]{1}[\d]{2}[\s]{1}(AM|PM)$/;
if (!Reg.test(getvalue.toString())) {
$(this).attr('data-content', ValidationData.date.errorMessage);
$(this).addClass('kendo-x-invalldation');
return;
} else {
$(this).attr('data-content', '');
$(this).removeClass('kendo-x-invalldation');
}
}
// -------------------------------------------------------------------------------------------------------------
// min id=49 name=Level
// -------------------------------------------------------------------------------------------------------------
if (ValidationData.min !== undefined) {
// tslint:disable-next-line:radix
if (getvalue < parseInt(ValidationData.min.rule) && getvalue.toString().length > 0) {
$(this).attr('data-content', ValidationData.min.errorMessage);
$(this).addClass('kendo-x-invalldation');
return;
} else {
$(this).attr('data-content', '');
$(this).removeClass('kendo-x-invalldation');
}
}
// -------------------------------------------------------------------------------------------------------------
// max
// -------------------------------------------------------------------------------------------------------------
if (ValidationData.max !== undefined) {
// tslint:disable-next-line:radix
if (getvalue > parseInt(ValidationData.max.rule) && getvalue.toString().length > 0) {
$(this).attr('data-content', ValidationData.max.errorMessage);
$(this).addClass('kendo-x-invalldation');
return;
} else {
$(this).attr('data-content', '');
$(this).removeClass('kendo-x-invalldation');
}
}
// -------------------------------------------------------------------------------------------------------------
// number id=50 name=UniversityID
// -------------------------------------------------------------------------------------------------------------
if (ValidationData.number !== undefined) {
const Reg = /^[\d]*$/;
console.log(Reg.test(getvalue.toString()));
if (!Reg.test(getvalue.toString())) {
$(this).attr('data-content', ValidationData.number.errorMessage);
$(this).addClass('kendo-x-invalldation');
return;
} else {
$(this).removeClass('kendo-x-invalldation');
$(this).attr('data-content', '');
}
}
}); // change 结尾
}
}
validation.component.html
<div style="margin:20px auto;width:500px;height:500px;">
MAX:MIN: <input x-adapter-id ="49" x-field-name="Level" class="x-textbox"
type="text" data-toggle="popover" data-placement="right" data-content="">
<br>
url:
<input x-adapter-id ="49" x-field-name="WebSite" class="x-textbox"
type="text" data-toggle="popover" data-placement="right" data-content="">
<br>
date:required:
<input x-adapter-id ="49" x-field-name="Created" class="x-textbox"
type="text" data-toggle="popover" data-placement="right" data-content="">
<br>
required:maxlength:minlength
<input x-adapter-id ="49" x-field-name="UniversityName" class="x-textbox"
type="text" data-toggle="popover" data-placement="right" data-content="">
<br>
number:
<input x-adapter-id ="50" x-field-name="UniversityID" class="x-textbox"
type="text" data-toggle="popover" data-placement="right" data-content="">
<br>
</div>
index.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Cryptojstest</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
<link rel="stylesheet" href="assets/css/bootstrap.min.css">
</head>
<body>
<app-root></app-root>
<script src="assets/js/jquery-3.2.1.slim.min.js"></script>
<script src="assets/js/popper.min.js"></script>
<script src="assets/js/bootstrap.min.js"></script>
<script src="assets/js/showpopver.js">
</script>
</body>
</html>
showpopver.js
$(function () {
// $('[data-toggle="popover"]').popover()
$(".x-textbox").mouseover(function(){
$(this).popover('show');
})
$(".x-textbox").mouseout(function(){
$(this).popover('hide');
})
})