<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>html5 form 表单练习</title>
<style type="text/css">
article,aside,figure,footer,hgroup,nav{
display: block;
}
</style>
<script type="text/javascript">
document.createElement("header");
document.createElement("section");
document.createElement("article");
document.createElement("aside");
document.createElement("nav");
document.createElement("footer");
</script>
<script type="text/javascript">
//当遇到不支持html5的浏览器的时候，我们需要自己来验证数据的有效性，来保证 传给后台的数据是有效的
function check(){
var username = document.getElementById("username").value;
var password = document.getElementById("password").value;
var email = document.getElementById("email");
if(username.length>11 || username.length<4){
alert("请输入正确的username格式！");
username.setCustomValidity("用户名格式不对！");
return false;
}
else if(!/^([a-zA-Z0-9_-])+@([a-zA-A0-9_-])+((\.[a-zA-Z0-9_-]{2,3}){1,2})$/.test(email.value)){
alert("Email格式不对！");
//自己定义错误信息，目前只有Opera浏览器支持
email.setCustomValidity("电子邮件格式不对！");
return false;
}
}
</script>
</head>
<body>
<div id="wrapper">
<section>
<article>
<!-- 保存的数据，显示的时候通过元素的list属性来引用，类型与select下拉列表的形式-->
<datalist id="user_names" style="display:none">
<option value="Nick">Nick</option>
<option value="Jobe">Jobe</option>
<option value="Lili">Lili</option>
<option value="Lucy">Lucy</option>
<option value="Henny">Henny</option>
</datalist>
<form id="reg_form" action="#" method="post" onSubmit="check();">
<label for="username">用户名：</label>
<input type="text" list="user_names" id="username" required autocomplete="on" pattern="[0-9a-zA-Z]{3,11}" placeholder="用户名" ></br>
<label for="password">密 码：</label>
<input type="password" id="password"/> </br>
<label for="email">邮 箱：</label>
<input type="text" id="email" required autofocus/></br>
<label for="birthday">生 日：</label>
<input type="date"/></br>
<input type="submit" value="提交"/>
</form>
</article>
</section>
</div>
</body>
</html>
分享到：
相关推荐
1. **HTML5表单元素**：HTML5新增了多种表单元素，如`<input type="email">`用于电子邮件输入，`<input type="date">`用于日期选择，`<input type="tel">`用于电话号码输入等。这些元素提供了内置的验证功能，减少了...
在Web开发中，HTML表单元素是用户与页面交互的重要工具。本资源"HTML常用表单元素操作源码"聚焦于如何通过HTML、JavaScript、JQuery来操作这些元素，以实现更丰富的用户体验。 1. **HTML表单元素**： - `input`：...
总结来说，这个示例项目主要展示了如何使用jQuery 1.7.2来动态管理HTML表单元素，包括复制和移除，这对于构建交互式Web应用是非常基础且重要的技能。实际代码细节需要参考`jQuery复制移除表单元素代码`文件进行学习...
在HTML5中，表单元素提供了许多新的属性和API，用于创建更复杂、更动态的用户界面。例如，`pattern`属性可以用来定义输入字段的正则表达式模式，以确保用户输入的数据符合预期格式。在这个信用卡验证示例中，开发者...
本文将详细介绍如何利用JavaScript实现动态添加表单元素，并提供一个具体示例，涉及的主要函数包括`getElementById()`、`parentNode`、`cloneNode()`、`removeAttribute()`、`innerHTML`以及`appendChild()`。...
本文将详细介绍HTML5中新引入的表单特性及其使用方法。 #### 二、表单元素位置灵活化 在XHTML中，表单内的元素如`<input>`、`<button>`、`<select>`、`<textarea>`等必须放在`<form>`标签内。但在HTML5中，这些...
在HTML5中，`label`元素是一个非常重要的组成部分，它用于与表单元素进行关联，增强用户交互体验，特别是对于移动设备来说，这种绑定尤为重要。`label`元素不仅提供了更清晰的视觉提示，还能帮助增大输入框的点击...
本文针对JavaScript中如何获取和操作HTML表单（form）中的表单元素提供了示例代码，对于前端开发者来说，这是十分基础且重要的知识点。理解并掌握如何通过JavaScript与表单元素进行交互，能够帮助开发者实现各种动态...
这篇文档简单介绍了在Vue.js中如何获取表单元素的值，并通过Element-ui组件展示输入框，使用axios库发送数据到服务器，以及应用了ES6的一些语法特性来简化代码。对于前端开发者而言，掌握这些知识点对于构建交互式的...
在HTML5中，表单元素得到了显著增强，引入了一些新的输入类型、属性以及元素，提高了用户体验和数据验证能力。这里我们将详细探讨HTML5新增的三个表单元素：Datalist、Keygen和Output。 1. Datalist元素 Datalist...
首先，HTML5引入了新的表单元素和属性，如`<input type="email">`用于电子邮件输入，`<input type="tel">`用于电话号码输入，以及`<input type="date">`用于日期选择等，这些元素可以帮助浏览器自动格式化和验证输入...
在提供的 "jiaoben139" 文件中，可能包含了使用这两种技术的示例代码和实践教程，可以帮助开发者深入理解并掌握 jQuery 和 Html5 结合验证表单的方法。通过学习这些示例，你可以了解到如何配置验证规则、处理验证...
`type="number"`的HTML表单元素允许用户通过点击或键盘操作来调整数值。这是一种常见的交互方式，在Windows等操作系统中广泛使用。例如： ```html 人数：<input type="number" value="1" /></p> ``` 在Chrome...
综上所述，这个压缩包提供的代码示例涵盖了jQuery基础操作、事件处理、表单元素操作、文本复制功能以及可能的动画效果。它为开发者提供了一种便捷的方式来实现表单元素的复制，是Web开发中实用的工具。
1. **新表单元素**：HTML5引入了一些新的表单元素，如`<input type="date">`用于日期选择，`<input type="email">`用于电子邮件输入，`<input type="range">`创建滑块控件，以及`<output>`用于显示计算结果或脚本...
Struts2框架为了简化表单的处理，提供了一系列丰富的表单标签，这些标签不仅包含了常见的HTML表单元素，还额外提供了许多高级特性。本文将详细介绍Struts2中的表单标签及其使用方法。 #### 二、Struts2表单标签概述...
HTML5为表单元素添加了一些内置的验证属性，如`required`、`pattern`、`min`、`max`等，可以在不编写任何JavaScript的情况下，实现基本的表单验证。例如，要求用户输入非空数据，可以在`<input>`标签中添加`required...
jQuery 表单验证插件通常是一个轻量级的库，用于增强原生HTML表单的功能，提供即时验证、错误提示等功能。`formValidator3.1`就是一个这样的插件，它允许开发者定义自定义验证规则，实现对用户输入的实时检查。 ###...
在JavaScript中，对HTML表单元素的操作是网页交互的核心部分。`document.form` 提供了访问和操作页面中表单的途径。以下是对标题和描述中提到的知识点的详细解释： 1. **获取表单对象**： - **方法一**：通过ID...