Akkor azt mondod, ha jquery-s változó értékét szeretném megkapni, akkor a html()-t kell használni?
jQuery topic - Szoftverfejlesztés fórum
hozzászólások
![](/dl/faces/own/jeges.gif)
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)
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 ]
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.
![](/dl/faces/own/jeges.gif)
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)
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.
![](/dl/faces/own/tapsi.gif)
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 ]
![](/dl/faces/motorhead2.gif)
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.
![](/dl/faces/motorhead2.gif)
martonx
(veterán)
értem, csak éppen az stb. lenne a lényeg, az update, insert teljesen lényegtelen
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....
![](/dl/faces/own/jeges.gif)
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.
![](/dl/faces/own/tapsi.gif)
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).
Délután lesz egy kis időm és átnézem az egészet, de ennyiből már boldogulok szerintem!
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.
Jobban átnézve a kódot, hááát. Elég bonyolult számomra.
De megpróbálom azért átdolgozni a magam számára.
![](/dl/faces/own/jeges.gif)
jeges
(senior tag)
én szóltam, hogy nem annyira egyszerű
de legalább működik
![](/dl/faces/own/jeges.gif)
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)
![](/dl/faces/afrus.gif)
Brown ügynök
(senior tag)
@jeges: Látom nagyon ráérsz.
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?