Results 1 to 8 of 8
Thread: Form validation ñ JavaScript
Hybrid View
-
11th May 2018 13:16 #1
Form validation ñ JavaScript
Çäðàâåéòå,
òðÿáâà äà íàïðàâÿ åäíè âàëèäàöèè çà ðåãèñòðàöèîííà ôîðìà.
Äîñåãà íàïðàâèõ ñàìàòà âàëèäàöèÿ, íî èìàì åäíî ïèòàíå.
HTML:
VueJSCode:<label>Èìå íà ëèöåòî</label> <input v-model="name" type="text" id="name"/> <label>Íîìåð</label> <input v-model="number" type="text" id="number"/>
Ãîðíàòà ÷àñò ñå ïèøå íà VueJS (framework na JS). Òú âúïðîñúò ìè å âàëèäàöèÿòà ðàáîòè ñóïåð, íî ñëåä êàòî èçõâúðëè ãðåøêè è êàòî ïîòðåáèòåëÿò ñå âúðíå äà ïîïúëíè äàäåíî ïîëåòî "êîðåêòíî" êàê ìîãà äà íàïðàâÿ îöâåòÿâàíåòî íà ïîëåòî â ÷åðâåíî äà èç÷åçâà, áåç äà ñå ãóáè èíôîðìàöèÿòà ïîïúëíåíà â ïîëåòàòà?Code:<script> var filledFields = true; var checkLength = true; var strField = ""; data(){ return { } } checkRequiredFields(){ //check for empty fields if(this.eoriModel.c1_identNumber == ""){ document.getElementById('c1_identNumber').style.borderColor = "red"; filledFields = false; } if(this.eoriModel.c1_name == ""){ document.getElementById('c1_name').style.borderColor = "red"; filledFields = false; } if(filledFields == false){ alert("Nepopulneno pole!"); filledFields = true; //return false; } //check for length in fields if(this.eoriModel.c1_identNumber.length < 3 || this.eoriModel.c1_identNumber.length > 13){ document.getElementById('c1_identNumber').style.borderColor = "red"; strField += "Ïðåâèøåí èëè íåäîñòàòú÷åí áðîé ñèìâîëè\n"; checkLength = false; } if(checkLength == false){ alert("Íåèçïúëíåíè óñëîâèÿ:\n" + strField); checkLength = true; strField = ""; return false; } return true; } </script>
-
11th May 2018 13:43 #2
Äîáàâÿø
document.getElementById('c1_identNumber' ).style.borderColor = "green";
ïðè óñïåøíà âàëèäàöèÿ ïðèìåðíî...„Çàêîíèòå ñà çà êîíòðîë è îãðàíè÷àâàíå íà íàñåëåíèåòî íå íà ïðåñòúïíèöèòå, òå íå ñå èíòåðåñóâàò îò òÿõ.“ – StillOpossum
-
11th May 2018 13:45 #3
-
11th May 2018 20:45 #4Registered User
Join Date: Aug:2016
Location: Ñîôèÿ
Posts: 86
Âèæ äàëè òîâà ùå òè å îò ïîëçà, èíà÷å çà jQuery ñè èìàø toggleClass()
-
16th May 2018 15:57 #5
Ùå èçïîëçâàì ïàê ñúùàòà òåìà äà ïîïèòàì.
Èìàì åäíà äèíàìè÷íà òàáëèöà:
JS:Code:<vue-good-table :columns="columns" :rows="items" :paginate="true" :lineNumbers="true">
Ïðè íàòèñêàíå íà áóòîí "Òúðñåíå" ñå çàðåæäàò/íàëèâàò äàííè îò äîëíàòà ÷àñò íà ñîôòóåðà. Ïîñëåäíèòå 3 êîëîíè ñà äàòè, êîèòî èäâàò âúâ âèä 1554163200000. Êàê ìîãà äà ãè ôîðìàòèðàì âúâ âèä DD/MM/YYYY? Çàñåãà ñå îïèòâàõ ñ ìîäóëà moment.js, íî ëè÷íî àç íå ìîãà äà ñå ñïðàâÿ ñ íåãî, äàëè íÿêúäå ñèíòàêòè÷íî áúðêàì èëè íåùî äðóãî íå ìîãà äà ðàçáåðà. Ùå ñå ðàäâàì àêî óäàðèòå ðàìîCode:<script type="text/javascript"> export default { components: { Datepicker }, name: 'Table', data(){ return { DatePickerFormat: 'dd/MM/yyyy', items: [], serviceState: '', columns: [ { label: 'Number', field: 'number', type: 'String', filterable: true, placeholder: 'Number' }, { label: 'Identification number', field: 'identNumber', type: 'String', filterable: true, placeholder: 'Identification number' }, { label: 'Name', field: 'name', type: 'String', filterable: true, placeholder: 'Name' }, { label: 'Code', field: 'code', type: 'String', filterable: true, placeholder: 'Code' }, { label: 'Date From', field: 'dateFrom', type: 'String', filterable: true, placeholder: 'dd/mm/yyyy' }, { label: 'Date To', field: 'dateTo', type: 'String', filterable: true, placeholder: 'dd/mm/yyyy' }, { label: 'Last Change', field: 'dateChanged', type: 'String', filterable: true, placeholder: 'dd/mm/yyyy' }, ], fields : { "Number": "number", "Identification numer": "identNumber", "Name": "name", "Code": "code", "Date From": "dateFrom", "Date To": "dateTo", "Last Change": "dateChanged" }, json_meta: [ [{ "key": "charset", "value": "utf-8" }] ] } }, methods: { } </script>
-
16th May 2018 16:43 #6
Ñ VueJS íå ñúì çàïîçíàò íî ÷èñòèÿ äæàâàñêðèïò ñè ãè êîíâåðòèðà:
var d = new Date(1554163200000); - êîíâåðòèðà íà Tue Apr 02 2019 03:00:00 GMT+0300
d = d.toDateString(); - âðúùà Tue Apr 02 2019
d = d.toLocaleDateString(); - âðúùà 2.04.2019 ã. ïðè ìåí ïðè äðóãè ïðåäïîëàãàì ñïîðåä íàñòðîéêèòå
https://developer.mozilla.org/en-US/...caleDateStringLast edited by StillOpossum; 16th May 2018 at 16:47.
„Çàêîíèòå ñà çà êîíòðîë è îãðàíè÷àâàíå íà íàñåëåíèåòî íå íà ïðåñòúïíèöèòå, òå íå ñå èíòåðåñóâàò îò òÿõ.“ – StillOpossum
-
16th May 2018 16:43 #7Registered User
Join Date: Dec:2003
Posts: 2,817
Íåùî òàêîâà?Code:function formatDate(timestamp) { const date = new Date(timestamp); return date.getDate() + '/' + (date.getMonth() + 1) + '/' + date.getFullYear(); }
Ïðåãëåäàõ è 1-âèÿ òè ïîñò - ùîì ñ VueJS òè ñå íàëàãà äà ïîëçâàø document.getElementById, çíà÷è íåùî íå å íàðåä
Last edited by zlozi; 16th May 2018 at 16:49.
Gigabyte DS3P, E4400@9x333, 2x2Gb Super T@1000Mhz, Gigabyte GTX460OC 768Mb




Reply With Quote

Lenovo ThinkPad 15 èëè IdeaPad 15
5th May 2023, 22:16 in Ìîáèëíè êîìïþòðè