Results 1 to 8 of 8

Hybrid View

Previous Post Previous Post   Next Post Next Post
  1. #1
    Registered User Decrux's Avatar
    Join Date: Aug:2016
    Location: ãð. Ñîôèÿ
    Posts: 562

    Form validation ñ JavaScript

    Çäðàâåéòå,
    òðÿáâà äà íàïðàâÿ åäíè âàëèäàöèè çà ðåãèñòðàöèîííà ôîðìà.
    Äîñåãà íàïðàâèõ ñàìàòà âàëèäàöèÿ, íî èìàì åäíî ïèòàíå.

    HTML:
    Code:
    <label>Èìå íà ëèöåòî</label>
    <input v-model="name" type="text" id="name"/>
    
     <label>Íîìåð</label>
    <input v-model="number" type="text" id="number"/>
    VueJS
    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>
    Ãîðíàòà ÷àñò ñå ïèøå íà VueJS (framework na JS). Òú âúïðîñúò ìè å âàëèäàöèÿòà ðàáîòè ñóïåð, íî ñëåä êàòî èçõâúðëè ãðåøêè è êàòî ïîòðåáèòåëÿò ñå âúðíå äà ïîïúëíè äàäåíî ïîëåòî "êîðåêòíî" êàê ìîãà äà íàïðàâÿ îöâåòÿâàíåòî íà ïîëåòî â ÷åðâåíî äà èç÷åçâà, áåç äà ñå ãóáè èíôîðìàöèÿòà ïîïúëíåíà â ïîëåòàòà?

  2. #2
    ðåãèñòðèðàí ÑïåØúàëèñò StillOpossum's Avatar
    Join Date: Sep:2002
    Location: Ïëîâäèâ
    Posts: 3,115
    Äîáàâÿø
    document.getElementById('c1_identNumber' ).style.borderColor = "green";
    ïðè óñïåøíà âàëèäàöèÿ ïðèìåðíî...
    „Çàêîíèòå ñà çà êîíòðîë è îãðàíè÷àâàíå íà íàñåëåíèåòî íå íà ïðåñòúïíèöèòå, òå íå ñå èíòåðåñóâàò îò òÿõ.“ – StillOpossum

  3. #3
    Registered User Decrux's Avatar
    Join Date: Aug:2016
    Location: ãð. Ñîôèÿ
    Posts: 562
    Quote Originally Posted by StillOpossum View Post
    Äîáàâÿø
    document.getElementById('c1_identNumber' ).style.borderColor = "green";
    ïðè óñïåøíà âàëèäàöèÿ ïðèìåðíî...
    Áëàãîäàðÿ, íàäÿâàõ ñå äà èìà íÿêàêúâ ïî-êðåàòèâåí è ïî-êðàñèâ íà÷èí àìà ÿâíî òàêà ùå äà áúäå.

  4. #4
    Registered User
    Join Date: Aug:2016
    Location: Ñîôèÿ
    Posts: 86
    Âèæ äàëè òîâà ùå òè å îò ïîëçà, èíà÷å çà jQuery ñè èìàø toggleClass()

  5. #5
    Registered User Decrux's Avatar
    Join Date: Aug:2016
    Location: ãð. Ñîôèÿ
    Posts: 562
    Ùå èçïîëçâàì ïàê ñúùàòà òåìà äà ïîïèòàì.

    Èìàì åäíà äèíàìè÷íà òàáëèöà:

    Code:
    <vue-good-table
    :columns="columns"
    :rows="items"
    :paginate="true"
    :lineNumbers="true">
    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>
    Ïðè íàòèñêàíå íà áóòîí "Òúðñåíå" ñå çàðåæäàò/íàëèâàò äàííè îò äîëíàòà ÷àñò íà ñîôòóåðà. Ïîñëåäíèòå 3 êîëîíè ñà äàòè, êîèòî èäâàò âúâ âèä 1554163200000. Êàê ìîãà äà ãè ôîðìàòèðàì âúâ âèä DD/MM/YYYY? Çàñåãà ñå îïèòâàõ ñ ìîäóëà moment.js, íî ëè÷íî àç íå ìîãà äà ñå ñïðàâÿ ñ íåãî, äàëè íÿêúäå ñèíòàêòè÷íî áúðêàì èëè íåùî äðóãî íå ìîãà äà ðàçáåðà. Ùå ñå ðàäâàì àêî óäàðèòå ðàìî

  6. #6
    ðåãèñòðèðàí ÑïåØúàëèñò StillOpossum's Avatar
    Join Date: Sep:2002
    Location: Ïëîâäèâ
    Posts: 3,115
    Ñ 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/...caleDateString
    Last edited by StillOpossum; 16th May 2018 at 16:47.
    „Çàêîíèòå ñà çà êîíòðîë è îãðàíè÷àâàíå íà íàñåëåíèåòî íå íà ïðåñòúïíèöèòå, òå íå ñå èíòåðåñóâàò îò òÿõ.“ – StillOpossum

  7. #7
    Registered 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

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  

Copyright © 1999-2011 Õàðäóåð ÁÃ. Âúçìîæíî å ñúäúðæàíèåòî íà òàçè ñòðàíèöà äà å îáåêò íà àâòîðñêè ïðàâà.
iskamPC.com | mobility.BG | Bloody's Techblog | Êðèïòîâàëóòè è ìàéíèíã | 3D Vision Blog | Ìàãàçèí çà åëåêòðîííè öèãàðè