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. 字段类型(uniqueidentifier)问题

    环境:SQL 2016: 语句 select * from A where PID=JoID 上述查询语句中的Where PID=JoID条件中PID的字段类型为varchar(50)而JoID的字段 ...

  2. findContours()函数

    函数原型 findContours(InputOutputArray image, OutputArrayOfArrays contours, OutputArray hierarchy, int m ...

  3. PMP--1. PMBOK框架部分目录

    1.1 PMBOK体系框架描述https://www.cnblogs.com/hemukg/p/11821210.html 1.2 PMBOK指南组成部分https://www.cnblogs.com ...

  4. Burp Suite 实战指南--说明书

       burp使用指南 网址:https://t0data.gitbooks.io/burpsuite/content/

  5. mysql-主从备份问题小结

    一:防火墙 常用命令 firewall-cmd --state 或 systemctl status firewalld # 查看状态 systemctl start firewalld# 启动 sy ...

  6. spring cloud微服务快速教程之（九） Spring Cloud Alibaba--sentinel-限流、熔断降级

    0.前言 sentinel的限流.降级功能强大,可以在控制面板中任意制定规则,然后推送到微服务中: 可以根据URL单独制定规则,也可以根据资源名批量制定规则: 需要注意的地方是:1.GITHUB文件在 ...

  7. 并发编程之J.U.C的第一篇

    并发编程之J.U.C AQS 原理 ReentrantLock 原理 1. 非公平锁实现原理 2)可重入原理 3. 可打断原理 5) 条件变量实现原理 3. 读写锁 3.1 ReentrantRead ...

  8. PIE-SDK For C++矢量数据的投影转换

    1.功能简介 目前在地理信息领域中数据包括矢量和栅格两种数据组织形式,每一种数据都可以对投影进行转换,目前PIE SDK支持矢量和栅格数据的投影转换功能,下面对矢量数据的投影转换功能进行介绍. 2.功 ...

  9. NODEJS 使用 sqlite3 本地文件数据库

    npm install sqlite3 var sqlite3 = require('sqlite3').verbose();var db = new sqlite3.Database('WebFil ...

  10. nginx解决服务器宕机、解决跨域问题、配置防盗链、防止DDOS流量攻击

    解决服务器宕机 配置nginx.cfg配置文件,在映射拦截地址中加入代理地址响应方案 location / { proxy_connect_timeout 1; proxy_send_timeout ...