ஜாவாஸ்கிரிப்ட் மூலம் வாடிக்கையாளர் பக்க படிவ சரிபார்ப்பை எவ்வாறு செயல்படுத்துவது

ஜாவாஸ்கிரிப்ட் இன்று நீங்கள் தொடங்கக்கூடிய மிகவும் பிரபலமான மற்றும் பல்துறை நிரலாக்க மொழிகளில் ஒன்றாகும். இந்த நிரலாக்க மொழி வலையின் மொழி என்று சரியாகக் கூறப்பட்டுள்ளது மற்றும் உங்கள் வலைத்தளங்களில் ஊடாடும் திறனைச் சேர்க்க இது அவசியம்.

படிவ உறுப்பு வலைத்தளங்களில் அதிகம் பயன்படுத்தப்படும் HTML உறுப்புகளில் ஒன்றாகும். இந்த படிவங்கள் பயனரிடமிருந்து உள்ளீட்டை எடுத்து உலாவி அல்லது சேவையகத்தில் செயலாக்குகிறது. இருப்பினும், பாதுகாப்பு சிக்கல்கள் மற்றும் தேவையற்ற பிழைகளைச் சமாளிக்க இந்த உள்ளீடுகளை சரிபார்க்க முக்கியம்.

---

---

DOM கையாளுதலைப் புரிந்துகொள்வது

ஜாவாஸ்கிரிப்ட் மூலம் வாடிக்கையாளர் பக்க படிவ சரிபார்ப்பைச் செயல்படுத்துவதற்கு முன், பொதுவாக 'DOM' எனப்படும் ஆவணப் பொருள் மாதிரியைப் புரிந்துகொள்வது அவசியம். DOM என்பது ஒரு தரப்படுத்தப்பட்ட API ஆகும், இது HTML வலைப்பக்கத்தில் உள்ள உறுப்புகளுடன் தொடர்பு கொள்ள ஜாவாஸ்கிரிப்டை அனுமதிக்கிறது.

மேலும் அறிய: வலைத்தளங்களின் மறைக்கப்பட்ட ஹீரோ: DOM ஐ புரிந்துகொள்வது

நிகழ்வு கேட்பவர்களைச் சேர்ப்பதற்கும் பயனர் உள்ளீடுகளை மீட்டெடுப்பதற்கும், DOM கையாளுதலின் அடிப்படைகளை நீங்கள் புரிந்து கொள்ள வேண்டும். DOM API மற்றும் JavaScript ஐப் பயன்படுத்தி வலைப்பக்கத்தின் உள்ளடக்கங்களை நீங்கள் எவ்வாறு மாற்றலாம் என்பதை விளக்கும் ஒரு எடுத்துக்காட்டு இங்கே:







Document





const paragraph = document.getElementById('parapgraph');
paragraph.innerText = 'This is a paragraph tag';



மேலே உள்ள குறியீட்டில், தி

டேக்கில் ஒரு ஐடி உள்ளது பத்தி . ஜாவாஸ்கிரிப்ட் குறியீட்டை எழுதும் போது, ​​இந்த உறுப்பை அழைப்பதன் மூலம் அணுகலாம் document.getElementById ('பத்தி') முறை மற்றும் அதன் மதிப்பை கையாளுதல்.

DOM கையாளுதலின் அடிப்படைகளை இப்போது நீங்கள் புரிந்துகொண்டுள்ளீர்கள், படிவ சரிபார்ப்பைச் செயல்படுத்துவோம்.

---

---

ஜாவாஸ்கிரிப்டுடன் படிவம் சரிபார்ப்பு

ஒரு பயனரிடமிருந்து நீங்கள் எடுக்கக்கூடிய பல்வேறு வகையான உள்ளீடுகள் உள்ளன. உரை வகை, மின்னஞ்சல் வகை, கடவுச்சொல் வகை, வானொலி பொத்தான்கள் மற்றும் தேர்வுப்பெட்டிகள் ஆகியவை நீங்கள் சந்திக்கக்கூடிய பொதுவானவை. இந்த பெரும்பாலான உள்ளீட்டு வகைகளின் காரணமாக, அவை ஒவ்வொன்றையும் சரிபார்க்க நீங்கள் வெவ்வேறு தர்க்கங்களைப் பயன்படுத்த வேண்டும்.

சரிபார்ப்பை ஆராய்வதற்கு முன், HTML படிவங்களையும் அவற்றின் முக்கியத்துவத்தையும் புரிந்து கொள்ள சிறிது நேரம் ஒதுக்குவோம். HTML படிவங்கள் உங்கள் தரவை உள்ளிடவும், மாற்றங்களைப் பயன்படுத்தவும், பாப்-அப்களைத் தூண்டவும், சேவையகத்திற்கு தகவலைச் சமர்ப்பிக்கவும், மேலும் பலவற்றை அனுமதிக்கவும் நீங்கள் வலைத்தளத்துடன் தொடர்பு கொள்ளும் முதன்மை வழிகளில் ஒன்றாகும்.

---

---

விண்டோஸ் 10 இல் ஒரு தொகுதி கோப்பை உருவாக்குவது எப்படி

HTML இந்த பயனர் எதிர்கொள்ளும் படிவங்களை உருவாக்க உறுப்பு பயன்படுத்தப்படுகிறது. ஒரு HTML படிவத்தின் உள்ளீடுகளை நீங்கள் எவ்வாறு சரிபார்க்கலாம் என்பது இங்கே:

1. மின்னஞ்சல் சரிபார்ப்பு

நீங்கள் ஒரு அங்கீகார அமைப்பை உருவாக்கினாலும் அல்லது உங்கள் செய்திமடலுக்கு பயனர் மின்னஞ்சல்களைச் சேகரித்தாலும், அதை உங்கள் தரவுத்தளத்தில் சேமித்து வைப்பதற்கோ அல்லது செயலாக்குவதற்கோ முன் மின்னஞ்சலைச் சரிபார்க்க வேண்டியது அவசியம். ஒரு மின்னஞ்சல் தேவையான அனைத்து நிபந்தனைகளையும் பூர்த்தி செய்கிறதா என்று சோதிக்க, நீங்கள் a ஐப் பயன்படுத்தலாம் வழக்கமான வெளிப்பாடு .

HTML:

ஜாவாஸ்கிரிப்ட்:

const emailInput = document.getElementById('email');
const emailRegex = /^[a-zA-Z0-9.!#$%&'*+/=?^_`~-]+@[a-zA-Z0-9-]+(?:.[a-zA-Z0-9-]+)*$/;
if (!emailInput.value.match(emailRegex)) {
alert('Invalid email address.');
}

2. கடவுச்சொல் சரிபார்ப்பு

கடவுச்சொற்கள் ஒரு முக்கியமான தரவாகும், அதன் பாதுகாப்பை உறுதி செய்ய ஒரு சிறப்பு வகை சரிபார்ப்பு தேவைப்படுகிறது. இரண்டு புலங்களைக் கொண்ட பதிவுபெறும் படிவத்தைக் கவனியுங்கள்: கடவுச்சொல் மற்றும் கடவுச்சொல் புலங்களை உறுதிப்படுத்தவும். இந்த ஜோடி உள்ளீடுகளைச் சரிபார்க்க, நீங்கள் கருத்தில் கொள்ள வேண்டிய சில விஷயங்கள் இங்கே:

• கடவுச்சொல் 6 எழுத்துகளுக்கு மேல் இருக்க வேண்டும்.
• கடவுச்சொல்லின் மதிப்பு மற்றும் உறுதிப்படுத்தப்பட்ட கடவுச்சொல் புலம் ஒரே மாதிரியாக இருக்க வேண்டும்.

HTML:




ஜாவாஸ்கிரிப்ட்:

const password = document.getElementById('password').value;
const confirmPassword = document.getElementById('confirm-password').value;
if (password.value !== confirmPassword.value) {
alert('Entered passwords do not match');
}
if (password.length <6) {
alert('Password must be more than 6 characters long')
}

3. ரேடியோ உள்ளீட்டு சரிபார்ப்பு

எச்டிஎம்எல் ரேடியோ உள்ளீடு என்பது ஒரு சிறப்பு வகை வரைகலை கட்டுப்பாட்டு உறுப்பு ஆகும். அத்தகைய உள்ளீட்டின் பொதுவான பயன்பாடானது பாலினத்தைத் தேர்ந்தெடுப்பதாகும். அத்தகைய உள்ளீட்டைச் சரிபார்க்க, அவர்களில் குறைந்தது ஒருவரையாவது தேர்ந்தெடுக்கப்பட்டிருக்கிறதா என்பதை நீங்கள் சரிபார்க்க வேண்டும்.

இதைப் பயன்படுத்தி இதை அடைய முடியும் தருக்க ஆபரேட்டர்கள் AND போன்றவை ( && ) மற்றும் இல்லை ( ! ) இந்த முறையில் ஆபரேட்டர்:

HTML:

Male

Female

Others


ஜாவாஸ்கிரிப்ட்:

const genders = document.getElementsByName('gender');
const validForm = false;
let i = 0;
while (!validForm && i if (radios[i].checked) validForm = true;
i++;
}
if (!validForm) alert('Must check some option!');

4. உள்ளீட்டு சரிபார்ப்பைத் தேர்ந்தெடுக்கவும்

தி கீழ்தோன்றும் பட்டியலை உருவாக்க HTML உறுப்பு பயன்படுத்தப்படுகிறது. தி உள்ளே குறிச்சொற்கள் உறுப்பு கீழ்தோன்றும் பட்டியலில் கிடைக்கும் விருப்பங்களை வரையறுக்கிறது. இவை ஒவ்வொன்றும் குறிச்சொற்கள் அவற்றுடன் தொடர்புடைய மதிப்பு பண்புகளைக் கொண்டுள்ளன.

என் பிசி விண்டோஸ் 10 இணக்கமானது

இயல்புநிலை அல்லது ஆரம்ப விருப்பத்திற்கு, நீங்கள் அதன் மதிப்பை ஒரு வெற்று சரமாக அமைக்கலாம், இதனால் அது தவறான விருப்பமாக கருதப்படும். மற்ற அனைத்து விருப்பங்களுக்கும், பொருத்தமான மதிப்பு பண்புகளை அமைக்கவும். நீங்கள் எவ்வாறு சரிபார்க்கலாம் என்பதற்கு இங்கே ஒரு உதாரணம் உள்ளீட்டு உறுப்பு:

HTML:


Select One
Mr
Mrs
Ms


ஜாவாஸ்கிரிப்ட்:

எனது ஐபோன் ஏன் குறுஞ்செய்திகளை அனுப்பவில்லை?

const title = document.getElementById('title');
if (title.value = '') {
alert('Please select a title');
}

5. தேர்வுப்பெட்டி சரிபார்ப்பு

டைப் செக்பாக்ஸின் உள்ளீட்டு உறுப்புகள் இயல்பாகச் சரிபார்க்கப்படும் அல்லது செயல்படுத்தப்படும் போது டிக் செய்யப்பட்ட பெட்டிகளாக வழங்கப்படுகின்றன. ஒரு படிவத்தில் சமர்ப்பிப்பதற்கான ஒற்றை மதிப்புகளைத் தேர்ந்தெடுக்க ஒரு தேர்வுப்பெட்டி உங்களை அனுமதிக்கிறது. 'விதிமுறைகள் மற்றும் நிபந்தனைகளை ஏற்கவும்' உள்ளீட்டிற்கு தேர்வுப்பெட்டிகள் ஒரு பிரபலமான தேர்வாகும்.

செக் பாக்ஸ் டிக் செய்யப்பட்டுள்ளதா இல்லையா என்பதை அறிய, செக் பாக்ஸ் உள்ளீட்டில் சரிபார்க்கப்பட்ட பண்புகளை அணுகலாம். இங்கே ஒரு உதாரணம்:

HTML:


I agree to the terms and conditions

ஜாவாஸ்கிரிப்ட்:

const terms = document.getElementById('terms');
if (!terms.checked) {
alert('Please agree to the terms and conditions to proceed further.');
}


வரும் முன் காப்பதே சிறந்தது

பாதுகாப்பான மற்றும் பாதுகாப்பான அனுபவத்தை வழங்குவதற்காக பார்வையாளரிடமிருந்து நீங்கள் பெறும் அனைத்து உள்ளீடுகளையும் சரிபார்க்க எப்போதும் பரிந்துரைக்கப்படுகிறது. குறுக்கு தள ஸ்கிரிப்டிங் தாக்குதல்கள் மற்றும் SQL ஊசி போடுவதற்கு ஹேக்கர்கள் எப்பொழுதும் தீங்கிழைக்கும் தரவை உள்ளீட்டு புலங்களில் உள்ளிட முயற்சிக்கின்றனர்.

உங்கள் HTML உள்ளீடுகளை எவ்வாறு சரிபார்க்கலாம் என்பதை இப்போது நீங்கள் புரிந்துகொண்டுள்ளீர்கள், ஒரு படிவத்தை உருவாக்கி மேலே பார்த்த உத்திகளை செயல்படுத்துவதன் மூலம் அதை ஏன் முயற்சி செய்யக்கூடாது?

பகிர் பகிர் ட்வீட் மின்னஞ்சல் HTML இல் ஒரு படிவத்தை உருவாக்குவது எப்படி

HTML படிவங்களுடன் உங்கள் வலைத்தளங்களில் தரவை உள்ளிட உங்கள் பயனர்களை அனுமதிக்கவும்.

அடுத்து படிக்கவும் தொடர்புடைய தலைப்புகள்

• நிரலாக்க
• HTML
• ஜாவாஸ்கிரிப்ட்
• இணைய மேம்பாடு
• குறியீட்டு பயிற்சிகள்

எழுத்தாளர் பற்றி நிதின் ரங்கநாத்(31 கட்டுரைகள் வெளியிடப்பட்டன)

நிதின் ஒரு தீவிர மென்பொருள் உருவாக்குநர் மற்றும் ஜாவாஸ்கிரிப்ட் தொழில்நுட்பங்களைப் பயன்படுத்தி இணையப் பயன்பாடுகளை உருவாக்கும் கணினி பொறியியல் மாணவர். அவர் ஒரு ஃப்ரீலான்ஸ் வலை டெவலப்பராக வேலை செய்கிறார் மற்றும் அவரது ஓய்வு நேரத்தில் லினக்ஸ் மற்றும் புரோகிராமிங்கிற்காக எழுத விரும்புகிறார்.

நிதின் ரங்கநாத்திடமிருந்து மேலும்

எங்கள் செய்திமடலுக்கு குழுசேரவும்

தொழில்நுட்ப குறிப்புகள், மதிப்புரைகள், இலவச மின் புத்தகங்கள் மற்றும் பிரத்யேக ஒப்பந்தங்களுக்கு எங்கள் செய்திமடலில் சேரவும்!

குழுசேர இங்கே சொடுக்கவும்