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. 蓝眼睛与红眼睛（The blue-eyed islanders puzzle）

    澳大利亚的华裔数学神童陶哲轩曾在网上贴出来一个问题 The blue-eyed islanders puzzle 让大家思考,逗大家玩儿. 说一个岛上有100个人,其中有5个红眼睛,95个蓝眼睛.这个 ...

  2. EasyUI笔记（二）Layout布局

    本系列只列出一些常用的属性.事件或方法,具体完整知识请查看API文档 Panel(面板)   1. 通过标签创建面板 <div id="p" class="easy ...

  3. TotalUninstall6破解步骤卸载软件更彻底更专业

    软件包分享,这里使用的是6.24版本 链接:https://pan.baidu.com/s/1aVd6bclk5A6puyWBfAOA2A提取码:mhl9 接下来开始安装 安装步骤: 点击安装.基本上 ...

  4. docker - apt-get更换国内源解决Dockerfile构建速度过慢

    背景 使用ubuntu镜像一般apt-get源地址都是在国外导致在构建时因为源地址问题导致下载速度极其得慢 在构建中应事先修改apt-get源地址来避免因下载速度过慢导致的构建缓慢问题 方案 在Doc ...

  5. maven的核心概念——生命周期

    第十一章生命周期 11.1 什么是Maven的生命周期 ●Maven生命周期定义了各个构建环节的执行顺序,有了这个清单,Maven就可以自动化的执行构建命令了. ●Maven有三套相互独立的生命周期, ...

  6. navicate 连接mysql8.0，个人踩坑问题汇总

    navicate 连接mysql8.0,个人踩坑问题汇总本文目录:1:安装mysql8.0新增全新验证方式,安装如果不修改mysql连接不上2:mysql启动命令问题3:navicate 运程连接My ...

  7. HTML5创建高德地图

    创建高德地图 功能真的很好很强大,有图有证据! 1.申请key值 去官网2.https://webapi.amap.com/maps?v=1.4.11&key=e22196035aaa10db ...

  8. HDU5608

    题意 英文 做法 设\(g(n)=n^2-3n+2\),有\(g(n)=\sum\limits_{d|n}f(d)\),反演一下有\(f(n)=\sum\limits_{d|n}\mu(\frac{n ...

  9. 7-5 A除以B（10 分）

    真的是简单题哈 —— 给定两个绝对值不超过100的整数A和B,要求你按照“A/B=商”的格式输出结果. 输入格式:输入在第一行给出两个整数A和B(−100≤A,B≤100),数字间以空格分隔. 输出格 ...

  10. 使用javacv 截取视频指定帧节

    个人博客 地址:https://www.wenhaofan.com/article/20190407105818 引入依赖 <dependency> <groupId>org. ...