当前位置：文档之家 › HTML 实验4：表单验证

HTML 实验4：表单验证

  • 格式：doc
  • 大小：77.50 KB
  • 文档页数：2

信息学院实验报告
实验4：表单验证
实验设备：
PC机：Pentium IV 2.8G CPU；1G内存；120G硬盘
OS： Windows7
应用软件：IE10.0、Dreamweaver CS5.5、Notepad

实验目的：
1. 掌握正则表达式的语法；
2. 使用正则表达式进行基本的用户输入验证

实验内容及要求：
1. 设计一个包括用户名、密码、密码确认、Email、身份证、电话号码、提交和重置按
钮的表单，各输入控件前要相应的标签，除身份证外，文本输入框后有*号。
2. 在各输入控件失去焦点后进行验证输入内容的合法性，用户名、密码必须为6－18
个字符数字下划线，密码确认必须与密码一致，Email、身份证必须符合常规要求，如有错
误在控件后面用红色字体显示相应的提示文本。
3. 提交表单时进行验证，用户名、密码、密码确认、Email必须输入内容，且所有输入
内容通过合法验证。

实验结果：

专 业： 软件工程 班 级：
姓 名： 学 号：
实验思考题：
在表单各输入控件失去焦点时进行验证后，是否可以不在提交表单时再进行验证？
可以

合集下载

web实验报告

web实验报告

本科实验报告课程名称：Web程序设计实验项目：HTML语言实验地点：逸夫楼303专业班级：学号：学生姓名：指导教师：2013年12月13日一、实验目的和要求1．掌握常用的HTML语言标记；2．利用文本编辑器建立HTML文档，制作简单网页。

二、实验内容和原理1．在文本编辑器“记事本”中输入如下的HTML代码程序，以文件名sy1.html保存，并在浏览器中运行。

（请仔细阅读下列程序语句，理解每条语句的作用）源程序清单如下：<html><head><title>Example</title></head><body bgcolor="#00DDFF"><h1><B><I><FONT COLOR="#FF00FF"><MARQUEE BGCOLOR= "#FFFF00" direction=left behavior=alternate>welcome toyou</MARQUEE></FONT></I></B></h1><hr><h2 align=center><FONT COLOR="#0000FF">A simple HTML document</FONT></h2><EM>Welcome to the world of HTML</EM><p>This is a simple HTML document.It is to give you an outline of how to write HTML file and how the<b> markup tags</b> work in the <I>HTML</I> file</p><p>Following is three chapters<ul><li>This is the chapter one</li><li><A HREF="#item">This is the chapter two</A></li><li>This is the chapter three</li></ul></p><hr><p><A NAME="item">Following is items of the chapter two</A> </p><table border=2 bgcolor=gray width="40%"><tr><th>item</th><th>content</th></tr><tr><td>item 1</td><td>font</td></tr><tr><td>item 2</td><td>table</td></tr><tr><td>item 3</td><td>form</td></tr></table><hr><p>1<p>2<p>3<p>4<p>5<p>6<p>7<p><B><I><FONT COLOR=BLUE SIZE=4>End of the example document </FONT></I></B> </p></body></html>2．编写一个能输出如图所示界面的HTML文件。

validform表单验证的实现方法

validform表单验证的实现方法

validform表单验证的实现⽅法validform插件主要把所有的验证条件和验证提⽰信息绑定到每个表单元素，这种形式⾮常⽅便，下⾯写法更加智能得到label内容来提⽰validform有什么⽤？⽹页上有⼤量的input需要你进⾏验证的时候，如果是弹窗的话，需要不停地判断，如果为空，弹窗。

如果不是数字，弹窗。

所以要将这么多验证交给⼀个js去验证。

validateform.js简单使⽤⽅法1.datatype要想标识出来想要验证的对象，我们就需要给这个对象绑定datatype属性，validform.js已经内置了10种验证格式，如果不够，我们还可以使⽤来对验证格式进⾏扩展。

1.1 datatype=*这个验证是⽤来表⽰当前的对象不能为空的，任何字符均可1.2 datatype=*6-16validform这个js有个优点，它会⾃动扩展你所写的验证格式。

不同的字段我们可能要求的字符数量不⼀样，⽤户名这⾥你写了*6-16，要求⽤户填⼊6到16位的字符。

可标题这⾥⼜要求填⼊2到5个字符，难道我们要在验证格式这⾥再写⼀个*2-5吗？不⽤！形如"*6-16"的datatype，Validform会⾃动扩展，可以指定任意的数值范围。

如内置基本类型有"*6-16"，那么你绑定 datatype="*4-12"就表⽰4到12位任意字符。

如果你⾃定义了⼀个datatype="zh2-4"，表⽰2到4位中⽂字符，那么 datatype="zh2-6"就表⽰2到6位中⽂字符。

1.3 datatype=url可以⽤来验证⽹址。

1.4 datatype=e可以⽤来验证电⼦邮箱地址1.5 datatype=m⽤来验证⼿机号，但是给的正则表达式有问题，对于新出现的177号段之类的没有加⼊进去，这块需要注意⼀下。

1.6 其他注意事项datatype⽀持规则累加或单选。

form中onsubmit

form中onsubmit

form中onsubmitform中的onsubmit属性是HTML表单中常用的属性之一。

通过onsubmit属性，可以指定在提交表单之前要执行的JavaScript代码。

本文将介绍onsubmit属性的基本用法和常见应用场景。

一、基本用法在HTML表单标签中，可以通过给form元素添加onsubmit属性来定义在提交表单之前要执行的JavaScript代码。

通常，我们将这段代码写为一个函数，并将函数名作为属性值。

例如：```html<form onsubmit="return validateForm()"><!-- 表单内容 --></form>```在上述例子中，onsubmit属性的值为`validateForm()`，表示在提交表单之前会执行名为`validateForm()`的函数。

二、常见应用场景1. 表单验证当用户提交表单时，可以利用onsubmit属性来验证表单的输入是否合法。

通过在onsubmit事件中执行验证函数，可以检查用户输入的数据是否符合要求。

例如，在输入框中要求输入的是数字，可以使用以下代码：```html<form onsubmit="return validateForm()"><input type="text" id="numberField"><input type="submit" value="提交"></form><script>function validateForm() {var numberInput =document.getElementById("numberField").value;if (isNaN(numberInput)) {alert("请输入数字！");return false; // 阻止表单提交}return true; // 允许表单提交}</script>```2. 数据保存通过onsubmit属性，可以在表单提交之前执行一些数据处理操作，例如保存用户输入的数据到数据库。

HTML的form表单标签

HTML的form表单标签

HTML的form表单标签表单HTML 表单⽤于搜集不同类型的⽤户输⼊。

㈠Form标签⑴form标签简介在HTML中，如果创建⼀个表单，就把各种表单标签放在<form></form>标签内部。

我们常说的表单，指的是⽂本框，按钮，下拉列表等的统称。

form⼀共有五个重要属性，分别是name，action，method，enctype和target属性。

语法：<form>表单各种标签</form>⑵表单名称name属性⼀个页⾯中，你的表单可能不⽌⼀个，为了区分这些表单，使⽤name属性来给表单进⾏命名。

这样也是防⽌在表单提交之后，在后台程序中出现混乱。

语法：<form name="表单名称">......</form>表单名称中不能包含特殊字符和空格。

⑶提交表单action属性在form标签中，action属性⽤于指定表单数据提交到哪个地址进⾏处理。

语法：<form action="表单的处理程序">......</form>表单的处理程序是表单要提交的地址，这个程序地址⽤来处理从表单搜集的信息。

这个地址可以是相对地址，绝对地址，也可以是⼀些其他形式的地址。

⑷传送⽅法method属性①在form标签中，methon属性的作⽤是告诉浏览器，指定将表单中的数据使⽤哪⼀种HTP提交⽅法，取值为get或post。

②methon属性取值：属性值说明get 默认值，表单数据被传送到action属性指定的URL，然后这个新的URL被送到处理程序上post 表单数据被包含在表单主体中，然后被传送到处理程序上③这两种⽅式的区别在于，get在安全性上较差，所有的表单域的值都直接显⽰出来了。

⽽post除了可见的脚本处理程序之外，其他信息都可以隐藏。

所以在实际开发中，通常选择post处理⽅式。