表单元素的常见操作

forwardXX
148 阅读4分钟

持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第1天，点击查看活动详情

表单元素的常见操作

由于最近在写关于登录、注册页面的项目，由于我没有使用任何 UI 库，而是直接对原生的表单元素进行二次封装，所以在这与大家分享一下我遇到的问题及其解决办法，本文涉及的主要问题有：

  • 如何取消 form 表单自动提交事件
  • 如何取消 input 元素的默认样式
  • 自定义单（多）选框未选中与选中的样式
  • 常见表单正则验证方法
  • 控制密码框的显示与隐藏
  • 自动检测密码强度

本文分享了前四个问题，关于控制密码框的显示与隐藏和自动检测密码强度请参考Vue2 中封装密码输入框组件。

1.如何取消 form 表单自动提交事件

form 表单元素的属性详解请参考MDN - form

以下两种情况会触发 form 提交 submit 事件：

  1. 当表单里有一个type="submit"的 button 元素，点击该按钮或按下回车键
    • button 元素的 type 属性默认值为 submit
  2. 当表单里只有一个type="text"的 input 元素时，按下键盘的回车键

由于表单提交就是触发了 form 的 submit 事件，所以只需取消该事件即可。

1.1 解决办法

  1. JS 中，对 submit 事件进行改写
<!-- js取消方法 -->
<form onsubmit="prevent"></form>
<script>
  function prevent() {
    // 做你自己想做的事，比如ajax请求后台数据
    return false; // 阻止默认表单提交
  }
</script>
  1. Vue 中可使用对应事件修饰符或按键修饰符
<!--方法1. @submit.prevent 阻止默认提交，添加在 form 标签上 -->
<template>
<form @submit.prevent>
  <input type="text">
</form>
</template>



<!--方法2. @keyup.enter 重置回车操作，添加在 input 标签上 -->
<template>
<form >
  <input type="text" @keyup.enter="submitFun">
</form>
</template>

2.更改 input 元素的默认样式

由于某些属性尚未被官方统一，所以需要在某些属性要加上厂商前缀来增强兼容性，常见前缀含义如下：

  • -webkit 表示是 chrome、safari 私有属性
  • -moz 表示是 firefox 浏览器私有属性
  • -o 表示是 Opera 私有属性
  • -ms 表示是 IE 浏览器私有属性

2.1 自定义 input 元素的边框与背景样式

默认样式：默认边框与背景.png 更改后：更改后的边框与背景.png

textarea,
input {
  background-color: inherit;
  color: inherit;
  border: none; /* 清除文本框未选中时的边框 */
  /*outline: none;  清除文本框选中时的边框 */
  outline: 1px solid red; /*未选中的边框样式 */
}
textarea:focus,
input:focus {
  outline: 1px solid blue; /*选中后的边框样式 */
}

2.2 自定义 placeholder 提示字体样式

效果图：placeholder.png

/* WebKit browsers
- Chrome ≤56,
- Safari 5-10.0
- iOS Safari 4.2-10.2
- Opera 15-43
- Opera Mobile >12
- Android Browser 2.1-4.4.4
- Samsung Internet
- UC Browser for Android
- QQ Browser */
input::-webkit-input-placeholder {
  color: red;
}
/* Firefox 4-18 */
input:-moz-placeholder {
  color: red;
}
/* Firefox 19-50 */
input::-moz-placeholder {
  color: red;
}
/* - Internet Explorer 10–11
   - Internet Explorer Mobile 10-11 */
input:-ms-input-placeholder {
  font-family: PingFangSC-Regular;
  color: rgba(0, 0, 0, 0.3);
  font-size: 32px;
}
/* Edge (also supports ::-webkit-input-placeholder) */
input::-ms-input-placeholder {
  color: red;
}

2.3 去除 number 表单的上下小箭头

input[number].png

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  -moz-appearance: none;
  -o-appearance: none;
  appearance: none;
}

2.4 清除单（多）选框的默认样式

默认样式：appearance使用前.png 更改后：appearance使用后.png

select,
input {
  -webkit-appearance: none;
  -moz-appearance: none;
  -o-appearance: none;
  appearance: none;
  margin: 0;
}

3.自定义单（多）选框未选中与选中的样式

实现该功能的步骤：

  1. 清除单选框默认的样式
  2. 添加单选框未选中的样式
  3. 添加单选框选中的样式

效果图：radio.png

/* 1.去除原有的单选框样式 */
input[type="radio"] {
  -webkit-appearance: none;
  -moz-appearance: none;
  -o-appearance: none;
  appearance: none;
  margin: 0;
}
/* 2.添加单选框未选择的样式 */
input[type="radio"]::before {
  content: "\a0"; /*不换行空格*/
  display: block;
  width: 12px;
  height: 12px;
  box-sizing: border-box;
  border: 1px solid #2a2ad1;
  border-radius: 2px;
  cursor: pointer;
}
/* 3.添加单选框选中的样式 */
input[type="radio"]:checked::before {
  background: #2a2ad1 url(../img/checked.png) center/12px;
}

4.常见表单正则校验方法

对正则表达式不熟悉的朋友可以参考该博客r2coding - 正则表达式

/**
 * 校验手机号
 * @param {*} mobile
 * @returns Boolean
 */
export function isMobile(mobile) {
  const reg =
    /^(?:(?:\+|00)86)?1(?:(?:3[\d])|(?:4[5-79])|(?:5[0-35-9])|(?:6[5-7])|(?:7[0-8])|(?:8[\d])|(?:9[189]))\d{8}$/;
  return reg.test(mobile);
}

/**
 * 校验邮箱
 * @param {string} email
 * @returns {Boolean}
 */
export function isEmail(email) {
  const reg =
    /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
  return reg.test(email);
}

/**
 * 校验url
 * @param {string} url
 * @returns {Boolean}
 */
export function isURL(url) {
  const reg =
    /^(https?|ftp):\/\/([a-zA-Z0-9.-]+(:[a-zA-Z0-9.&%$-]+)*@)*((25[0-5]|2[0-4][0-9]|1[0-9]{2}|[1-9][0-9]?)(\.(25[0-5]|2[0-4][0-9]|1[0-9]{2}|[1-9]?[0-9])){3}|([a-zA-Z0-9-]+\.)*[a-zA-Z0-9-]+\.(com|edu|gov|int|mil|net|org|biz|arpa|info|name|pro|aero|coop|museum|[a-zA-Z]{2}))(:[0-9]+)*(\/($|[a-zA-Z0-9.,?'\\+&%$#=~_-]+))*$/;
  return reg.test(url);
}

/**
 * 校验身份证
 * 身份证号码为15位或者18位，15位时全为数字，18位前17位为数字，最后一位是校验位，可能为数字或字符X
 * @param {string} card
 * @returns {Boolean}
 */
export function isIDCard(card) {
  const reg = /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/;
  return reg.test(card);
}

参考博客

  1. 使用渐进增强的方式美化复选框样式
  2. 重置 input、textarea 默认样式
  3. r2coding - 正则表达式

结语

这是我目前所了解的知识面中最好的解答，当然也有可能存在一定的误区。

所以如果对本文存在疑惑，可以在评论区留言，我会及时回复的，欢迎大家指出文中的错误观点。

最后码字不易，觉得有帮助的朋友点赞、收藏、关注走一波。

avatar
文章
阅读
粉丝