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:radixif (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:radixif (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:radixif (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');})})

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

vue树形结构html,怎么在vue中利用递归组件实现一个树形控件
怎么在vue中利用递归组件实现一个树形控件发布时间:2021-06-11 17:26:48 来源:亿速云阅读:81 作者:Leah 本篇文章为大家展示了怎么在vue中利用递归组件实现一个树形控件, ...
自定义控件：属性为控件需要注意的地方
如果属性为string.int等类,属性在设计时修改,运行时会保存. 如果属性为控件时,如Label,属性在设计时修改控件的属性,运行时会还原,这时可以通过添加 DesignerSerializati ...
BCGControlBar Pro for MFC v13.3现已发布：着重改进图表、属性/编辑控件等，打造全面、易上手的MFC库
亲爱的BCGSoft用户,我们非常高兴地宣布BCGControlBar Professional for MFC v31.3正式发布啦! BCGControlBar Pro for MFC v31.3 ...
Html学习：基础属性和控件
Html学习:第一课 html基础属性和控件 HTML代表超文本标记语言 HTML 是用于创建网页的标准标记语言 HTML 描述网页的结构 HTML由一系列元素组成 HTML 元素告诉浏览器如何显示内 ...
属性浏览器控件QtTreePropertyBrowser编译成动态库(设计师插件)
文章目录一.回顾二.动态库编译 1.命令行编译动态库和测试程序 2.vs工具编译动态库和测试程序 3.安装文档 4.测试文档三.设计师插件编译 1.重写QDesignerCustomWidget ...
WPF中通过控件Margin属性设置控件位置
WPF中通过控件Margin属性设置控件位置一.Margin属性简介二.Margin在cs文件中定义三.Margin设置控件位置四.参考文档一.Margin属性简介在使用WPF进行页面设计 ...
RegularExpressionValidator控件与常用验证正则表达式大全小结
分类: .NET控件研究 ASP.NET网站开发 ASP.NET报表 Asp.Net 2.0网站开发 ASP.NET AJAX 2010-07-16 17:21 134人阅读评论(0) 收藏举报 ...
服务端控件要注意验证控件的关联事件CausesValidation
在一个网页中如果含有验证控件,在设定Button,LinkButton等具有提交表单功能的服务端验证空间时,要注意该控件的CausesValidation属性.该属性有两个值True和False,当为 ...
Web网络编程第一次试验：ASP.NET4.5标准控件和窗体验证
Web网络编程第一次试验:ASP.NET4.5标准控件和窗体验证前言一.实验目的二.实验环境三.实验内容四.代码及截图五.实验总结前言为了帮助同学们完成痛苦的实验课程设计,本作者将其作 ...

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

总体描述

数据源

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

最新文章

热门文章