egy lehetséges megoldás:
html:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8"/>
<title>teszt</title>
<style type="text/css">
#fm {width:500px;display:block;float:left;margin:0; padding:0;}
#fm label, #fm input {display:inline;float:left;position:relative;margin:0 0 5px 5px; padding:0;font:normal 12px Verdana;}
#fm label {width:200px; font-weight:700; text-align:right;}
#fm input {width:250px; text-align:left;}
#send {width:60px !important;font-weight:700 !important;text-align:center !important; margin-left:200px !important;}
#log {width:500px;height:100px;display:block;float:left;position:relative;}
</style>
<script src="rule.js" type="text/javascript"></script>
<script type="text/javascript">
myRule = {
first: {
sbj: "nm",
fnc: "nn",
prm: "",
msg: "A név kitöltése kötelező."
},
second: {
sbj: "yr",
fnc: "gt",
prm: 18,
msg: "Csak 18 év felett."
},
third: {
sbj: "yr",
fnc: "lt",
prm: 99,
msg: "Csak 99 év alatt."
},
fifth: {
sbj: "cn",
fnc: "rg",
prm: ["^hu","i"],
msg: "Csak magyar állampolgárok számára."
},
fourth: {
sbj: "cn",
fnc: "nn",
prm: "",
msg: "Az állampolgárság kitöltése kötelező."
}
}
window.onload = function(){
var sn = document.getElementById("send");
var fm = document.getElementById("fm");
var lg = document.getElementById("log");
sn.onclick = function(){
lg.innerHTML = "";
var fc = new formChecker(fm,myRule);
lg.innerHTML += "out: " + fc.out();
}
}
</script>
</head>
<body>
<form id="fm" name="fm" method="post">
<label for="nm">Name</label><input type="text" name="nm" id="nm" class="nm" value="name" />
<label for="yr">Age</label><input type="text" name="yr" id="yr" class="yr" value="age (years)" />
<label for="cn">Country</label><input type="text" name="cn" id="cn" class="cn" value="country (short, i.e. hu or en)" />
<input type="button" name="send" id="send" value="send" />
</form>
<br>
<div id="log"></log>
</body>
</html>
js: (html-ben rule.js-ként hivatkozva)
function gotClass(obj,cl) {
var r = new RegExp("\\b" + cl + "\\b", "i");
var ob = ( typeof(obj) == "object" ) ? obj : $lm(obj);
if ( ob && ob.className && ob.className.match(r) !== null ) return true;
return false;
}
function firstChildofClass(p,cl) {
if (!p || !p.childNodes.length)return;
var ch = p.childNodes;
for ( var i = 0; i < ch.length; i++ ){
if (gotClass(ch[i],cl))return ch[i];
}
return;
}
function $fc(p, cl){
return firstChildofClass(p,cl);
}
function formChecker(fm,rule){
if (!fm) return;
this.fm = fm;
this.rule = rule;
this.res = [];
this.chk = function(){
var r;
for (var i in this.rule){
r = this.rule[i];
if ($fc(this.fm,r.sbj)){
var val = ruleCheck( $fc(this.fm,r.sbj) , r.fnc , r.prm );
if (!val) val = r.msg;
else val = "ok";
document.getElementById("log").innerHTML += "<br>val: " + val;
this.res.push(val);
}
}
}
// output
this.out = function(){
if (this.res.length < 1)this.chk();
var s = "";
for(var i = 0; i < this.res.length; i++ ){
if(this.res[i] != true)s += this.res[i] + "<br>";
}
return s;
}
}
function chk(obj){
this.v = (obj.value) ? obj.value : obj.innerHTML;
this.eq = function(b){
if (this.v == b)return true;
return false;
}
this.lt = function(b){
if (this.v < parseFloat(b))return true;
return false;
}
this.le = function(b){
if (this.v <= parseFloat(b))return true;
return false;
}
this.gt = function(b){
if (this.v > parseFloat(b))return true;
return false;
}
this.ge = function(b){
if (this.v >= parseFloat(b))return true;
return false;
}
this.nn = function(){
if (this.v.toString().length > 0)return true;
return false;
}
this.rg = function(b){
var bb = new RegExp(b[0],b[1]);
return bb.test(this.v);
}
this.exec = function(f, arg) {
var args;
return this[f](arg);
}
}
function ruleCheck(obj,f,prm){
if (!obj)return;
var c = new chk(obj);
return c.exec(f,prm);
}
nem állítom, hogy tökéletes, de nagyjából működik
szabályokat json formában várja (ahogy a html-ben látszik)
az ellenőrző függvények persze bővíthetők, most csak néhányat írtam bele
ha kérdés merül fel, szólj
sry, jq-ban is lehetne, de nem akartam, mer' azér' a néhány getElementById-ért felesleges.
