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. AD常用命令以及概念

    活动目录服务器常用命令合集如下: net accounts  查看第一台域控的计算机角色net accounts   查看计算机角色net share      查看共享netdom query fs ...

  2. [APIO2018] New Home 新家 [线段树，multiset]

    线段树的每个点表示当前点的前驱,即这个颜色上一次出现的位置,这个玩意multiset随便写写就完了. 重要的是怎么查询答案,无解显然先判掉. 线段树上二分就可以了 #include <bits/ ...

  3. [CF1311C] Perform the Combo

    Solution 前缀和搞一下即可 #include <bits/stdc++.h> using namespace std; #define int long long const in ...

  4. if、counf、countif、countifs、sumif、sumifs

    评分等级:=IF(C3>=90,"优秀",IF(C3>=80,"良好",IF(C3>=60,"及格","不及格& ...

  5. php ftp 使用 以及 php_connect_nonb() failed: Operation now in progress (115)

    设置 ftp_pasv($conn,true);  会出现下面错误   不设置 调用ftp 连接没问题  ftp_nlist  ftp_put ftp_get 等函数都不成功 ftp_nb_fput( ...

  6. Java连载86-List集合详解

    一.List集合 1.List集合存储元素的特点: (1)有序(List集合中存储有下标)​:存进去是这样的顺序,取出来还是按照这个顺序取出​. (2)可重复 2.深入ListJ集合 ArrayLis ...

  7. Python之filter()函数与替代实现

    介绍 filter(f,x)函数用于过滤序列并返回迭代器,结果保留x中f为True的元素,需要新的序列通过list()转换. 例子 过滤列表中的字符串,保留数字. >>> i = [ ...

  8. 网络共享服务(一)之FTP

    网络共享服务:ftp,nfs,samba比较 从跨平台角度说, samba, ftp差不多, 而nfs不支持windows平台 从挂载角度说, samba, nfs可以把远程目录挂载到本地目录上, 对 ...

  9. install multiple versions of CUDA

    https://www.pugetsystems.com/labs/hpc/How-To-Install-CUDA-10-together-with-9-2-on-Ubuntu-18-04-with- ...

  10. LeetCode 938. 二叉搜索树的范围和

    题目链接:https://leetcode-cn.com/problems/range-sum-of-bst/ 给定二叉搜索树的根结点 root,返回 L 和 R(含)之间的所有结点的值的和. 二叉搜 ...