input如何快速进行规则校验
时间:2022-07-22
本文章向大家介绍input如何快速进行规则校验,主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
input输入框是日常前端开发过程中经常会遇到的,输入框是为了进行用户交互,用户提交或输入数据,那么在安全方面我们要做好把控工作,通常我们会制定规则来限制用户输入,在表单属性之外的如何快速校验呢?我们一起来看看把!
一、input输入框类型
input的类型共有18种(其中H5新增7种类型)如下所示:
序号 |
类型 |
名称 |
---|---|---|
1 |
button |
按钮 |
2 |
checkbox |
复选框 |
3 |
file |
文件 |
4 |
hidden |
隐藏域 |
5 |
image |
图像 |
6 |
password |
密码框 |
7 |
radio |
单选框 |
8 |
reset |
重置 |
9 |
submit |
提交 |
10 |
text |
文本 |
11 |
tel |
电话 |
HTML5新增类型 | ||
12 |
邮箱 |
|
13 |
url |
链接 |
14 |
number |
数字 |
15 |
range |
范围内数字值 |
16 |
Date pickers |
日期和时间 |
17 |
search |
搜索域 |
18 |
color |
颜色 |
二、pattern属性介绍
pattern 属性规定用于验证输入字段的模式(模式指的是正则表达式)。
注释:pattern 属性适用于以下 <input> 类型:text, search, url, tel, email 以及 password 。
三、通过pattern属性来实现
需求:输入框内只能输入26个英文字母中的三个,且必须以字母N开头。
解决方案:使用表单的pattern属性来完成校验并作出提示。
四、代码
<div>
<label for="txt">字母</label>
<input type="text" name="txt" id="txt" placeholder="请输入字母" pattern="^A[A-z]{2}" title="只能输入26个英文字母中的三个字母,以A开头">
<input type="submit" value="提交">
</div>
五、结论
通过pattern属性可直接在提交表单时对输入的数据作出校验,提高用户体验,减少以往的javascript或jquery校验。
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- Android 在 res/layout 文件夹 下创建一个 子文件夹实例
- Android开发实现TextView超链接5种方式源码实例
- Android根据包名停止其他应用程序的方法
- Android APP存活检测方式
- 利用Android两行代码真正杀死你的App
- android判断应用是否已经启动的实例
- 解决android studio引用远程仓库下载慢(JCenter下载慢)
- 在Android中查看当前Activity是否销毁的操作
- Android 7.0 运行时权限弹窗问题的解决
- Android加密之全盘加密详解
- Android 实现彻底退出自己APP 并杀掉所有相关的进程
- 使用Android开发接入第三方原生SDK实现微信登录
- Android打包篇:Android Studio将代码打包成jar包教程
- Android系统制作自定义签名的例子
- 抖音短视频系统开发,日期加减