HTML的表单初级验证

placeholder（提示信息）

required（确保不能为空）

pattern（正则表达式验证）

1. placeholder（提示信息）

语法：

<p>账号：<input type="text" name="username" placeholder="请输入账号"></p>

2. required（确保不能为空）

语法：

<p>密码：<input type="password" name="pwd" required></p>

3. pattern（正则表达式验证）

正则表达式速查表：https://www.jb51.net/tools/regexsc.htm

语法：

<p>
<!--邮件验证-->
邮箱：
<input type="email" name="email" pattern="/^([a-z0-9_\.-]+)@([\da-z\.-]+)\.([a-z\.]{2,6})$/
/^[a-z\d]+(\.[a-z\d]+)*@([\da-z](-[\da-z])?)+(\.{1,2}[a-z]+)+$/或\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*">
</p>

当不满足上面三种前提时，报错信息如下：

        

上面三个完整代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表单学习</title>
</head>
<body>
<h1>注册</h1>
<!--表单form
action：表单的提交位置，可以是网站，也可以是一个请求处理地址
method：两种方法：post和get
get：可以在url种看到我们提交的信息，不安全，但是高效
post: 不可以在url种看到我们提交的信息，比较安全，且可以传输大文件
-->
<form action="2.请求处理的地址.html" method="get">
<!--文本输入框 ： input type = "text"-->
<p>账号：<input type="text" name="username" placeholder="请输入账号"></p>

<p>密码：<input type="password" name="pwd" required></p>

<p>
<!--邮件验证-->
邮箱：
<input type="email" name="email" pattern="/^([a-z0-9_\.-]+)@([\da-z\.-]+)\.([a-z\.]{2,6})$/
/^[a-z\d]+(\.[a-z\d]+)*@([\da-z](-[\da-z])?)+(\.{1,2}[a-z]+)+$/或\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*">
</p>
<!--提交和重置-->
<p>
<input type="submit">
<input type="reset">
</p>
</form>
</body>
</html>

HTML的表单初级验证的更多相关文章

  1. aspx中的表单验证 jquery.validate.js 的使用 以及 jquery.validate相关扩展验证(Jquery表单提交验证插件)

    这一期我们先讲在aspx中使用 jquery.validate插件进行表单的验证, 关于MVC中使用 validate我们在下一期中再讲     上面是效果,下面来说使用步骤 jQuery.Valid ...

  2. thinkphp表单自动验证

    ThinkPHP框架表单验证 对注册到test表的表单进行验证 在注册之前要对表单进行验证: 用户名非空验证,两次输入密码必须一致即相等验证,年龄在18~50之间即范围验证,邮箱格式正则验证. 自动验 ...

  3. bootstrap表单带验证

    <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8& ...

  4. easyui表单多重验证，动态设置easyui控件

    要实现的功能:在做添加学生信息的时候,利用easyui的验证功能判断 学号是否重复和学号只能为数字 最终效果如下图: 但在做这个的过程中,遇到了一系列的问题: 扩展validatebox的验证方法,最 ...

  5. jQuery form插件的使用--用 formData 参数校验表单，验证后提交（简单验证）.

    Form Plugin API 里提供了很多有用的方法可以让你轻松的处理表单里的数据和表单的提交过程. 测试环境:部署到Tomcat中的web项目. 一.引入依赖js <script src=& ...

  6. ThinkPHP表单令牌验证功能详细介绍

    注:TP版本为3.1.3 在ThinkPHP框架下,两次提交同一个表单,比如提交信息后在浏览器点击后退退回上次的页面,重新点击提交按钮,就会提示“表单令牌错误”的信息. ThinkPHP新版内置了表单 ...

  7. struct2(六) 为表单添加验证

    简介 为表单添加验证 添加校验的方法: 1. first name 不能为null 2. Email address 不能为null 3. age 必须大于18岁 为了在用户提交的时候,能够校验这个表 ...

  8. PHP - 表单与验证

    第11章 表单与验证 学习要点: 1.Header()函数 2.接收及验证数据 我们对Web感兴趣,认为它有用的原因是其主要通过基于HTML的表单发布和收集信息的能力.这些表单用来鼓励网站的反馈.进行 ...

  9. HTML5表单及其验证

    随笔- 15 文章- 1 评论- 115 HTML5表单及其验证   HTML表单一直都是Web的核心技术之一,有了它我们才能在Web上进行各种各样的应用.HTML5 Forms新增了许多新控件及其A ...

随机推荐

  1. FIB表与RIB表的区别与联系

    RIB (route information base) 和 FIB (forwarding information base),又称Ip路由表 和 CEF表,它们之间的关系可以用下面这张图片来高度概 ...

  2. .net core 3.0+unit of work （一）

    1.先将unit of work源码下载 2.引入自己的项目 3.根据原始项目示意在自己项目的startup里注册仓储 由于我不想对每个实体都注册一遍,我使用了泛型仓储(core 2.0好像不支持) ...

  3. 哈尔滨工业大学（深圳）本科毕业设计（论文）LaTeX模板：hitszthesis

    目录 本篇文章的主要内容如下: 目录 引言 Why hitszthesis? 下载方式 编译方式简介 模板说明文档(用户手册) 毕业论文撰写样例 后记 引言 去年发布过哈深本科毕业设计(论文)的LaT ...

  4. css3基础-选择器+边框与圆角+背景与渐变

    Css3选择器相关: section > div直接子元素选择器 div + article相邻兄弟选择器(在元素之后出现) div ~ article通用兄弟选择器(在元素之后出现) 属性选择 ...

  5. Android_Service的一些零散知识点_1

    service与线程不甚相同,service是Android提供的可供一个允许常驻后台的组件. 可通过StartService()启动Service和BindService()启动Service St ...

  6. Perl-统计某电路面积、功耗占比（NVDIA2019笔试）

    1.perl脚本 open IN, "<", "data.txt" or die "The file does not exist!" ...

  7. C# 调用APlayer教程

    APlayer介绍 引擎介绍: APlayer 媒体播放引擎是迅雷公司从 年开始开发的通用音视频媒体文件播放内核. 迅雷看看播放器和迅雷影音就是使用 APlayer 作为播放内核,目前迅雷看看播放器在 ...

  8. CF840D[Destiny] [主席树板子]

    模板题,提供两种思路. 1.考虑它求得是 出现个数\(>\lfloor \frac{r-l+1}{k}\rfloor\) 的最小值 那么我们可以根据如果大于这个数那么你把这个区间数列排好序然后分 ...

  9. Centos下查看CPU个数跟核数

    总核数 = 物理CPU个数 X 每颗物理CPU的核数 总逻辑CPU数 = 物理CPU个数 X 每颗物理CPU的核数 X 超线程数 查看物理CPU个数 cat /proc/cpuinfo| grep & ...

  10. STM32CubeMX自建MDK工程的基本步骤

    根据需要调节各总线频率 最下方选项,√去掉,不用实时更新库,选择自己库所在路径就好. 点击左侧, 选择"Code Generator", 选择.c 和 .h文件不分开 最后,点击& ...