jQuery topic - Szoftverfejlesztés fórum

üzenetek

hozzászólások


Lacces
(őstag)

Akkor azt mondod, ha jquery-s változó értékét szeretném megkapni, akkor a html()-t kell használni?


jeges
(senior tag)

nem igazán. a .html() nagyjából a js (dom) innerHTML tulajdonság értékét (azaz szövegesen az elem tartalmát, akármi is az) adja vissza. ellentétben a .val()-lal, ami nagyjából a js (ill dom elem) .value-t adja vissza.
inputoknak általában value-ja van (kivéve textarea pl.), div-nek, li-nek, és hasonlóknak inkább innerHTML.
a pontos használat jquery dokumentációban fellelhető (google-ban jquery + html/val)


Lacces
(őstag)

:R Így már kápise! :)


Speeedfire
(nagyúr)
Blog

Segítséget szeretnék kérni pár form ellenőrzésére. Ilyesmikre gondolok, hogy egy adott kifejezés hányszor van az input mezőben, vagy az adott inputmezőben van-e egy adott kifejezés, amit mondjuk egy tömbből olvas be. Mindezt ha rákattintok egy submit gomba és jelez nekem, hogy gond van. Írna valaki 1-2 példát? Esetleg linket ha kezdő kérdés? :)

[ Szerkesztve ]


Speeedfire
(nagyúr)
Blog

Közben kutattam... :))

$('#user-login-form').submit(function() {
// hibaellenőrzés, ha üres a felhasználó vagy jelszó mező, nem küldi el
var hiba = '';
if ($("#edit-name").val() == "") {
hiba += 'Üresen hagytad a "felhasználó" mezőt!\n';
}
if ($("#edit-pass").val() == "") {
hiba += 'Üresen hagytad a "jelszó" mezőt!\n';
}
// ha van hiba, figyelmeztetés, nem küldjük el
if(hiba != ''){
alert(hiba);
return false;
}
return true;
});

Már csak az lenne az érdekes, hogy tömbből keres ki dolgokat és hasonlítja össze az input mezővel és ha tartalmazza akkor error. :)


jeges
(senior tag)

ez a téma szép, de ennyire nem egyszerű.
milyen típusú ellenőrzésekre gondolsz? mennyire hagysz szabad kezet a felhasználónak, hogy beállíthassa saját ellenőrzéseit?
a legegyszerűbb ellenőrzés pl a kitöltöttség, de ennél jóval bonyolultabbakat is el tudok képzelni:
- numerikus valóban numerikus-e (jellemzően regexp)
- numerikus nagyobb/kisebb egy megadott értéknél
- két numerikus input közül az egyik nagyobb a másiknál
- két dátum input közül az egyik nagyobb a másiknál
- szöveges input esetében valamilyen regexp ellenőrzés (pl név nem lehet rövidebb 3 karakternél, vagy legyen benne keresztnév és vezetéknév)

szóval a megvalósítás nagyban függ attól, mi az elvárt működés, én személy szerint olyasmiben gondolkodnék, hogy a tárolt ellenőrzési szabályokat rekordonként egy tömbben vagy JSON objektumban tárolom, majd definiálok egy check vagy hasonló nevű osztályt/függvényt, és a megadott tömbön végiggyalogolva minden rekordra meghívom. ez a függvény aztán eldönti a megadott tömb alapján, hogy mit fog csinálni (regexp, numerikus összehasonlítás, dátumok összehasonlítása, stb)


Speeedfire
(nagyúr)
Blog

milyen típusú ellenőrzésekre gondolsz? mennyire hagysz szabad kezet a felhasználónak, hogy beállíthassa saját ellenőrzéseit?
Konkrétan egy linkkatalógusom van és oda akarok 1-2 dolgot.
pl
-a textarea-ba min. 300 karakter kell
-minden mező legyen kitöltve
-ha a textarea-ban van egy adott kifejezés akkor error (itt valami tömbben lenne felsorolva pár adat)

Nagyjából ennyi lenne, illetve ezeket már tudnám kombinálni is. Nem akarom, hogy a felhasználó módosítsa, de gondolom elég lenne ide egy js kódolás, nem kellene rejteni. Bár nem hiszem, hogy sokan módosítanák a html-ben ezt.


Vision
(veterán)

ha a textarea-ban van egy adott kifejezés akkor error

Ez nagyon jól hangzik, viszont nagyon kicseszel magaddal, ha ezt megjátszod. Milyen kifejezéseket tennél például bele?

Én egy zárt rendszernél mondjuk tiltottam a tipikus SQL kifejezéseket (update, insert, stb.) a felhasználónévből, jelszóból, stb., viszont egy nyilvánosnál ezt nem tudod megjátszani, különben a userek morogni fognak.

Egyébként public rendszernél a js-en túl php-ban is ugyanúgy ellenőrizni kell mindent.

Bár nem hiszem, hogy sokan módosítanák a html-ben ezt.

Már vérpisti szinten is simán megjátszható, hát akkor egy komolyabb cracker...

[ Szerkesztve ]


martonx
(veterán)

sql injection ellen nem az update insert parancsokat kell tiltani, hanem a "--"-t és a ";"-t.
A js alapú XSS támadásokhoz meg (már ha később böngészőben megjeleníted valahol a user által beírt szöveget) a "/>"-t kell tiltani a szövegből.

Egy tipikus SQL injection így néz ki ; select * from users --
A ; lezárja a spagetti kódot, a -- kommenteli az utána lévőket, és marad egy szépen végrehajtható sql-ed, amire jó eséllyel választ kapsz.

Ha az SQL injection-t és az XSS-t kivédted, akkor már a vérpistikéket (és ez a többség) kivédted. Aki meg nagyon akarja, és elég profi az úgyis feltöri az oldalt.


Vision
(veterán)

(update, insert, stb.).


martonx
(veterán)

értem, csak éppen az stb. lenne a lényeg, az update, insert teljesen lényegtelen


Speeedfire
(nagyúr)
Blog

Túlbonyolítod a dolgot. :)
Egy kész rendszerem van már, csak nem akarom feleslegesen elküldeni az adatokat a szervernek ha úgy is jó.
Nincs sql injection, nincs xss, ezeket php oldalon védem.

Csak user oldalon is szeretném megoldani ezt a dolgot, hogy praktikusabb legyen....


jeges
(senior tag)

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.


jeges
(senior tag)

javított, kiegészített kód: formChecker


Vision
(veterán)

Milyen dolgot bonyolítok túl, amikor te is ugyanazokat írtad le, amiket én? (szerver, és kliens oldalon is ellenőrzöl).


Speeedfire
(nagyúr)
Blog

:R

Délután lesz egy kis időm és átnézem az egészet, de ennyiből már boldogulok szerintem! :R


Tapsi: Igen, csak én kliens oldalon már nem akarok a biztonsággal bajlódni. Ha át is írja a js kódot, akkor is véd a php engem. :)


Speeedfire
(nagyúr)
Blog

Jobban átnézve a kódot, hááát. Elég bonyolult számomra. :U

De megpróbálom azért átdolgozni a magam számára. :K


jeges
(senior tag)

én szóltam, hogy nem annyira egyszerű :D
de legalább működik :B


jeges
(senior tag)

kis segítség:
átírtam úgy, hogy az egyes ellenőrzések futtatása után az eredménytől függően végrehajtandó eljárásokat könnyebb legyen definiálni
(a példába egy egyszerű className-játékot és title-ban megjelenő hibaüzit tettem)

formChecker v0.2
html példa


Brown ügynök
(senior tag)

@jeges: Látom nagyon ráérsz. :D

Nemrég teszteltem IE-re és FF-re egy ajaxos funkciót és sajnos ezeken nem működik (Chrome-n igen).

jQuery vezriószám: 1.6.1

Ha az ügyfél választ a legördülő menüből akkor ez átadja a kiválasztott elemet és egy(-két) id-t (a következő megjelenő legördülő menü id-jét). Így néz ki kb.:

<div id="partner0">
<select onchange="changePartner1(this, partner20, partner30 );" >
</div>

partner20 egy id, amivel a következő, megjelenő legördülő mező id-je lesz. Tehát még nem jelent meg de átadom a fv-nek hogy majd ha megjelenik, akkor ez legyen az id-je. A gond az, hogy a FF 5 erre hibát dob vissza: Nincs definiálva a partner20. Pedig az csak egy név, nem is kellene hogy bármit gondoljon róla az FF, majd a js-ben lekérem a hozzá tartozó értéket.

Miért csinálja ezt (velem) az FF 5?

üzenetek