اذهب إلى المحتوى

السؤال

نشر

لقد قمت بعمل Hook اسمها useForm بالشكل التالي:

function useForm() {
	const [email, setEmail] = useState('');
	const [password, setPassword] = useState('');
	const values = { email, password };

	const check = () => {};

	return {
		values,
		check,
		setEmail,
		setPassword
	};
}

اريد ان اقوم بكتابة الدالة check لتقوم من التحقق من النموذج، ومعرفة هل هو صالح للـ submit ام لا. كيف اقوم بكتابة تلك الدالة؟

Recommended Posts

  • 0
نشر

مرحباً عمر: 
لتقوم بمعرفة هل ال form صالحة أم لا يمكنك عمل الآتي: 

  1. في البداية تقوم بعمل لووب للتأكد من أن العناصر تحتوي علي قيم فإذا كانت تحتوي عليها فهي سليمة 
    function useForm() {
      const [email, setEmail] = useState('');
      const [password, setPassword] = useState('');
      const values = { email, password };
    
      const isValidForm = () => {
        let isValid = true;
    
        Object.keys(values).forEach(field =>  {
          if(!values[field]) {
            isValid = false;
          }
        });
    
        return isValid;
      };
    
      return {
        values,
        isValidForm,
        setEmail,
        setPassword
      };
    }

     

  • 0
نشر

التحقق من النموذج يعتمد كليا عليك فمثلا في حالتك يمكنك اجراء تحقق من أن الايميل المدخل هيكلته حقا هيكلة ايميل و يمكنك التحقق من أن كلمة السر ليست فارغة بهذه الطريقة 

function useForm() {
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');
  const values = { email, password };

  const reg = /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/;

  const check = () => {
    let isValid = false;
    if (reg.test(email) && !!password) {
      isValid = true;
    }
    return isValid;
  };

  return {
    values,
    check,
    setEmail,
    setPassword,
  };
}

أو يمكنك التحقق أيضا أن كلمة السر المدخلة لديها طول معين 

  const check = () => {
    let isValid = false;
    if (reg.test(email) && password.length > 5) {
      isValid = true;
    }
    return isValid;
  };

ويمكنك تعديل الدالة لارجاع رسائل لاخبار المستخدم مالذي ينبغي تغييره أو ما الخطب بمعلوماته 

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

يمكنك أن تنشر الآن وتسجل لاحقًا. إذا كان لديك حساب، فسجل الدخول الآن لتنشر باسم حسابك.

زائر
أجب على هذا السؤال...

×   لقد أضفت محتوى بخط أو تنسيق مختلف.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   جرى استعادة المحتوى السابق..   امسح المحرر

×   You cannot paste images directly. Upload or insert images from URL.

  • إعلانات

  • تابعنا على



×
×
  • أضف...