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. 用Markdown编写

    计算机视觉 图像分类 对象检测 目标检测 图像分割 语义分割 实例分割

  2. go并发版爬虫

    并发版爬虫 代码实现 /crawler/main.go package main import ( "learn/crawler/engine" "learn/crawl ...

  3. 秋水逸冰实用Linux脚本收藏

    秋水逸冰的脚本非常受欢迎,奈何其本人博客已经不能访问(目前是这样,不知道别的地区是否能访问),实际上GitHub上他本人一直在维护,因为某些原因不放出他本人的GitHub地址.截止到2019年12月1 ...

  4. ie8兼容rgba写法

    ie使用filter解决半透明兼容性问题 filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#19ffffff,endCo ...

  5. 论文阅读笔记（十九）【ITIP2017】：Super-Resolution Person Re-Identification With Semi-Coupled Low-Rank Discriminant Dictionary Learning

    Introduction (1)问题描述: super resolution(SP)问题:Gallery是 high resolution(HR),Probe是 low resolution(LR). ...

  6. 09、const与extern在一起跨文件引用

    const与extern都属于属性一类. 两者加一起用需要注意的一点是,在多文件编译中,加入我们共用一个全局常量.一般的定义会是这样: A.cpp文件 const int gg_int = 100; ...

  7. Linux系统的启动原理

    Linux系统的启动原理 RHEL的启动原理BIOS自检-MBR-启动GRUB-加载内核-systemd的init进程 systemd的初始化进程加载需要的服务,挂载文件系统/etc/fstabsys ...

  8. VSCode添加git bash作为默认终端

    VSC添加git bash作为默认终端的settings.json添加 { "terminal.integrated.shell.windows": "D:\\Progr ...

  9. MacOs使用CleanMyMac X清除可清除空间

    写在前面 本文介绍如何使用CleanMyMac X清除可清除的空间 可以看到,可清除的空间达到了125.79GB,虽然说不影响系统的使用,但是在使用时间机器进行备份的时候,仍然会将可清除空间当成备份的 ...

  10. PAT (Basic Level) Practice （中文）1087 有多少不同的值 (20 分) （set）

    当自然数 n 依次取 1.2.3.…….N 时,算式 ⌊ 有多少个不同的值?(注:⌊ 为取整函数,表示不超过 x 的最大自然数,即 x 的整数部分.) 输入格式: 输入给出一个正整数 N(2). 输出 ...