Hirdetés

Új hozzászólás Aktív témák

  • jeges

    senior tag

    válasz Speeedfire #112 üzenetére

    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.

Új hozzászólás Aktív témák