नोड.जेएस (एक्सप्रेस) फॉर्म सबमिशन पर साफ़ करता है

Question

मैं नोड.जेएस (एक्सप्रेस के साथ) में वास्तव में मूल पंजीकरण फॉर्म पर काम कर रहा हूं, और मैं बुनियादी फॉर्म सत्यापन प्रदान करने का सबसे आसान तरीका ढूंढने की कोशिश कर रहा हूं। मैं "एक्सप्रेस-वैलिडेटर" के साथ गया हूं, जो एक अच्छा काम करता है। हालांकि, मेरा लक्ष्य केवल आवश्यक सत्यापन संदेशों को दिखाने के लिए है और उपयोगकर्ता द्वारा दर्ज किए गए मानों को छोड़ दें।

ऐसा लगता है कि अनुरोध जानकारी इसे res.render में वापस नहीं ला रही है, जो मुझे लगता है। हालांकि, मैंने हर जगह देखा है जिसके बारे में मैं सोच सकता हूं और मुझे कोई संदर्भ नहीं मिल रहा है जो चर्चा करता है कि त्रुटि संदेश दिखाने के बाद फ़ॉर्म फ़ील्ड को कैसे बनाए रखा जाए।

post: function(req, res){ 

      var userName = req.body.username; 
      var password = req.body.password; 

      //Validate input 
      req.assert("username", 'Invalid email address.').isEmail(); 
      req.assert("password", 'Password cannot be empty.').notEmpty(); 
      req.assert("passwordConfirm", 'Passwords entered do not match!').equals(password); 

      //Make sure we have no validation errors 
      var pageErrors = req.validationErrors(); 
      if(!pageErrors) 
      { 
       userModel.CreateUser(userName, password, function(err){ 
        if(err) 
        { 
         //there was a problem inserting new user... probably already exists 
         //will need to check the error to confirm 
         var dbErrorMessage = "Could not insert record into database!"; 
         if(err.code === 11000) 
         { 
          //this is a duplicate entry 
          dbErrorMessage = "A user with that email address already exists!"; 
         } 

         res.render('register.html', { pageErrors: [{msg: dbErrorMessage }]}); 
        } 
        else 
        { 
         res.render('register.html', { successMessage: successMessage }); 
        } 
       }); 
      } 
      else 
      { 
       res.render('register.html', { pageErrors: pageErrors }); 
      } 

Answer 1

दुर्भाग्य से, आप मैन्युअल रूप से फार्म फिर से आबाद करने के लिए है:

नीचे एक छोटा सा मेरा दृष्टिकोण का वर्णन टुकड़ा है। यदि आपको कोई पृष्ठ त्रुटियां मिलती हैं, तो आप फ़ॉर्म मानों को दृश्य में वापस भेज देंगे।

 if(!pageErrors) 
     { 
      // ... 
     } 
     else 
     { 
      res.render('register.html', { 
       pageErrors: pageErrors, 
       userName: userName 
      }); 
     } 

और अपने ध्यान में रखते हुए, आप अगर उनके किसी भी त्रुटि है और उसके अनुसार फिर से आबाद को देखने के लिए एक सरल जांच करना होगा। आपको प्रत्येक फॉर्म फ़ील्ड के लिए कौन सी त्रुटियां उत्पन्न की जाती हैं, इसका ट्रैक रखना होगा।

<% if (userNameError) { %> 
    <input type="text" name="userName" value="<%- userName %>" /> 
<% } else { %> 
    <input type="text" name="userName" /> 
<% } %> 

एक और लोकप्रिय तरीका है कि आप अपना फॉर्म सर्वर पर AJAX के माध्यम से भेज दें, और अपनी सभी मान्यताओं को करें। यदि कोई त्रुटि है, तो दर्ज फॉर्म डेटा बना रहता है और आप त्रुटि दिखाएंगे, अन्यथा सफल लॉगिन के बाद रीडायरेक्ट करें। जावास्क्रिप्ट के साथ फ़ॉर्म सबमिट करने का उदाहरण नीचे दिया गया है।

$("#login-button").live("submit", function (e) { 

    // this will prevent the form from being uploaded to the server the conventioanl way 
    e.preventDefault(); 

    // the form data 
    var data = $(this).serialize(); 

    // this logs the user in 
    $.ajax({ 
     type: 'POST', 
     url: BASE_URL + '/login', 
     data: data, 
     dataType: 'json', 
     success: function (data, status) { 
      // successful 
     }, 

    }); 

    // superfluous fallback 
    return false; 
}); 

Answer 2

जांच http://www.quietless.com/kitchen/building-a-login-system-in-node-js-and-mongodb/

register.html मेकअप पर इस

var data = {}; 
     data.user = $('#user-input').val(); 
     data.email = $('#email-input').val(); 
     data.pass = $('#pass-input').val(); 
    $.ajax({ url: '/signup' 
      , type: 'POST' 
      , data: JSON.stringify(data) 
      , contentType: 'application/json' 
      , dataType: 'html' 
     }) 
     .done(function(data) { 
      if (data == 'ok') { 
       $('#content').html('You are registered!'); 
      } 
      else $('#account-form-container').append('<br>error:' + data); 
     }); 

हो सकता है त्रुटि की तरह: इस मामले में उपयोग करता है ऊपर के लिंक पर ट्यूटोरियल के लेखक पोस्ट नहीं कर सकते/

lib $ .ajaxForm

आपका भी उपयोग कर सकते हैं

या $ ('# MyForm')। Submit() $ करने के लिए बदलें ('# प्रस्तुत एक लिंक')। क्लिक करें()

Answer 3

नहीं है एक आसान तरीका आप उपयोग कर रहे है

app.use(express.bodyParser()) and app.use(expressValidator()); 

आप req.body उपयोग कर सकते हैं

res.render('register.html', { 
     pageErrors: pageErrors, 
     validated: req.body 
    }); 

और मुझे यकीन है जो templating भाषा का उपयोग कर रहे हैं, लेकिन आप कुछ की तरह कर सकता है नहीं कर रहा हूँ ..

<input type="text" name="userName" value="<%= pageErrors.userName.value || validated.userName %>" /> 

यह तब अच्छा इनपुट देता है यदि ठीक है या खराब इनपुट को सही करने की आवश्यकता है।

Answer 4

, सभी इनपुट के लिए एक चर सेट उदाहरण के लिए

var inputData = { 
    firstname : req.body.firstname, 
    lastname : req.body.lastname, 
    email : req.body.email, 
    username : req.body.username, 
    password : req.body.password, 
    password_confirmation : req.body.password_confirmation, 
    agreetoterms: req.body.agreetoterms 
} 

और फिर अपने दृश्य में देखने के लिए कि चर पारित

res.render('register.html', { pageErrors: [{msg: dbErrorMessage }], inputData: inputData }); 

तो

value="<%= inputData.userName %>" 

Answer 5

आप प्राप्त कर सकते हैं यह connect-flash

का उपयोग करके किया गया

पासपोर्ट के साथ साइनअप करते समय सत्यापन विफल होने पर उपयोगकर्ता द्वारा दर्ज मानों को वापस प्राप्त करने के लिए अलग-अलग फ़ाइलों में कोड स्निपेट नीचे दिए गए हैं। इस आदेश को नीचे

भागो package.json में नए पैकेज को जोड़ने के लिए

npm install connect-flash --save 

app.js

var flash = require('connect-flash'); 

app.use(flash()); // add this above passport initialize 
app.use(passport.initialize()); 
app.use(passport.session()); 

config/passport.js (में प्रपत्र डेटा लोड हो रहा है पर ध्यान केंद्रित करें फ्लैश)

passport.use('local.signup', new LocalStrategy({ 
    usernameField: 'email', 
    passwordField: 'password', 
    passReqToCallback: true 
}, function (req, email, password, done) { 
    req.checkBody('first_name', 'Firstname is missing').notEmpty(); 
    req.checkBody('last_name', 'Lastname is missing').notEmpty(); 
    req.checkBody('email', 'Invalid email').notEmpty().isEmail(); 
    req.checkBody('password', 'Password is too short. Minimum size is 6.').notEmpty().isLength({min:6}); 
    req.checkBody('confirm_password', 'Password and confirm password didn\'t not match').equals(req.body.password); 
    var errors = req.validationErrors(); 
    if (errors) { 
      var messages = []; 
      errors.forEach(function(error) { 
       messages.push(error.msg); 
      }); 
      req.flash('formdata', req.body); // load form data into flash 
      return done(null, false, req.flash('error', messages)); 
    } 
    User.findOne({'email': email}, function (err, user) { 
      if (err) { 
        req.flash('formdata', req.body); // load form data into flash 
        return done(err); 
      } 
      if (user) { 
        req.flash('formdata', req.body); // load form data into flash 
        return done(null, false, {message: 'Email is already in use.'}); 
      } 
      var newUser = new User(); 
      newUser.first_name = req.body.first_name; 
      newUser.last_name = req.body.last_name; 
      newUser.email = email; 
      newUser.password = newUser.encryptPassword(password); 
      newUser.save(function(err, result) { 
       if (err) { 
         return done(err); 
       } 
       return done(null, newUser); 
      }); 
    }); 
})); 

मार्गों/index.js

router.get('/signup', function (req, res, next) { 
    var messages = req.flash('error'); 
    var formdata = req.flash('formdata'); // Get formdata back into a variable 
    res.render('user/signup', {csrfToken: req.csrfToken(), 
     messages: messages, // pass it here to access in view file 
     hasErrors: messages.length > 0, 
     formData: formdata[0] 
    }); 
}); 

router.post('/signup', passport.authenticate('local.signup', { 
     badRequestMessage: 'Please fill the form with all details', 
     failureRedirect: '/user/signup', 
     failureFlash: true 
    }), function (req, res, next) { 
     if (req.session.oldUrl) { 
      var oldUrl = req.session.oldUrl; 
      req.session.oldUrl = null; 
      res.redirect(oldUrl); 
     } else { 
      res.redirect('/user/profile'); 
     } 
}); 

विचारों/signup.hbs (फ्लैश में प्रपत्र डेटा एक चर में वापस लोड पर ध्यान केंद्रित करें) (इनपुट तत्वों में मूल्यों पर ध्यान केंद्रित करें)

<form class="wow fadeInUp animated" data-wow-delay=".7s" action="/user/signup" method="post" > 
    <input type="text" placeholder="First Name" name="first_name" value="{{ formData.first_name }}"> 
    <input type="text" placeholder="Last Name" name="last_name" value="{{ formData.last_name }}"> 
    <input type="text" class="email" placeholder="Email Address" name="email" value="{{ formData.email }}"> 
    <input type="password" name="password" value="" class="lock" placeholder="Password"> 
    <input type="password" name="confirm_password" value="" class="lock" placeholder="Confirm Password"> 
    <input type="hidden" name="_csrf" value="{{ csrfToken }}"> 
    <input type="submit" name="Register" value="Register"></form> 

उम्मीद है कि यह मदद करता है।

Answer 6

यदि आप जेड का उपयोग कर रहे हैं और एनपीएम से वैलिडेटर बनाते हैं, तो सबसे अच्छा हिस्सा यह है कि आप जेड में एक कथन कथन कर सकते हैं और फिर आप बस res.render के साथ त्रुटि को जांचते हैं तो हम ऑब्जेक्ट भी भेजते हैं। यह

if(errors){ 
    res.render('register',{ 
     errors : errors, 
     name : name, 
     email : email, 
     username : username, 
     password : password, 
     password2 : password2 
    }); 

देखें और जेड में आप ऐसा करते हैं

input.form-control(name='name',type='text',placeholder='Enter Name',value = (errors ? '#{name}':'')) 

तो वहाँ है अगर त्रुटियों मान का नाम जो गाया जाएगा में चर के लिए सेट हो जाएगा जब हम वापस भेज

मुझे लगता है कि आप भी कर सकते हैं Angular2/Angular.js