Skip to main content

表单

表单的输入类型​

如文本框、单选按钮、复选框、下拉框等

<form action="/submit" method="post">
  <label for="username">用户名：</label>
  <input type="text" id="username" name="username" />
  <input type="submit" value="提交" />
</form>
  • name：表单项的字段标识

label​

label 标签用于定义表单元素的标签文本。

  • for 属性用于指定与该标签关联的表单控件的 id 属性
  • 当用户点击 label 标签时，浏览器会自动将焦点转移到与之相关联的表单控件上
<label for="username">用户名：</label> <input type="text" id="username" name="username" />

input​

属性​

1、accept 属性，指定浏览器可以处理的 MIME 类型的列表，MIME 类型是标识文档类型的标准

<input type="file" accept=".jpg, .png" />

accept 可以接受的值有哪些？

2、autofocus 属性，自动聚焦

<input type="text" autofocus />

3、inputmode 属性，指定文本框中输入的内容属性，帮助浏览器优化输入体验，例如在移动端自动弹出合适的虚拟键盘

与 type 属性不同的是，inputmode 属性并不会改变浏览器对 input 的处理，它仅仅是决定如何展示键盘

<input type="text" inputmode="emial" />

可用类型：

选项描述
text默认值，使用用户本地区域设置的标准文本输入键盘
none无虚拟键盘
tel电话输入键盘
url优化网址输入
email优化邮件地址输入
numeric数字输入键盘
decimal小数输入键盘
search优化搜索输入

4、pattern 属性，指定文本框中输入内容的正则表达式。错误信息可以使用 title 属性自定义

<form action="">
  <input name="username" pattern="[A-Za-z0-9]" title="error" />
  <input type="submit" />
</form>

5、required 属性，指定表单元素是否必填，不会阻止用户提交空格或空白字符

<form action="">
  <input text="text" required />
  <input type="submit" />
</form>

6、autocomplete 属性，指定表单元素是否启用自动完成

<input autocomplete="off" />

可用类型：

选项描述
on默认值，表示启用自动完成功能
off表示禁用自动完成功能
name表示使用表单元素的 name 属性作为自动完成的关键字
email最近输入的电子邮件地址
username用户名
current-password密码
new-password新密码
tel电话号码
address-level1国家或地区名称
address-level2省份或州名称
address-level3城市或地区名称
address-level4街道名称
country国家名称

7、multiple 属性，指定表单元素是否允许多选，用于下拉列表、文件上传和复选框等

<input type="file" multiple />

8、readonly 属性，指定表单元素是否只读

<input type="text" readonly />

9、type 属性

选项描述
text单行文本输入框
password密码输入框（密码显示为***）
radio单选框
checkbox复选框
file上传文件
button普通按钮
reset重置按钮（触发表单的 reset 事件）
submit提交按钮（触发表单的 submit 事件）
email用于输入 email
url用于输入 url
number专门用于 number
range显示为滑动条，用于输入一定范围内的值
date选取日期和时间（还包含：month、week、time、datetime、datetime-local）
color选取颜色

样式​

  • outline: none; 取消 input、textarea 的聚焦边框
  • resize: none; 禁止 textarea 可拖动
input {
  outline: 2px solid #f00;
  outline: none;
}

设置只读​

  • readonly
  • disabled
  • onfocus="this.blur()"
<input type="text" value="hello" readonly />

<input type="text" value="hello" disabled />

<input type="text" value="hello" onfocus="this.blur()" />

三种方式的区别：

  1. 使用 disabled 会使输入框变灰，不可输入，不可点击，可复制
  2. 使用 readonly 不可输入，可点击，不变灰，可复制
  3. onfocus="this.blur()"不可输入，不可点击，不变灰，不可复制

监听值变化​

<input type="text" name="planLeave" readonly />
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
<script>
  $("input[name='planLeave']")
    .trigger('input')
    .bind('input propertychange', function () {
      alert('hehe');
    });
</script>

select​

鼠标移入展开下拉框​

select有一个size属性，设置size的值即可显示option的展开数量

select.size = 6;

根据后台数据设置选中项​

默认选中后台返回的下拉项

<select name="codeShare" id="codeShare">
  <option value="0">否</option>
  <option value="1">是</option>
</select>
<button onclick="he()">click</button>

<script>
  function he() {
    const Flag = '1'; //后台返回的数据
    $("#codeShare option[value='" + Flag + "']").attr('selected', 'selected');
  }
</script>

动态加载下拉框的选项​

通过 ajax 动态加载 select 控件下拉框的 option：参考

表单校验​

校验提示​

当 input 输入框失去焦点就触发校验事件，在点击提交时让每个 input 都触发校验

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>表单验证</title>
    <style type="text/css">
      .error {
        display: none;
        color: #f00;
      }
    </style>
  </head>
  <body>
    <form method="post">
      <p>用户名：</p>
      <p>
        <input type="text" name="username" class="auth" />
        <span class="error">用户名至少3位！</span>
      </p>
      <p>密码：</p>
      <p>
        <input type="password" name="password" class="auth" />
        <span class="error">密码至少6位！</span>
      </p>
      <p>确认密码：</p>
      <p>
        <input type="password" name="respassword" class="auth" />
        <span class="error">两次密码不一致！</span>
      </p>
      <p>邮箱：</p>
      <p>
        <input type="text" name="email" class="auth" />
        <span class="error">邮箱格式不正确！</span>
      </p>
      <p>手机号码：</p>
      <p>
        <input type="text" name="phone" class="auth" maxlength="11" />
        <span class="error">手机号码错误！</span>
      </p>
      <button type="button" class="loginbtn">OK</button>
    </form>
  </body>
  <script src="jquery-3.3.1.js"></script>
  <script type="text/javascript">
    $('input[name=username]').blur(function () {
      if (this.value.length < 3) {
        $(this).next().show();
      } else {
        $(this).next().hide();
      }
    });
    $('input[name=password]').blur(function () {
      if (this.value.length < 6) {
        $(this).next().show();
      } else {
        $(this).next().hide();
      }
    });
    $('input[name=respassword]').blur(function () {
      var val1 = $('input[name=password]').val();
      if (val1 != this.value) {
        $(this).next().show();
      } else {
        $(this).next().hide();
      }
    });

    $('input[name=email]').blur(function () {
      if (!this.value.match(/^\w+@\w+\.\w+$/i)) {
        $(this).next().show();
      } else {
        $(this).next().hide();
      }
    });
    $('input[name=phone]').blur(function () {
      if (!this.value.match(/^1\d{10}$/)) {
        $(this).next().show();
      } else {
        $(this).next().hide();
      }
    });

    $('.loginbtn').click(function () {
      $('.auth').blur();

      let formData = $('form').serialize(); // 获取表单值的URL编码字符串
      let formDataArray = $('form').serializeArray(); // 获取表单值的对象数组

      console.log(formData);
      console.log(formDataArray);

      var data = {};
      $.each(formDataArray, function (i, obj) {
        data[obj.name] = obj.value;
      });
      console.log(data);
    });
  </script>
</html>

校验分页器跳转框​

// <input type="text" id="pageJump" oninput="validateInput(this)" />

var tatalPage = 5;

function validateInput(inputElement) {
  // 移除非数字字符
  inputElement.value = inputElement.value.replace(/\D/g, '');
  // 确保输入是正整数，如果输入是非正整数，则默认为1
  if (inputElement.value !== '' && parseInt(inputElement.value) <= 0) {
    inputElement.value = '1';
  }
  // 将输入值限制在最大值内
  const inputValue = parseInt(inputElement.value);
  if (inputValue > tatalPage) {
    inputElement.value = tatalPage.toString();
  }
}