HTML的表单初级验证
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的表单初级验证的更多相关文章
- aspx中的表单验证 jquery.validate.js 的使用 以及 jquery.validate相关扩展验证(Jquery表单提交验证插件)
这一期我们先讲在aspx中使用 jquery.validate插件进行表单的验证, 关于MVC中使用 validate我们在下一期中再讲 上面是效果,下面来说使用步骤 jQuery.Valid ...
- thinkphp表单自动验证
ThinkPHP框架表单验证 对注册到test表的表单进行验证 在注册之前要对表单进行验证: 用户名非空验证,两次输入密码必须一致即相等验证,年龄在18~50之间即范围验证,邮箱格式正则验证. 自动验 ...
- bootstrap表单带验证
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8& ...
- easyui表单多重验证，动态设置easyui控件
要实现的功能:在做添加学生信息的时候,利用easyui的验证功能判断 学号是否重复和学号只能为数字 最终效果如下图: 但在做这个的过程中,遇到了一系列的问题: 扩展validatebox的验证方法,最 ...
- jQuery form插件的使用--用 formData 参数校验表单，验证后提交（简单验证）.
Form Plugin API 里提供了很多有用的方法可以让你轻松的处理表单里的数据和表单的提交过程. 测试环境:部署到Tomcat中的web项目. 一.引入依赖js <script src=& ...
- ThinkPHP表单令牌验证功能详细介绍
注:TP版本为3.1.3 在ThinkPHP框架下,两次提交同一个表单,比如提交信息后在浏览器点击后退退回上次的页面,重新点击提交按钮,就会提示“表单令牌错误”的信息. ThinkPHP新版内置了表单 ...
- struct2(六) 为表单添加验证
简介 为表单添加验证 添加校验的方法: 1. first name 不能为null 2. Email address 不能为null 3. age 必须大于18岁 为了在用户提交的时候,能够校验这个表 ...
- PHP - 表单与验证
第11章 表单与验证 学习要点: 1.Header()函数 2.接收及验证数据 我们对Web感兴趣,认为它有用的原因是其主要通过基于HTML的表单发布和收集信息的能力.这些表单用来鼓励网站的反馈.进行 ...
- HTML5表单及其验证
随笔- 15 文章- 1 评论- 115 HTML5表单及其验证 HTML表单一直都是Web的核心技术之一,有了它我们才能在Web上进行各种各样的应用.HTML5 Forms新增了许多新控件及其A ...
随机推荐
- 经济学人精读笔记7：动乱当道，你还想买LV吗？
2020/2/24 经济学人精读笔记7:动乱当道,你还想买LV吗? 标签(空格分隔): 经济学人 Part 1 Luxury goods A tale of two handbags Purveyor ...
- .net core 3.0 swagger
1.安装swagger包 2.startup里configservers Configure 3.可能出现的错误 提示error xxxxnot found 由于我创建的webapi是restful ...
- 20200228 尚硅谷-NIO
尚硅谷-NIO Java NIO简介 Java NIO(New IO.Non Blocking IO)是从Java1.4版本开始引入的新的 IO API,可以替代标准的 Java IO API. NI ...
- XSY2666
题意 有\(n\)种颜色的球,第i种有\(a_i\)个.设\(m=\sum a_i\).你要把这\(m\)个小球排成一排.有\(q\)个询问,每次给你一个\(x\),问你有多少种方案使得相邻的小球同色 ...
- EasyUI笔记（一）Base基础
总结: 1)每个UI都是通过属性.事件和方法运作的 2)用JS加载时只需传入一个参数(用大括号{}包围),包含若干个键值对,之间用逗号隔开: 3)事件也是写在JS加载时的方法中,也是键值对形式,值是匿 ...
- .net mvc 使用 aspose.cells导出数据
public class AsposeCellsHelper { public Workbook workBook; public Worksheet worksheet; Style style; ...
- Android学习笔记(一)
目录 Android学习笔记(一) 一.JDK.Android SDK 二.部分项目结构 三.字符串引用 四.外层build.gradle详解 五.app->build.gradle详解 六.日 ...
- vue动态绑定图片和背景图
1.动态绑定图片 <img class="binding-img" :src="require('../assets/images/test.png')" ...
- C#在运行时自动引入正确的Dlls
设置程序Dlls的搜索路径 1.导入Native函数 /// <summary> /// 设置Dlls的搜索路径 /// </summary> /// <param na ...
- Winform递归绑定树节点
/// <summary> /// 绑定树节点 /// </summary> /// <param name="pid"></param& ...