源码-JavaScript&jQuery交互式前端开发-第6章-事件-表单事件

最新推荐文章于 2023-07-13 07:00:00 发布

预见未来to50

最新推荐文章于 2023-07-13 07:00:00 发布

阅读量408

点赞数

分类专栏： Front End Tech 文章标签： CSS HTML JavaScript 表单事件用户输入校验

本文链接：https://blog.csdn.net/hpdlzu80100/article/details/52666944

版权

Front End Tech 专栏收录该内容

34 篇文章 0 订阅

订阅专栏

表单事件包括：

1. 提交事件（submit）——用来在将表单数据发送到服务器之前，校验用户输入

2. 变化事件（change）——表单元素状态发生变化时触发（建议使用change事件取代某些click事件，用户不一定只使用鼠标来和表单元素交互，还可能通过Tab键、方向键或回车键来进行交互）

3. 键入事件（input）

示例：根据用户选择提示、比选项校验

示例效果：

JS代码如下：

var elForm, elSelectPackage, elPackageHint, elTerms, elTermsHint; // Declare variables
elForm          = document.getElementById('formSignup');          // Store elements
elSelectPackage = document.getElementById('package');
elPackageHint   = document.getElementById('packageHint');
elTerms         = document.getElementById('terms');
elTermsHint     = document.getElementById('termsHint');

function packageHint() {                                 // Declare function
  var pack = this.options[this.selectedIndex].value;     // Get selected option
  if (pack === 'monthly') {                              // If monthly package
    elPackageHint.innerHTML = 'Save $10 if you pay for 1 year!';//Show this msg
  } else {                                               // Otherwise
    elPackageHint.innerHTML = 'Wise choice!';            // Show this message
  }
}

function checkTerms(event) {                             // Declare function
  if (!elTerms.checked) {                                // If checkbox ticked
    elTermsHint.innerHTML = 'You must agree to the terms.'; // Show message
    event.preventDefault();                              // Don't submit form
  }
}

//Create event listeners: submit calls checkTerms(), change calls packageHint()
elForm.addEventListener('submit', checkTerms, false);
elSelectPackage.addEventListener('change', packageHint, false);

HTML代码如下：

<!DOCTYPE html>
<html>
  <head>
    <title>JavaScript & jQuery - Chapter 6: Events - Form Events</title>
    <link rel="stylesheet" href="css/c06.css" />
  </head>
  <body>
    <div id="page">
      <h1>List King</h1>
      <form method="post" action="http://www.example.org/register" id="formSignup">
        <h2>Membership</h2>

        <label for="package" class="selectbox"> Select a package: </label>
        <select id="package">
          <option value="annual">1 year ($50)</option>
          <option value="monthly">1 month ($5)</option>
        </select>
        <div id="packageHint" class="tip"></div>

        <input type="checkbox" id="terms" />
        <label for="terms" class="checkbox"> Check to agree to terms & conditions</label>
        <div id="termsHint" class="warning"></div>

        <input type="submit" value="next" />

        </form>
      </div>
      <script src="js/form.js"></script>
    </body>
</html>

CSS代码：（参考源码-JavaScript&jQuery交互式前端开发-第6章-事件-Focus和blur事件，http://blog.csdn.net/hpdlzu80100/article/details/52651002）

PS：这个示例还是很实用的！