فحص البيانات قبل تخزينها في localStorage

محمود سعداوي2 · 23 أكتوبر 2022

قمت بعمل form validation مثلما يبين الكود التالي:

// register-username-register-email-register-password-register-btn
let form            = document.querySelector('form')
let username        = document.querySelector(".register-username")
let email           = document.querySelector(".register-email")
let password        = document.querySelector(".register-password")
let confirmPassword = document.querySelector('.register-confirm-password')
let registerBtn     = document.querySelector(".register-btn")

//         localStorage.setItem("register-username", username.value)
//         localStorage.setItem("register-email", email.value)
//         localStorage.setItem("register-password", password.value)


// show input error message
function showError(input,message) {
    const formControl = input.parentElement
    formControl.classList = "form-control error"
    const small = formControl.querySelector('small')
    small.innerText = message
}
// show success outline
function showSuccess(input) {
    const formControl = input.parentElement
    formControl.classList = "form-control success"
}

// check email is valid
function checkEmail(input) {
    const re = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
    if (re.test(input.value.trim())) {
        showSuccess(input)
    } else {
        showError(input, 'Email is not valid')
    }
}

// check passwords much
function checkPassword(input1, input2) {
    if (input1.value != input2.value) {
        showError(input2, 'Passwords do not much')
    }
}

// check required fields
function checkRequired(inputArr) {
    inputArr.forEach(function (input) {
        if (input.value.trim() === '') {
            showError(input, `${getFieldName(input)} is required`)
        } else {
            showSuccess(input)
        }
    });
}

// check input length
function checkLength(input, min, max) {
    if (input.value.length < min) {
        showError(input, `${getFieldName(input)} must be at least ${min}`)
    } else if(input.value.length > max){
        showError(input, `${getFieldName(input)} must be less than ${max}`)
    }
    else {
        showSuccess(input)
    }
}

// get field name
function getFieldName(input) {
    return input.id.charAt(0).toUpperCase() + input.id.slice(1)
}

// event listeners
form.addEventListener('submit', function(e){
    e.preventDefault()
    checkRequired([username,email,password,confirmPassword])
    checkLength(username, 4, 15)
    checkLength(password, 6, 20)
    checkEmail(email)
    checkPassword(password, confirmPassword)

    localStorage.setItem("register-username", username.value)
})

السؤال: كيف يمكنني تخزين البيانات المطابقة فقط في localStorage.

شكرا.

معاذ قره محمد · 24 أكتوبر 2022

هناك عدة طرق لفعل ذلك، مثلاً يمكنك أن تعيد من كل check function (الطرق المخصصة للفحص) قيمة منطقية، أعني بذلك (true or false)، ثم تقوم بفحص ما تعيده، فإذا أعادت true تكمل الفحص وإذا أعادت false توقف الفحص ولا تضيف إلى الـ localStorage إلا إذا اجتازت كل طرق الفحص بقيمة true، سأضرب مثال على إحدى الطرق في الأعلى:

function checkRequired(inputArr) {
    inputArr.forEach(function (input) {
        if (input.value.trim() === '') {
            showError(input, `${getFieldName(input)} is required`)
        } else {
            showSuccess(input);
            return false; // false في حال كان أحدهم فارغاً سنعيد 
        }
    });
    return true; // true في حالة كان كل المدخلات غير فارغة سنعيد
}

والآن نأتي إلى ما سنفعله عند الـ submit، نكتب:

form.addEventListener('submit', function(e){
    e.preventDefault()
    if (checkRequired([username,email,password,confirmPassword])){
		localStorage.setItem("register-username", username.value)
    } else {
      // false هنا اكتب ما تريد فعله في حال أعاد 
    }
    // checkLength(username, 4, 15)
    // checkLength(password, 6, 20)
    // checkEmail(email)
    // checkPassword(password, confirmPassword)
})

طبعاً يجب أن تقوم بالتحقق من كل طرق الفحص، لكن ضربت لك مثالاً واحداً لتتّضح الصورة، عند تعديلك على كل الطرق بالطريقة التي ذكرتها في الأعلى، سيكون بإمكانك كتابة:

form.addEventListener('submit', function(e){
    e.preventDefault()
    if (checkRequired([username,email,password,confirmPassword])
        and checkLength(username, 4, 15)
        and checkLength(password, 6, 20)
        and checkEmail(email)
        and checkPassword(password, confirmPassword))
	{
		localStorage.setItem("register-username", username.value)
    } else {
      // false هنا اكتب ما تريد فعله في حال أعاد 
    }
})

محمود سعداوي2 · 24 أكتوبر 2022

بتاريخ 30 دقائق مضت قال معاذ قره محمد:
هناك عدة طرق لفعل ذلك، مثلاً يمكنك أن تعيد من كل check function (الطرق المخصصة للفحص) قيمة منطقية، أعني بذلك (true or false)، ثم تقوم بفحص ما تعيده، فإذا أعادت true تكمل الفحص وإذا أعادت false توقف الفحص ولا تضيف إلى الـ localStorage إلا إذا اجتازت كل طرق الفحص بقيمة true، سأضرب مثال على إحدى الطرق في الأعلى:
function checkRequired(inputArr) {
    inputArr.forEach(function (input) {
        if (input.value.trim() === '') {
            showError(input, `${getFieldName(input)} is required`)
        } else {
            showSuccess(input);
            return false; // false في حال كان أحدهم فارغاً سنعيد 
        }
    });
    return true; // true في حالة كان كل المدخلات غير فارغة سنعيد
}
والآن نأتي إلى ما سنفعله عند الـ submit، نكتب:
form.addEventListener('submit', function(e){
    e.preventDefault()
    if (checkRequired([username,email,password,confirmPassword])){
		localStorage.setItem("register-username", username.value)
    } else {
      // false هنا اكتب ما تريد فعله في حال أعاد 
    }
    // checkLength(username, 4, 15)
    // checkLength(password, 6, 20)
    // checkEmail(email)
    // checkPassword(password, confirmPassword)
})
طبعاً يجب أن تقوم بالتحقق من كل طرق الفحص، لكن ضربت لك مثالاً واحداً لتتّضح الصورة، عند تعديلك على كل الطرق بالطريقة التي ذكرتها في الأعلى، سيكون بإمكانك كتابة:
form.addEventListener('submit', function(e){
    e.preventDefault()
    if (checkRequired([username,email,password,confirmPassword])
        and checkLength(username, 4, 15)
        and checkLength(password, 6, 20)
        and checkEmail(email)
        and checkPassword(password, confirmPassword))
	{
		localStorage.setItem("register-username", username.value)
    } else {
      // false هنا اكتب ما تريد فعله في حال أعاد 
    }
})

للأسف صديقي

معاذ قره محمد · 24 أكتوبر 2022

بتاريخ 25 دقائق مضت قال محمود سعداوي:

للأسف صديقي

ما فهمته منك أنك تريد أن تخزّن كل البيانات إن كانت مطابقة فقط ولا تخزّن أي شيء إن كان هناك أحد البيانات غير مطابق. لكن أظن الآن أنّك تعني أنه إن لم يكن إلا اسم المستخدم -مثلاً- صحيح تريد أن تخزنه لوحده دون بقية القيم الخاطئة. يمكنك فعل ذلك بنفس الطريقة التي شرحتها، لكن بالتعديل التالي:

form.addEventListener('submit', function(e){
    e.preventDefault()
    if (checkRequired([username]) and
        and checkLength(username, 4, 15))
	{
        // سيخزن اسم المستخدم إذا حقق الشرطين
		localStorage.setItem("register-username", username.value)
    } else {
      // false هنا اكتب ما تريد فعله في حال أعاد 
    }
  	if (checkRequired([password,confirmPassword]) and checkLength(password, 6, 20)
      	and checkPassword(password, confirmPassword))
        {
        // أضف هنا كلمة السر
        }
  	else {
    // ما يجب فعله عندما تكون كلمة السر لا تحقق الشروط
    }
  if(checkRequired(email) and checkEmail(email)){
  	// أضف الإيميل
  } else{
  // ما يجب فعله عندما يكون الإيميل لا يحقق الشروط
  }
})

هكذا ستخزن كل واصفة لوحدها، ويوجد طريقة أخرى مثل:

form.addEventListener('submit', function(e){
    e.preventDefault()
  // سننشئ بداية غرض
	let data = {};
  // سنضيف له الخصائص المطابقة للشروط فقط، ثم نضيفه إلى التخزين
    if (checkRequired([username]) and
        and checkLength(username, 4, 15))
    {
        // سيخزن اسم المستخدم إذا حقق الشرطين
		data.username = username;
    } else {
      // false هنا اكتب ما تريد فعله في حال أعاد 
    }
    if (checkRequired([password,confirmPassword]) and checkLength(password, 6, 20)
        and checkPassword(password, confirmPassword))
        {
        // أضف هنا كلمة السر
		data.password = password;
        }
    else {
    // ما يجب فعله عندما تكون كلمة السر لا تحقق الشروط
    }
  if(checkRequired(email) and checkEmail(email)){
    // أضف الإيميل
	data.email = email;
  } else{
  // ما يجب فعله عندما يكون الإيميل لا يحقق الشروط
  }
  // وأخيراً أضف الغرض إلى التخزين
  localStorage("usreData", JSON.stringify(data));
})

فائدة الطريقة JSON.stringify أن تحول الغرض إلى string حيث لا يمكننا تخزين الغرض في ال localStorage. وعندما نجلبه سنستخدم الطريقة JSON.parse لتحويل الـstring إلى غرض مرة أخرى.

JSON.parse(localSorage.getItem("userData"))

فحص البيانات قبل تخزينها في localStorage

السؤال

محمود سعداوي2

3 أجوبة على هذا السؤال

Recommended Posts

معاذ قره محمد

محمود سعداوي2

معاذ قره محمد

انضم إلى النقاش

إعلانات

تابعنا على

الرئيسية

تابعنا

دروس ومقالات

أسئلة وأجوبة

كتب

دورات

بطاقات هدية