একটি সাধারণ jQuery ফর্ম বৈধকরণ স্ক্রিপ্ট [বন্ধ]


110

আমি jQuery ব্যবহার করে একটি সাধারণ বৈধতা ফর্ম তৈরি করেছি। ঠিক আছে কাজ করছে। জিনিসটি আমি আমার কোড থেকে সন্তুষ্ট নই। একই কোড আউটপুট ফলাফল সহ আমার কোড লিখতে অন্য উপায় আছে?

$(document).ready(function(){

$('.submit').click(function(){
    validateForm();   
});

function validateForm(){

    var nameReg = /^[A-Za-z]+$/;
    var numberReg =  /^[0-9]+$/;
    var emailReg = /^([\w-\.]+@([\w-]+\.)+[\w-]{2,4})?$/;

    var names = $('#nameInput').val();
    var company = $('#companyInput').val();
    var email = $('#emailInput').val();
    var telephone = $('#telInput').val();
    var message = $('#messageInput').val();

    var inputVal = new Array(names, company, email, telephone, message);

    var inputMessage = new Array("name", "company", "email address", "telephone number", "message");

     $('.error').hide();

        if(inputVal[0] == ""){
            $('#nameLabel').after('<span class="error"> Please enter your ' + inputMessage[0] + '</span>');
        } 
        else if(!nameReg.test(names)){
            $('#nameLabel').after('<span class="error"> Letters only</span>');
        }

        if(inputVal[1] == ""){
            $('#companyLabel').after('<span class="error"> Please enter your ' + inputMessage[1] + '</span>');
        }

        if(inputVal[2] == ""){
            $('#emailLabel').after('<span class="error"> Please enter your ' + inputMessage[2] + '</span>');
        } 
        else if(!emailReg.test(email)){
            $('#emailLabel').after('<span class="error"> Please enter a valid email address</span>');
        }

        if(inputVal[3] == ""){
            $('#telephoneLabel').after('<span class="error"> Please enter your ' + inputMessage[3] + '</span>');
        } 
        else if(!numberReg.test(telephone)){
            $('#telephoneLabel').after('<span class="error"> Numbers only</span>');
        }

        if(inputVal[4] == ""){
            $('#messageLabel').after('<span class="error"> Please enter your ' + inputMessage[4] + '</span>');
        }       
}   

});

3
হ্যাঁ, আপনি আরও ভাল করার জন্য jquery বৈধতা স্ক্রিপ্ট ব্যবহার করতে পারেন।
দেবাং রাঠোদ

আপনি কি আমাকে দেখাতে পারেন? তারা বলে একটি কোড লেখা কবিতা লেখার মতো is আমি আমার কোডটি অনুকূলিতকরণ করতে চাই।
jedm

10
Codereview.stackexchange.com - এটি আপনি যা খুঁজছেন
আলেকজান্ডার

1
আপনি এইচটিএমএল 5 ফর্ম বৈধতা ব্যবহার করতে পারেন:$('form')[0].checkValidity()
নিিউটেক

যদি প্রধান ফোকাস সরলতা হয় তবে ভ্যালিজেট জ্যাকোয়ারি প্লাগইন আশাব্যঞ্জক। এটি একটি স্টার্টআপ প্লাগইন। তবে এটি বৈধতার কিছু আকর্ষণীয় উপায় ব্যবহার করে। এখানে গাইডের লিঙ্কটি এখানে। valijate.com/Docs.php
বুলা

উত্তর:


300

আপনি নিম্নলিখিত হিসাবে jQuery বৈধতা প্লাগইন সহজভাবে ব্যবহার করতে পারেন ।

jQuery :

$(document).ready(function () {

    $('#myform').validate({ // initialize the plugin
        rules: {
            field1: {
                required: true,
                email: true
            },
            field2: {
                required: true,
                minlength: 5
            }
        }
    });

});

এইচটিএমএল :

<form id="myform">
    <input type="text" name="field1" />
    <input type="text" name="field2" />
    <input type="submit" />
</form>

ডেমো: http://jsfiddle.net/xs5vrrso/

বিকল্পগুলি: http://jqueryediaation.org/ માન્ય

পদ্ধতি: http://jqueryediaation.org/category/plugin/

স্ট্যান্ডার্ড বিধি : http://jqueryediaation.org/category/methods/

additional-methods.jsফাইলের সাথে উপলভ্য Rচ্ছিক বিধিগুলি :

maxWords
minWords
rangeWords
letterswithbasicpunc
alphanumeric
lettersonly
nowhitespace
ziprange
zipcodeUS
integer
vinUS
dateITA
dateNL
time
time12h
phoneUS
phoneUK
mobileUK
phonesUK
postcodeUK
strippedminlength
email2 (optional TLD)
url2 (optional TLD)
creditcardtypes
ipv4
ipv6
pattern
require_from_group
skip_or_fill_minimum
accept
extension

18

আপনি এটির জন্য jquery যাচাইকারী ব্যবহার করতে পারেন তবে আপনাকে তার জন্য jquery.uthorate.js এবং jquery.form.js ফাইল যুক্ত করতে হবে। ভ্যালিডেটর ফাইল অন্তর্ভুক্ত করার পরে আপনার বৈধতাটিকে এরকম কিছু সংজ্ঞায়িত করে।

<script type="text/javascript">
$(document).ready(function(){
    $("#formID").validate({
    rules :{
        "data[User][name]" : {
            required : true
        }
    },
    messages :{
        "data[User][name]" : {
            required : 'Enter username'
        }
    }
    });
});
</script>

আপনি দেখতে পাচ্ছেন required : true এখানে আরও অনেক সম্পত্তি রয়েছে যেমন ইমেলের জন্য আপনি email : true সংখ্যার জন্য সংজ্ঞা দিতে পারেন number : true


3
jQuery যাচাইকারী ভাল, তবে আমি মনে করি যে নতুন এইচটিএমএল 5 বৈধকরণ বৈশিষ্ট্যগুলিকে অ্যাকাউন্টে নেবে এমন একটি বৈধকারক আরও ভাল, উদাহরণস্বরূপ এরিক্ল্যাডস / এইচ 5 ভ্যালিট
ম্যাট ব্রাউন

@ ম্যাটবি।, এটির কথা কখনও শুনেনি, তবে jQuery বৈধতা প্লাগইন HTML5 বৈশিষ্ট্যগুলিকেও অ্যাকাউন্টে নেয় , যদিও আমি নিশ্চিত নই কেন আপনার প্রয়োজন / কেন উভয়ই একসাথে ব্যবহার করতে চাই।
স্পার্কি

1
Devang, jquery.form.jsহয় প্রয়োজন নেই আপনি যে কোডটি দেখিয়েছেন ব্যবহার করতে।
স্পার্কি

@ স্পার্কি যদি আপনি ইতিমধ্যে বৈধতা বার্তাগুলির জন্য পছন্দ করেন এমন কোনও নির্দিষ্ট নান্দনিকতা না তৈরি করেন তবে এইচটিএমএল 5-সমর্থনকারী ব্রাউজারকে ডিফল্ট উপায়ে বৈধতা বার্তা প্রদর্শন করার অনুমতি দেওয়া হয় বেশিরভাগ ক্ষেত্রে, যেখানে বৈধতা প্লাগইন কেবল ত্রুটি বার্তাগুলি প্রদর্শনের জন্য ফ্যালব্যাক হিসাবে ব্যবহৃত হয় পুরানো ব্রাউজারগুলিতে এবং বৈধতার জন্য যুক্তিযুক্ত HTML5 সমর্থন করে না (অতিরিক্ত জাভাস্ক্রিপ্ট ছাড়াই) without তবে এটি যে কোনও কিছুর চেয়ে আমার ব্যক্তিগত পছন্দ।
ম্যাট ব্রাউন

1
@ ম্যাটবি।, সাধারণত, jQuery ব্যবহার করা লোকেরা ব্রাউজারের বৈশিষ্ট্যগুলি থেকে দূরে সরে গিয়ে আপনি যে ক্রস ব্রাউজারের ধারাবাহিকতা সন্ধান করেন যা ব্র্যান্ড থেকে অন্য ব্র্যান্ডে পরিবর্তিত হয়। আমি জনপ্রিয় প্লাগইনগুলির সাথে লেগে থাকতে পছন্দ করি যার সমর্থনের বিশাল বেস রয়েছে এবং যদি বিকাশকারীও jQuery টিমের অংশ হয় তবে আরও ভাল, আইএমও।
স্পার্কি
আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.