ASP.NET provides a wealth of data validation controls, but this validation function must be used in server controls; it is not very convenient to use when compounding validation data (although drag-and-drop controls are very convenient, the number of drag-and-drops and setting related properties increase. becomes very troublesome). In order to realize the verification function more conveniently and flexibly, I used JQuery to write a simple verification component. When using it, you only need to briefly describe the verification rules, and you don’t need to write a JavaScript to realize the function of the ASP.NET verification control ( Of course, the page must introduce relevant JavaScript files).
Functional goals
Describe specific verification functions through simple custom attribute values, and automatically block and execute the verification function when the Form is submitted. Submit if all members are successfully verified, otherwise cancel the submission.
Simple description of use:
"Text1" type="text" validator="type:string;nonnull:true;tip:Please enter your username!;tipcontrol:nametip" /> validator="type:date;nonnull:true;tip:Please enter the correct date of birth!;tipcontrol:birthtip;min:1950-1-1;max:2000-1-1" />
Display error information through alert and custom area.
// JScript 文件
//
//type:int|number|date|string
//nonnull:true|false
//regex:^[- ]?d $
//min:0
//max:999999999
//campare:id
//comparetype:eq,neq,leq,req,le,ri
//tipcontrol:
//tip:
// var ErrorMessage;
function FormValidate(form)
{
ErrorMessage='';
var legality,items;
legality = true;
items = $(form).find("input[@validator]");
for(var i =0;i< items.length;i )
{
if(legality)
{
legality = OnItemValidator($(items[i]));
}
else
{
OnItemValidator($(items[i]));
}
}
items = $(form).find("textarea[@validator]");
for(var i =0;i< items.length;i )
{
if(legality)
{
legality = OnItemValidator($(items[i]));
}
else
{
OnItemValidator($(items[i]));
}
}
items = $(form).find("select[@validator]");
for(var i =0;i< items.length;i )
{
if(legality)
{
legality = OnItemValidator($(items[i]));
}
else
{
OnItemValidator($(items[i]));
}
}
if(!legality)
{
if(ErrorMessage !='')
alert(ErrorMessage);
}
return legality;
}
function CreateValObject(validator)
{
var valobj = { type:'string',
nonnull:false,
regex:null,
min:null,
max:null,
campare:null,
comparetype:null,
tipcontrol:null,
tip:null};
var properties;
var execute;
var namevalue;
properties = validator.split(';');
for(i=0;i
{
namevalue = properties[i].split(':');
execute ="valobj." namevalue[0] '='' namevalue[1] '';';
eval(execute);
}
return valobj;
}
function OnItemValidator(control)
{
var regex,maxvalue,minvalue,cvalue;
var valobj = CreateValObject(control.attr('validator'));
var value = control.val();
value = ValidatorConvert(value,valobj.type);
if(valobj.nonnull=="true")
{
if(value == null || value=="")
{
ValidatorError(valobj);
return false;
}
}
else
{
if(value == null || value=="")
return true;
}
if(valobj.regex != null)
{
regex =new RegExp(valobj.regex);
if(value.match(regex) == null)
{
ValidatorError(valobj);
return false;
}
}
if(valobj.min != null)
{
minvalue = ValidatorConvert(valobj.min,valobj.type);
if(!CompareValue(value,minvalue,"req"))
{
ValidatorError(valobj);
return false;
}
}
if(valobj.max != null)
{
maxvalue = ValidatorConvert(valobj.max,valobj.type);
if(!CompareValue(value,maxvalue,"leq"))
{
ValidatorError(valobj);
return false;
}
}
if(valobj.campare != null)
{
cvalue = $('#' valobj.campare).val();
cvalue = ValidatorConvert(cvalue,valobj.type);
if(!CompareValue(value,cvalue,valobj.comparetype))
{
ValidatorError(valobj);
return false;
}
}
return true;
}
function ValidatorError(valobj)
{
if(valobj.tipcontrol != null)
showTip($("#" valobj.tipcontrol));
else
{
if(ErrorMessage !='')
ErrorMessage = 'n';
ErrorMessage = valobj.tip;
}
}
function CompareValue(leftvalue,rightvalue,compareType)
{
if(leftvalue == null || rightvalue == null)
return false;
if(compareType=="eq")
{
return leftvalue == rightvalue;
}
else if(compareType =="neq")
{
return leftvalue != rightvalue;
}
else if(compareType =="le")
{
return leftvalue < rightvalue;
}
else if(compareType =="leq")
{
return leftvalue <= rightvalue;
}
else if(compareType =="ri")
{
return leftvalue > rightvalue;
}
else if(compareType =="req")
{
return leftvalue >= rightvalue;
}
else
{
return false;
}
}
function showTip(control)
{
if(control.attr('show') != 'on')
{
control.fadeIn("slow");
control.attr('show','on');
}
}
function hideTip(control)
{
control.hide();
control.attr('show','');
}
function ValidatorConvert(value, dataType) {
var num,exp,m;
var year,month,day
if(value == null || value =="")
return null;
if(dataType=="int")
{
exp=/^[- ]?d $/;
if (value.match(exp) == null)
return null;
num = parseInt(value, 10);
return (isNaN(num) ? null : num);
}
else if(dataType =="number")
{
exp=/^[- ]?((d )|(d .d ))$/;
if (value.match(exp) == null)
return null;
num = parseFloat(value);
return (isNaN(num) ? null : num);
}
else if(dataType =="date")
{
exp=/^(d{4})([-/]?)(d{1,2})([-/]?)(d{1,2})$/
m = value.match(exp);
if (m == null)
{
exp=/^(d{1,2})([-/]?)(d{1,2})([-/]?)(d{4})$/
m = value.match(exp);
if(m== null)
return null;
year = m[5];
month = m[1];
day =m[3];
}
else
{
year = m[1];
month =m[3];
day = m[5];
}
try
{
num = new Date(year,month,day);
}
catch(e)
{
return null;
}
return num;
}
else
{
return value.toString();
}
}
$(document).ready(
function(){
$("[@validator]").each(function(i)
{
var valobj = CreateValObject($(this).attr('validator'));
if(valobj.tipcontrol !=null)
{
$('#' valobj.tipcontrol).addClass('ErrorTip');
hideTip($('#' valobj.tipcontrol));
$("#" valobj.tipcontrol).html("" valobj.tip "");
}
$(this).change(function(){
if(OnItemValidator($(this)))
{
if(valobj.tipcontrol !=null)
{
hideTip($('#' valobj.tipcontrol));
}
}
else
{
if(valobj.tipcontrol !=null)
{
showTip($('#' valobj.tipcontrol));
}
}
});
}
);
$("form").each(function(id)
{
$(this).submit(function(){return FormValidate(this)});
}
);
}
);
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
