AJ5利用数据源的validation属性对控件进行validation验证

总体描述

一个返回过来的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');
  })
  })