yjgyjg4
- 浏览: 118981 次
- 性别:
- 来自: 广州
-
文章分类
最新评论
-
niezhihong：
Java代码 Contact selContact = (C ...
liferay 日历使用 -
释皇天：
<script language="javas ...
js获得当前日期和昨天日期 -
释皇天：
火狐下可以不？？？貌似不可以。
js获得当前日期和昨天日期 -
plj123：
今天遇到这个问题了，用outerHTML会报未知运行时错误。 ...
js删除tr -
javaray：
遨豪(大连)科技有限公司自2007年与Liferay,Inc合 ...
liferay 中的经常使用的
发现一个好用的验证 :
可直接访问
http://www.bencode.cn/code/validation/doc/quickstart.html
使用方法相当简单,复杂验证的话,可以自己添加验证器
<form action="" method="post">
<p>用户名：<input type="text" name="username" /></p>
<p>登录密码：<input type="text" name="password" /></p>
<p>重复密码：<input type="text" name="confirm-password" /></p>
<p>邮箱地址： <input type="text" name="email" /></p>
<p>出生日期：<input type="text" name="birthday" /></p>
<p>性别： <input id="sex-boy" name="sex" type="radio" value="1" /><label for="sex-boy">男</label> <input id="sex-girl" name="sex" type="radio" value="0" /><label for="sex-girl">女</label></p>
<p>真实姓名： <input type="text" name="truename" /></p>
<p>手机号： <input type="text" name="mobilephone" /></p>
<p><input type="submit" value="注册" /></p>
</form>
<form action="" method="post">
<p>用户名：<input type="text" name="username" /></p>
<p>登录密码：<input type="text" name="password" /></p>
<p>重复密码：<input type="text" name="confirm-password" /></p>
<p>邮箱地址： <input type="text" name="email" /></p>
<p>出生日期：<input type="text" name="birthday" /></p>
<p>性别： <input id="sex-boy" name="sex" type="radio" value="1" /><label for="sex-boy">男</label> <input id="sex-girl" name="sex" type="radio" value="0" /><label for="sex-girl">女</label></p>
<p>真实姓名： <input type="text" name="truename" /></p>
<p>手机号： <input type="text" name="mobilephone" /></p>
<p><input type="submit" value="注册" /></p>
</form>
我们需要对这个注册表单进行验证。
1. 首先你需要在head区引用validation.js。
view plaincopy to clipboardprint?
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>html page that use validation.js </title>
<script type="text/javascript" src="validation.js"></script>
</head>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>html page that use validation.js </title>
<script type="text/javascript" src="validation.js"></script>
</head>
2. 然后添加class属性值required-validate到form标签, 以告诉框架，这个form需要验证。
view plaincopy to clipboardprint?
<form action="" method="post" class="required-validate" >
<form action="" method="post" class="required-validate" >我们从简单的开始： 用户名，登录密码，重复密码，以及邮箱地址这4项不能为空
3. 添加验证器required到input text 的class属性, 添加相应提示信息到title属性。
view plaincopy to clipboardprint?
<form action="" method="post" class="required-validate">
<p>用户名：<input type="text" name="username" class="required" title="请输入用户名" /></p>
<p>登录密码：<input type="text" name="password" class="required" title="请输入密码" /></p>
<p>重复密码：<input type="text" name="confirm-password" class="required" title="请再次输入密码" /></p>
<p>邮箱地址： <input type="text" name="email" class="required" title="请输入Email地址" /></p>
...
</form>
<form action="" method="post" class="required-validate">
<p>用户名：<input type="text" name="username" class="required" title="请输入用户名" /></p>
<p>登录密码：<input type="text" name="password" class="required" title="请输入密码" /></p>
<p>重复密码：<input type="text" name="confirm-password" class="required" title="请再次输入密码" /></p>
<p>邮箱地址： <input type="text" name="email" class="required" title="请输入Email地址" /></p>
...
</form>看看效果
可以看到，示例正常运行，但提示信息单调些。
4. 现在为它添加css，更好地显示提示信息。
view plaincopy to clipboardprint?
<style type="text/css">
<!--
body {
font-size: 12px;
}
.input-text {
border: 1px solid #999999;
}
.validation-failed {
border: 1px solid #FF3300;
}
.validation-advice {
color: #FF3300;
display: inline;
margin-left: 5px;
}
-->
</style>
<style type="text/css">
<!--
body {
font-size: 12px;
}
.input-text {
border: 1px solid #999999;
}
.validation-failed {
border: 1px solid #FF3300;
}
.validation-advice {
color: #FF3300;
display: inline;
margin-left: 5px;
}
-->
</style>看看效果validation-prompt , validation-passed, validation-failed 分别指定输入域 获取焦点, 验证通过，验证失败时的样式
validation-advice 指定提示信息的样式
validation-advice-prompt, validation-advice-passed, validation-advice-failed 分别指定输入域 获取焦点，验证通过，验证失败时，提示信息的样式
5. 更复杂的验证
下面我们为: 邮箱地址， 出生日期， 真实姓名， 手机号添加验证
真实姓名，我们要求2~4个汉字（尽管不是很合理（现在的baby的姓名越来越怪），但这里只是例子）
view plaincopy to clipboardprint?
<form action="" method="post" class="required-validate">
...
<p>邮箱地址： <input type="text" name="email" class="input-text required validate-email" title="请输入Email地址" failedmessage="请输入Email地址;Email地址格式不正确，请重新输入" /></p>
<p>出生日期：<input type="text" name="birthday" class="input-text validate-date-y-m-d" title="请正确输入出生日期(例1983-6-15)" /></p>
...
<p>真实姓名： <input type="text" name="truename" class="input-text<STRONG> validate-chinese validate-length-range-2-4</STRONG>" failedmessage="请正确输入您的真实姓名(2-4个中文汉字)" /></p>
<p>手机号： <input type="text" name="mobilephone" class="input-text <STRONG>validate-mobilephone</STRONG>" title="请正确输入您的手机号吗" /></p>
...
</form>
<form action="" method="post" class="required-validate">
...
<p>邮箱地址： <input type="text" name="email" class="input-text required validate-email" title="请输入Email地址" failedmessage="请输入Email地址;Email地址格式不正确，请重新输入" /></p>
<p>出生日期：<input type="text" name="birthday" class="input-text validate-date-y-m-d" title="请正确输入出生日期(例1983-6-15)" /></p>
...
<p>真实姓名： <input type="text" name="truename" class="input-text validate-chinese validate-length-range-2-4" failedmessage="请正确输入您的真实姓名(2-4个中文汉字)" /></p>
<p>手机号： <input type="text" name="mobilephone" class="input-text validate-mobilephone" title="请正确输入您的手机号吗" /></p>
...
</form>看看效果1. 可以在class属性中指定多个验证器。
2. 除required外，指定其它验证器时需要带前缀 validate-。
3. 可以指定验证器参数，见上例。
4. 框架默认会优先从failedmessage属性中取得错误提示信息，然后是title。
5. 如果对一个输入域指定了多个验证器，并且需要对每个验证器有不同的提示信息，默认采用分号";"分隔。
5. 框架默认会从输入域的： promptmessage, passedmessage, failedmessage分别取得 获取焦点，验证通过，验证失败 的提示信息
重复密码应该和登录密码录入一致，性别中应该二选一
view plaincopy to clipboardprint?
<form action="" method="post" class="required-validate">
...
<p>登录密码：<input id="userpassword" type="text" name="password" class="input-text required" title="请输入密码" /></p>
<p>重复密码：<input type="text" name="confirm-password" class="input-text validate-equals-userpassword" title="请再次输入密码"failedmessage="两次密码录入不一致，请重新输入" /></p>
...
<p>性别： <input id="sexboy" name="sex" type="radio" value="1" class="validate-required-any-sexgirl" failedmessage="请选择性别" /><label for="sexboy">男</label> <input id="sexgirl" name="sex" type="radio" value="0" /><label for="sexgirl">女</label></p>
...
</form>
<form action="" method="post" class="required-validate">
...
<p>登录密码：<input id="userpassword" type="text" name="password" class="input-text required" title="请输入密码" /></p>
<p>重复密码：<input type="text" name="confirm-password" class="input-text validate-equals-userpassword" title="请再次输入密码"failedmessage="两次密码录入不一致，请重新输入" /></p>
...
<p>性别： <input id="sexboy" name="sex" type="radio" value="1" class="validate-required-any-sexgirl" failedmessage="请选择性别" /><label for="sexboy">男</label> <input id="sexgirl" name="sex" type="radio" value="0" /><label for="sexgirl">女</label></p>
...
</form>
看看效果
很容易吧，我们没有写任何JS，就完成了对以上注册表单的验证。
我们使用过的内置验证器(validator)有： required, equals, email, date, required-any, chinese, length-range, mobilephone 当然可以看看内置验证器，以了解更多
如果您不喜欢上述HTML验证的方式 ，或者更愿意写JS（像我一样），或者有特别的验证需求， 完全可以 使用js对表单进行验证。
如果内置验证器不满足需求，可以添加自己的验证器。
如果默认的提示方式(Advice)不满足要求，可以定制自己的Advice。
可直接访问
http://www.bencode.cn/code/validation/doc/quickstart.html
使用方法相当简单,复杂验证的话,可以自己添加验证器
<form action="" method="post">
<p>用户名：<input type="text" name="username" /></p>
<p>登录密码：<input type="text" name="password" /></p>
<p>重复密码：<input type="text" name="confirm-password" /></p>
<p>邮箱地址： <input type="text" name="email" /></p>
<p>出生日期：<input type="text" name="birthday" /></p>
<p>性别： <input id="sex-boy" name="sex" type="radio" value="1" /><label for="sex-boy">男</label> <input id="sex-girl" name="sex" type="radio" value="0" /><label for="sex-girl">女</label></p>
<p>真实姓名： <input type="text" name="truename" /></p>
<p>手机号： <input type="text" name="mobilephone" /></p>
<p><input type="submit" value="注册" /></p>
</form>
<form action="" method="post">
<p>用户名：<input type="text" name="username" /></p>
<p>登录密码：<input type="text" name="password" /></p>
<p>重复密码：<input type="text" name="confirm-password" /></p>
<p>邮箱地址： <input type="text" name="email" /></p>
<p>出生日期：<input type="text" name="birthday" /></p>
<p>性别： <input id="sex-boy" name="sex" type="radio" value="1" /><label for="sex-boy">男</label> <input id="sex-girl" name="sex" type="radio" value="0" /><label for="sex-girl">女</label></p>
<p>真实姓名： <input type="text" name="truename" /></p>
<p>手机号： <input type="text" name="mobilephone" /></p>
<p><input type="submit" value="注册" /></p>
</form>
我们需要对这个注册表单进行验证。
1. 首先你需要在head区引用validation.js。
view plaincopy to clipboardprint?
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>html page that use validation.js </title>
<script type="text/javascript" src="validation.js"></script>
</head>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>html page that use validation.js </title>
<script type="text/javascript" src="validation.js"></script>
</head>
2. 然后添加class属性值required-validate到form标签, 以告诉框架，这个form需要验证。
view plaincopy to clipboardprint?
<form action="" method="post" class="required-validate" >
<form action="" method="post" class="required-validate" >我们从简单的开始： 用户名，登录密码，重复密码，以及邮箱地址这4项不能为空
3. 添加验证器required到input text 的class属性, 添加相应提示信息到title属性。
view plaincopy to clipboardprint?
<form action="" method="post" class="required-validate">
<p>用户名：<input type="text" name="username" class="required" title="请输入用户名" /></p>
<p>登录密码：<input type="text" name="password" class="required" title="请输入密码" /></p>
<p>重复密码：<input type="text" name="confirm-password" class="required" title="请再次输入密码" /></p>
<p>邮箱地址： <input type="text" name="email" class="required" title="请输入Email地址" /></p>
...
</form>
<form action="" method="post" class="required-validate">
<p>用户名：<input type="text" name="username" class="required" title="请输入用户名" /></p>
<p>登录密码：<input type="text" name="password" class="required" title="请输入密码" /></p>
<p>重复密码：<input type="text" name="confirm-password" class="required" title="请再次输入密码" /></p>
<p>邮箱地址： <input type="text" name="email" class="required" title="请输入Email地址" /></p>
...
</form>看看效果
可以看到，示例正常运行，但提示信息单调些。
4. 现在为它添加css，更好地显示提示信息。
view plaincopy to clipboardprint?
<style type="text/css">
<!--
body {
font-size: 12px;
}
.input-text {
border: 1px solid #999999;
}
.validation-failed {
border: 1px solid #FF3300;
}
.validation-advice {
color: #FF3300;
display: inline;
margin-left: 5px;
}
-->
</style>
<style type="text/css">
<!--
body {
font-size: 12px;
}
.input-text {
border: 1px solid #999999;
}
.validation-failed {
border: 1px solid #FF3300;
}
.validation-advice {
color: #FF3300;
display: inline;
margin-left: 5px;
}
-->
</style>看看效果validation-prompt , validation-passed, validation-failed 分别指定输入域 获取焦点, 验证通过，验证失败时的样式
validation-advice 指定提示信息的样式
validation-advice-prompt, validation-advice-passed, validation-advice-failed 分别指定输入域 获取焦点，验证通过，验证失败时，提示信息的样式
5. 更复杂的验证
下面我们为: 邮箱地址， 出生日期， 真实姓名， 手机号添加验证
真实姓名，我们要求2~4个汉字（尽管不是很合理（现在的baby的姓名越来越怪），但这里只是例子）
view plaincopy to clipboardprint?
<form action="" method="post" class="required-validate">
...
<p>邮箱地址： <input type="text" name="email" class="input-text required validate-email" title="请输入Email地址" failedmessage="请输入Email地址;Email地址格式不正确，请重新输入" /></p>
<p>出生日期：<input type="text" name="birthday" class="input-text validate-date-y-m-d" title="请正确输入出生日期(例1983-6-15)" /></p>
...
<p>真实姓名： <input type="text" name="truename" class="input-text<STRONG> validate-chinese validate-length-range-2-4</STRONG>" failedmessage="请正确输入您的真实姓名(2-4个中文汉字)" /></p>
<p>手机号： <input type="text" name="mobilephone" class="input-text <STRONG>validate-mobilephone</STRONG>" title="请正确输入您的手机号吗" /></p>
...
</form>
<form action="" method="post" class="required-validate">
...
<p>邮箱地址： <input type="text" name="email" class="input-text required validate-email" title="请输入Email地址" failedmessage="请输入Email地址;Email地址格式不正确，请重新输入" /></p>
<p>出生日期：<input type="text" name="birthday" class="input-text validate-date-y-m-d" title="请正确输入出生日期(例1983-6-15)" /></p>
...
<p>真实姓名： <input type="text" name="truename" class="input-text validate-chinese validate-length-range-2-4" failedmessage="请正确输入您的真实姓名(2-4个中文汉字)" /></p>
<p>手机号： <input type="text" name="mobilephone" class="input-text validate-mobilephone" title="请正确输入您的手机号吗" /></p>
...
</form>看看效果1. 可以在class属性中指定多个验证器。
2. 除required外，指定其它验证器时需要带前缀 validate-。
3. 可以指定验证器参数，见上例。
4. 框架默认会优先从failedmessage属性中取得错误提示信息，然后是title。
5. 如果对一个输入域指定了多个验证器，并且需要对每个验证器有不同的提示信息，默认采用分号";"分隔。
5. 框架默认会从输入域的： promptmessage, passedmessage, failedmessage分别取得 获取焦点，验证通过，验证失败 的提示信息
重复密码应该和登录密码录入一致，性别中应该二选一
view plaincopy to clipboardprint?
<form action="" method="post" class="required-validate">
...
<p>登录密码：<input id="userpassword" type="text" name="password" class="input-text required" title="请输入密码" /></p>
<p>重复密码：<input type="text" name="confirm-password" class="input-text validate-equals-userpassword" title="请再次输入密码"failedmessage="两次密码录入不一致，请重新输入" /></p>
...
<p>性别： <input id="sexboy" name="sex" type="radio" value="1" class="validate-required-any-sexgirl" failedmessage="请选择性别" /><label for="sexboy">男</label> <input id="sexgirl" name="sex" type="radio" value="0" /><label for="sexgirl">女</label></p>
...
</form>
<form action="" method="post" class="required-validate">
...
<p>登录密码：<input id="userpassword" type="text" name="password" class="input-text required" title="请输入密码" /></p>
<p>重复密码：<input type="text" name="confirm-password" class="input-text validate-equals-userpassword" title="请再次输入密码"failedmessage="两次密码录入不一致，请重新输入" /></p>
...
<p>性别： <input id="sexboy" name="sex" type="radio" value="1" class="validate-required-any-sexgirl" failedmessage="请选择性别" /><label for="sexboy">男</label> <input id="sexgirl" name="sex" type="radio" value="0" /><label for="sexgirl">女</label></p>
...
</form>
看看效果
很容易吧，我们没有写任何JS，就完成了对以上注册表单的验证。
我们使用过的内置验证器(validator)有： required, equals, email, date, required-any, chinese, length-range, mobilephone 当然可以看看内置验证器，以了解更多
如果您不喜欢上述HTML验证的方式 ，或者更愿意写JS（像我一样），或者有特别的验证需求， 完全可以 使用js对表单进行验证。
如果内置验证器不满足需求，可以添加自己的验证器。
如果默认的提示方式(Advice)不满足要求，可以定制自己的Advice。
- validation-1.2.10.rar (13.4 KB)
- 下载次数: 21
分享到：
发表评论
-
div 显示隐藏
2014-08-15 11:01 696<html> <script> ... -
jquery 树形菜单
2011-08-12 15:40 810jquery树形菜单,功能很强大,有demo -
js 身份证号+滚动条
2010-06-03 13:57 860<script type="text/java ... -
js 单双引号
2010-03-18 10:45 888<script type="text/java ... -
树形下拉
2009-12-21 10:21 1119树形下拉，伸缩，备用 -
textarea 验证maxlength
2009-12-08 11:31 1281引用备用 如果只是單純地想限制 textarea 中的字數，不 ... -
js 打印功能
2009-12-07 14:01 944function printInfo() { var pr ... -
js添加table
2009-10-26 12:41 1153IE 和FF浏览器都可以用 1.向comp_table中添加 ... -
list或其他转json
2009-10-17 15:22 2331引用转自网络，也许会用上 package com.autoto ... -
js获得div中的text并变灰，不可用
2009-10-14 11:29 4891<html> <body> <s ... -
js图片
2009-09-30 17:16 659附件中的js图片显示 -
树形下拉
2009-09-30 09:38 934<!DOCTYPE html PUBLIC " ... -
js获取行数和列数
2009-09-08 14:23 2162引用来自http://www.blogjava.net/kew ... -
js删除tr
2009-09-08 12:43 5761引用以下来自网络摘 <html> <he ... -
用户选择完后在获得所选的checkbox
2009-09-01 18:05 815function getTrace_Id(){ ... -
js日期相减
2009-09-01 17:50 4203<!DOCTYPE html PUBLIC " ... -
js获得当前日期和昨天日期
2009-09-01 15:44 4767function getSysDate(){ var ... -
js 处理 text的半角逗号
2009-08-26 15:35 1518<html> <script> ... -
js获得选中chencbox的nama
2009-07-31 12:56 941<html> <head> < ... -
my97時間控件
2009-07-23 10:28 1668<!DOCTYPE html PUBLIC &quo ...
相关推荐
JS验证代码大全是汇集了多种JavaScript验证技术的资源集合，可以帮助开发者在创建网页表单、验证用户输入等方面提供有效的解决方案。 一、表单验证基础 在网页开发中，表单验证是非常重要的一环，它能够确保用户...
Validator.chm文件是一个Windows帮助文档，可能包含了关于JavaScript验证的详细指南或API参考。通常，CHM文件是由多个HTML页面组成，可以方便地搜索和查看特定主题。这个文件可能涵盖了各种验证方法、函数、类或者...
本文将详细介绍一种JavaScript验证数字的方法，并通过具体的代码示例来解释其实现原理。 #### 二、需求分析 根据题目提供的信息，我们需要实现一个功能：验证用户输入的文本框中的值是否为长度为6位的纯数字。具体...
JavaScript（简称JS）是一种轻量级的编程语言，主要用于网页和网络应用的开发。它能够直接在客户端运行，无需...通过深入研究`pubcheck.js`的源代码，我们可以学习到更多关于JavaScript验证策略和实现方式的知识。
"js验证大全"是一个集合了多种JavaScript验证技术和特效的资源包，对于程序员来说，它是一个非常宝贵的参考资料。 首先，我们来看一下这个压缩包中包含的文件： 1. **Default.aspx**：这是一个ASP.NET网页文件，...
JavaScript，简称JS，是网页开发中不可或缺的一部分，主要用于实现客户端的交互逻辑和增强用户体验。本篇文章将深入探讨三个关键知识点：JS表单验证、JS导出Excel以及JS验证。 一、JS表单验证 在Web应用程序中，...
JavaScript验证框架是Web开发中常用的一种工具，它用于在客户端对用户输入的数据进行实时检查，以确保数据的有效性和合规性，从而减少服务器端的压力并提供更好的用户体验。本项目提供的"js验证框架"是一个轻量级的...
总结，这个"js 验证 自定义 类"框架旨在提供一种高效、灵活和可扩展的JavaScript验证解决方案。通过其内置的基本验证功能和自定义规则的能力，开发者可以轻松应对各种数据验证需求，同时保持良好的用户体验。结合...
在JavaScript（JS）中，验证错误信息是网页前端开发中不可或缺的部分。这通常涉及到用户输入数据的检查，确保数据的有效性和安全性。"js验证错误信息.rar" 包含的资源显然是一个封装了验证功能的JS类，适用于文本框...
根据给定文件的信息，本文将详细介绍如何使用JavaScript（简称JS）进行输入验证，具体包括三种情况：一是确保用户只能输入数字；二是确保用户输入的是字母、数字或下划线；三是验证固定电话号码的格式是否正确。这三...
在Web开发中，JavaScript验证扮演着至关重要的角色，它能够提高用户体验，减少服务器负担，防止无效或错误的数据提交。本文将深入探讨JavaScript验证的各种方法和应用场景。 1. **基础验证** - **非空验证**：检查...
总之，JavaScript验证在密码修改过程中扮演着至关重要的角色，它可以确保用户输入的数据满足特定的安全标准，从而提高整个系统的安全性。正确实现和使用这些验证技术，对于创建一个用户友好且安全的Web应用至关重要...
在网页开发中，JavaScript（简称JS）是一种必不可少的前端编程语言，它被广泛用于处理用户交互，其中之一就是验证用户在表单中输入的数据格式。表单验证能够确保用户提交的信息符合预设的标准，例如正确的电话号码、...
js验证居民身份证,就这么简单,你懂得~
3. ComboBoxCheckTree.js：这是主要的JavaScript文件，很可能包含了ComboBoxCheckTree组件的逻辑代码，包括数据加载、用户交互处理、验证功能等。 4. treedata.js：这是一个可能存储树形数据的文件，数据可能以JSON...
总结来说，本文所列出的JavaScript验证和函数汇总，对于前端开发人员在处理数值和验证输入时提供了有价值的工具，不仅减少了重复编写验证代码的工作量，还确保了数据处理的准确性，提高开发效率和代码质量。...
**JavaScript验证**在Web开发中扮演着重要角色，主要用于确保用户在表单中输入的数据符合特定格式或规则，例如检查邮箱格式、手机号码合法性、密码强度等。在没有服务器端验证的情况下，JavaScript验证能提供即时...
JavaScript验证主要分为客户端验证和服务器端验证。客户端验证通常通过JavaScript在用户提交表单前进行，可以实时反馈错误信息，减少不必要的服务器请求，提高响应速度。而服务器端验证则是为了防止恶意用户绕过...
这个标题暗示我们，我们将探讨一个轻量级、高效且具有高度可定制性的JavaScript验证解决方案。 在描述中提到的链接（http://blog.csdn.net/luoyehanfei/article/details/42262249）可能提供了一个详细的实现方案，...