dengwenjun
- 浏览: 214172 次
- 性别:
- 来自: 深圳
-
文章分类
最新评论
<!DOCTYPE html>
<html>
<head>
<title>自定义错误信息示例</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<script type="text/javascript">
var check = function（） {
var passwd1 = document.forms[""testForm""].passwd1;
var passwd2 = document.forms[""testForm""].passwd2;
if（passwd1.value != passwd2.value） {
passwd2.setCustomValidity（"暗码不一致！"）;
return false;
} else {
passwd2.setCustomValidity（""）;
}
var email = document.forms[""testForm""].email1;
if（!email1.checkValidity（）） {
email1.setCustomValidity（"请输入正确的E-mail地址！"）;
return false;
}
return true;
}
var checkvalue = function(e){
var el = e.target;
var isvalid = el.checkValidity();
if(isvalid){
el.className= "";
el.parentElement.getElementsByTagName("label")[0].className="";
}else{
el.className= "error";
el.parentElement.getElementsByTagName("label")[0].className="error";
}
e.stopPropagation();
e.preventDefault();
}
//定义表单验证方法
function invalidHandler(evt) {
checkvalue(evt);
}
function loadDemo() {
var myform = document.getElementById("register1");
//注册表单的oninvlid事件
myform.addEventListener("invalid", invalidHandler, true);
for(var i=0;i< myform.elements.length-1;i++){
//注册表单元素的onchange事件，优化用户体验
myform.elements[i].addEventListener("change",checkvalue,false);
}
}
//在页面初始化事件（onload）时注册的自定义事件
window.addEventListener("load", loadDemo, false);
function checkPasswords() {
var pass1 = document.getElementById("password1");
var pass2 = document.getElementById("password2");
if (pass1.value != pass2.value)
pass1.setCustomValidity("两次输入的密码不匹配");
else
pass1.setCustomValidity("");
}
</script>
</head>
<body>
<form id="testForm" name="testForm" onsubmit="return check（）;">
<label for="pass1">暗码:</label><input type="password" name="passwd1"/><br/>
<label for="pass2">确认暗码:</label><input type="password" name="passwd2"/><br/>
<label for="email">E-mail:</label><input type="email" name="email1"/><br/>
<button type="submit">提交</button>
</form>
<form name="register1" id="register1">
<p><label for="runnername">RunnerName:</label>
<input id="runnername"name="runnername" type="text" placeholder="First and last name" required="required" autofocus="autofocus"/>
</p>
<p><label for="phone">Tel #:</label>
<input id="phone" name="phone" type="text" required="required" pattern="\d{3}-\d{4}-\d{4}"
placeholder="xxx-xxxx-xxxx"/></p>
<p><label for="emailaddress">E-mail:</label>
<input id="emailaddress" name="emailaddress" type="email"
placeholder="For confirmation only"/></p>
<p><label for="dob">DOB:</label>
<input id="dob" name="dob" type="date"
placeholder="MM/DD/YYYY"/></p>
<p>Count:<input type="number" id="count" name="count" min="0" max="100" step="10"/></p>
<p><label for="style">Shirt style:</label>
<input id="style" name="style" type="text" list="stylelist" title="Years of participation"
autocomplete="off"/></p>
<datalist id="stylelist">
<option value="White" label="1st Year"/>
<option value="Gray" label="2nd - 4th Year"/>
<option value="Navy" label="Veteran (5+ Years)"/>
</datalist>
<fieldset>
<legend>Expectations:</legend>
<p>
<label for="confidence">Confidence:</label>
<input id="confidence" name="level" type="range"
onchange="setConfidence(this.value)"
min="0" max="100" step="5" value="0"/>
<span id="confidenceDisplay">0%</span></p>
<p><label for="notes">Notes:</label>
<textarea id="notes" name="notes" maxLength="100"></textarea></p>
</fieldset>
<p><input type="submit" name="register" value="Submit" onclick=" checkForm()"/></p>
</form>
<form name="passwordChange">
<p><label for="password1">New Password:</label>
<input type="password" id="password1" onchange="checkPasswords()"></p>
<p><label for="password2">Confirm Password:</label>
<input type="password" id="password2" onchange="checkPasswords()"></p>
</form>
<button onclick="document.passwordChange.password1.checkValidity()">Check Validity</button>
</body>
</html>
http://www.cnblogs.com/Wenwang/archive/2012/04/26/2470403.html
分享到：
发表评论
-
hi li 下拉菜单
2013-07-06 11:40 885<!DOCTYPE html PUBLIC " ... -
ext img 选择
2013-06-12 19:48 0dsssssssssssssssssssssss -
jquery 表单验证
2013-06-12 19:46 0sssssssssssssssss -
星标显示
2013-05-09 13:43 0<html xmlns="http://www ... -
js改变选择的行颜色
2013-05-08 09:56 0<html> <script> ... -
js实现表格选择行变色
2013-05-08 09:51 0<!DOCTYPE html PUBLIC " ... -
table排序
2013-05-07 15:59 2695<html> <head> < ... -
html 选择图片显示
2013-05-03 17:27 1382<html> <head> ... -
js 动态table crud
2013-04-27 17:36 1215<%@ page language="java ... -
浏览器 跨域仿问
2010-07-23 16:45 923一种是修改firefox的设置，在firefox的地址栏中输入 ...
相关推荐
自己总结的一些html5表单元素以及表单验证，希望对大家有用！！
本文将深入探讨HTML5表单及其8种验证方法，帮助你更好地理解和运用这些功能。 一、HTML5表单的新特性 1. 新增表单元素：HTML5引入了如`<input type="date">`, `<input type="email">`, `<input type="tel">`等新...
在这个主题中，我们将深入探讨HTML表单验证及其相关技术。 HTML表单是网页中收集用户信息的基本元素，它们通常包含各种输入字段，如文本框、密码框、复选框等。为了确保这些字段中的数据有效，开发者可以使用HTML5...
以上内容涵盖了JS表单验证的主要知识点，包括各种验证规则的实现、事件监听、错误处理以及利用HTML5特性等。通过熟练掌握这些技术，可以创建出高效、友好的表单验证机制，提高用户在网页应用中的交互体验。
本文将深入探讨jQuery的表单验证插件及其应用。 **一、jQuery基础** 在了解jQuery表单验证之前，我们先回顾一下jQuery的基本概念。jQuery通过简洁的语法，如`$(selector).action()`，使得JavaScript代码更加易读...
本文详细介绍了“JS超级强大的表单验证”这一表单验证脚本的关键知识点，包括HTML结构、CSS样式、表单元素及其属性、验证规则以及JavaScript验证逻辑。通过理解和应用这些知识点，开发者可以创建出功能强大且用户...
熟悉 `form` 对象及其属性如 `elements` 和 `validity`，可以帮助开发者更高效地进行表单验证。例如，`form.elements` 返回一个包含所有表单元素的集合，而 `validity` 属性则提供了关于元素是否有效的信息。 9. *...
本文将详细介绍HTML5中新引入的表单特性及其使用方法。 #### 二、表单元素位置灵活化 在XHTML中，表单内的元素如`<input>`、`<button>`、`<select>`、`<textarea>`等必须放在`<form>`标签内。但在HTML5中，这些...
### JS验证表单大全知识点详解 #### 一、长度限制 **知识点概述：** 此功能主要用来限制用户在表单中的输入长度...以上便是基于给定内容总结出的各个知识点及其详细解析，希望对理解和应用这些表单验证技巧有所帮助。
下面我们将深入探讨如何使用jQuery进行表单验证及其相关的特效。 首先，基本的jQuery表单验证通常涉及到以下几个步骤： 1. **选择表单元素**：使用jQuery的选择器选取需要验证的表单字段，例如`$("#username")`会...
下面将详细介绍这个jQuery验证方法及其工作原理。 jQuery是一个流行的JavaScript库，它简化了DOM操作、事件处理、动画以及Ajax交互。在注册表单验证中，jQuery可以帮助我们快速高效地检查用户输入，确保数据的有效...
以上便是从提供的文件中提取并整理出来的关于JavaScript表单验证的关键知识点及其对应的实现方式。通过这些实例，可以有效地帮助开发者实现复杂的表单验证逻辑，确保用户输入的数据符合预期的要求。
jQuery Validation Plugin是一款流行的jQuery插件，它为HTML表单提供了强大的验证功能。该插件易于使用，可自定义验证规则，并且具有丰富的错误消息提示样式。以下是使用该插件的基本步骤： #### 2.1 引入资源 ...
jQuery.validate插件是由Jörn Zaefferer开发的，它的主要目标是简化和标准化HTML表单的验证过程。通过使用该插件，开发者可以轻松地添加验证规则，显示错误信息，并实现动态验证。该插件不仅易于使用，而且功能强大...
Vue Validator的使用始于在HTML模板中包裹一个`<validator>`元素，该元素内包含要验证的表单。在这个例子中，我们创建了一个简单的表单，包含用户名（username）和评论（comment）两个字段。每个输入字段都使用`v-...
本文将深入探讨Ajax在表单验证中的应用及其优势。 ### 1. 基本原理 Ajax的核心是XMLHttpRequest对象，它允许JavaScript在后台与服务器通信。在表单验证中，当用户填写表单并触发提交事件时，我们使用Ajax调用发送...
Angular表单验证是AngularJS框架中的一个重要特性，用于确保用户输入的数据符合预设的规则和标准。在Angular中，表单验证提供了丰富的功能，能够帮助开发者构建健壮且用户友好的交互界面。以下是对Angular表单验证的...
在本文中，我们将深入探讨JavaScript中的正则表达式及其在表单验证中的应用。 正则表达式（Regular Expression）是一种模式匹配工具，用于检查字符串是否符合特定的模式或格式。在JavaScript中，正则表达式常用于...