表单增强与验证——提交表单（处理submit事件以及获取表单的值）

来源：互联网发布：张维为知乎编辑：程序博客网时间：2024/06/07 07:10

HTML

       <form id="login" action="/login/" method="post">        <div class="one-third column">          <img src="img/logo.png" alt="logo" id="logo" />        </div>        <div class="two-thirds column" id="main">          <fieldset>            <legend>Login</legend>            <label for="username">Username:</label>            <input type="text" id="username" name="username" />            <label for="pwd">Password:</label>            <input type="password" id="pwd" name="pwd" />            <input type="submit" value="Login" />          </fieldset>        </div><!-- .two-thirds -->      </form>    <script src="js/utilities.js"></script>    <script src="js/submit-event.js"></script>

utilities.js

// Helper function to add an event listenerfunction addEvent (el, event, callback) {  if ('addEventListener' in el) {                  // If addEventListener works    el.addEventListener(event, callback, false);   // Use it  } else {                                         // Otherwise    el['e' + event + callback] = callback;         // CreateIE fallback    el[event + callback] = function () {      el['e' + event + callback](window.event);    };    el.attachEvent('on' + event, el[event + callback]);  }}// Helper function to remove an event listenerfunction removeEvent(el, event, callback) {  if ('removeEventListener' in el) {                      // If removeEventListener works    el.removeEventListener(event, callback, false);       // Use it   } else {                                                // Otherwise    el.detachEvent('on' + event, el[event + callback]);   // Create IE fallback    el[event + callback] = null;    el['e' + event + callback] = null;  }}

submit-event.js

(function(){   var form = document.getElementById('login');       // Get form element  addEvent(form, 'submit', function(e) {             // When user submits form    e.preventDefault();                              // Stop it being sent    var elements = this.elements;                    // Get all form elements    var username = elements.username.value;          // Select username entered    var msg      = 'Welcome ' + username;            // Create welcome message    document.getElementById('main').textContent = msg; // Write welcome message  });}());

0 0