జావాస్క్రిప్ట్‌తో క్లయింట్-సైడ్ ఫారం ధ్రువీకరణను ఎలా అమలు చేయాలి

జావాస్క్రిప్ట్ అత్యంత ప్రాచుర్యం పొందిన మరియు బహుముఖ ప్రోగ్రామింగ్ భాషలలో ఒకటి, ఈ రోజు మీరు ప్రారంభించవచ్చు. ఈ ప్రోగ్రామింగ్ లాంగ్వేజ్ వెబ్ భాష అని చెప్పబడింది మరియు మీ వెబ్‌సైట్‌లకు ఇంటరాక్టివిటీని జోడించడానికి ఇది అవసరం.

వెబ్‌సైట్లలో ఎక్కువగా ఉపయోగించే 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 ఫారమ్‌లు ఒకటి, ఎందుకంటే అవి మీ డేటాను నమోదు చేయడానికి, మార్పులను వర్తింపజేయడానికి, పాప్-అప్‌లను ఆహ్వానించడానికి, సర్వర్‌కు సమాచారాన్ని సమర్పించడానికి మరియు మరిన్నింటిని అనుమతిస్తుంది.

---

---

నాకు స్మార్ట్ టీవీ వద్దు

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. రేడియో ఇన్పుట్ ధ్రువీకరణ

HTML రేడియో ఇన్‌పుట్ అనేది ఒక ప్రత్యేక రకం గ్రాఫికల్ కంట్రోల్ ఎలిమెంట్, ఇది వినియోగదారుని పరస్పరం ప్రత్యేకమైన ఎంపికల యొక్క ముందే నిర్వచించిన సెట్‌లో ఒకదాన్ని మాత్రమే ఎంచుకోవడానికి అనుమతిస్తుంది. అటువంటి ఇన్‌పుట్ యొక్క సాధారణ వినియోగ కేసు లింగాన్ని ఎంచుకోవడం. అటువంటి ఇన్‌పుట్‌ను ధృవీకరించడానికి, వాటిలో కనీసం ఒకటి ఎంపిక చేయబడిందో లేదో మీరు తనిఖీ చేయాలి.

దీనిని ఉపయోగించి దీనిని సాధించవచ్చు లాజికల్ ఆపరేటర్లు 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 కథనాలు ప్రచురించబడ్డాయి)

నితిన్ ఆసక్తిగల సాఫ్ట్‌వేర్ డెవలపర్ మరియు కంప్యూటర్ ఇంజనీరింగ్ విద్యార్థి జావాస్క్రిప్ట్ టెక్నాలజీలను ఉపయోగించి వెబ్ అప్లికేషన్‌లను అభివృద్ధి చేస్తున్నాడు. అతను ఫ్రీలాన్స్ వెబ్ డెవలపర్‌గా పనిచేస్తాడు మరియు తన ఖాళీ సమయంలో లైనక్స్ మరియు ప్రోగ్రామింగ్ కోసం వ్రాయడానికి ఇష్టపడతాడు.

నితిన్ రంగనాథ్ నుండి మరిన్ని

మా వార్తాలేఖకు సభ్యత్వాన్ని పొందండి

టెక్ చిట్కాలు, సమీక్షలు, ఉచిత ఈబుక్‌లు మరియు ప్రత్యేకమైన డీల్స్ కోసం మా వార్తాలేఖలో చేరండి!

సభ్యత్వం పొందడానికి ఇక్కడ క్లిక్ చేయండి