收集整理：css属性大全
建站教程 心晴客栈 CSS属性大全 由http://www.yonghappy.com/搜集整理
字体属性：(font)
大小 font-size:x-large;(特大) xx-small;(极小) 一般中文用不到，只要用数值就可以，单位：PX、PD
样式 font-style:oblique;(偏斜体) italic;(斜体) normal;(正常)
行高line-height: normal;(正常) 单位：PX、PD、EM
粗细font-weight: bold;(粗体) lighter;(细体) normal;(正常)
变体font-variant: small-caps;(小型大写字母) normal;(正常)
大小写text-transform: capitalize;(首字母大写) uppercase;(大写) lowercase;(小写) none;(无)
修饰text-decoration: underline;(下划线) overline;(上划线) line-through;(删除线) blink;(闪烁)
常用字体：(font-family)
“Courier New”, Courier, monospace, “Times New Roman”, Times, serif, Arial,Helvetica, sans-serif, Verdana
背景属性：(background)
色彩background-color:#FFFFFF;
图片background-image:url();
重复background-repeat:no-repeat;
滚动background-attachment:fixed;(固定) scroll;(滚动)
位置background-position:left(水平) top(垂直);
简写方法background:#000 url(..) repeat fixed left top;
区块属性： (Block)
字间距letter-spacing:normal; 数值
对刘text-align:justify;(两端对齐) left;(左对齐) right;(右对齐) center;(居中)
缩进text-indent:数值px;
垂直对齐vertical-align:baseline;(基线) sub;(下标) super;(下标) top; text-top; middle; bottom;text-bottom;
词间距word-spacing:normal; 数值
空格white-space:pre;(保留) nowrap;(不换行)
显示display:block;(块) inline;(内嵌) list-item;(列表项) run-in;(追加部分) compact;(紧凑) marker;(标记) table; inline-table;table-raw-group; table-header-group; table-footer-group; table-raw;table-column-group; table-column; table-cell; table-caption;(表格标题)
方框属性： (Box)
width:; height:; float:; clear:both; margin:; padding:; 顺序：上右下左
边框属性： (Border)
border-style: dotted;(点线) dashed;(虚线) solid; double;(双线) groove;(槽线) ridge;(脊状) inset;(凹陷) outset;
border-width:; 边框宽度
border-color:#;
简写方法border：width style color;
列表属性：(List-style)
类型list-style-type: disc;(圆点) circle;(圆圈) square;(方块) decimal;(数字) lower-roman;(小罗码数字) upper-roman; lower-alpha;upper-alpha;
位置list-style-position:outside;(外) inside;
图像list-style-image:url(..);
定位属性：(Position)
Position: absolute; relative; static;
visibility: inherit; visible; hidden;
overflow: visible; hidden; scroll; auto;
clip: rect(12px,auto,12px,auto) (裁切)
中文名 | 英文名 | Unicode | Unicode 2 |
Mac OS | |||
华文细黑 | STHeiti Light [STXihei] | 534E65877EC69ED1 | 华文细黑 |
华文黑体 | STHeiti | 534E65879ED14F53 | 华文黑体 |
华文楷体 | STKaiti | 534E658769774F53 | 华文楷体 |
华文宋体 | STSong | 534E65875B8B4F53 | 华文宋体 |
华文仿宋 | STFangsong | 534E65874EFF5B8B | 华文仿宋 |
丽黑 Pro | LiHei Pro Medium | 4E3D9ED1 Pro | 丽黑 Pro |
丽宋 Pro | LiSong Pro Light | 4E3D5B8B Pro | 丽宋 Pro |
标楷体 | BiauKai | 680769774F53 | 标楷体 |
苹果丽中黑 | Apple LiGothic Medium | 82F9679C4E3D4E2D9ED1 | 苹果丽中黑 |
苹果丽细宋 | Apple LiSung Light | 82F9679C4E3D7EC65B8B | 苹果丽细宋 |
Windows | |||
新细明体 | PMingLiU | 65B07EC6660E4F53 | 新细明体 |
细明体 | MingLiU | 7EC6660E4F53 | 细明体 |
标楷体 | DFKai-SB | 680769774F53 | 标楷体 |
黑体 | SimHei | 9ED14F53 | 黑体 |
宋体 | SimSun | 5B8B4F53 | 宋体 |
新宋体 | NSimSun | 65B05B8B4F53 | 新宋体 |
仿宋 | FangSong | 4EFF5B8B | 仿宋 |
楷体 | KaiTi | 69774F53 | 楷体 |
仿宋_GB2312 | FangSong_GB2312 | 4EFF5B8B_GB2312 | 仿宋_GB2312 |
楷体_GB2312 | KaiTi_GB2312 | 69774F53_GB2312 | 楷体_GB2312 |
微软正黑体 | Microsoft JhengHei | 5FAEx8F6F6B639ED14F53 | 微软正黑体 |
微软雅黑 | Microsoft YaHei | 5FAE8F6F96C59ED1 | 微软雅黑 |
Office | |||
隶书 | LiSu | 96B64E66 | 隶书 |
幼圆 | YouYuan | 5E7C5706 | 幼圆 |
华文细黑 | STXihei | 534E65877EC69ED1 | 华文细黑 |
华文楷体 | STKaiti | 534E658769774F53 | 华文楷体 |
华文宋体 | STSong | 534E65875B8B4F53 | 华文宋体 |
华文中宋 | STZhongsong | 534E65874E2D5B8B | 华文中宋 |
华文仿宋 | STFangsong | 534E65874EFF5B8B | 华文仿宋 |
方正舒体 | FZShuTi | 65B96B6382124F53 | 方正舒体 |
方正姚体 | FZYaoti | 65B96B6359DA4F53 | 方正姚体 |
华文彩云 | STCaiyun | 534E65875F694E91 | 华文彩云 |
华文琥珀 | STHupo | 534E6587742573C0 | 华文琥珀 |
华文隶书 | STLiti | 534E658796B64E66 | 华文隶书 |
华文行楷 | STXingkai | 534E6587884C6977 | 华文行楷 |
华文新魏 | STXinwei | 534E658765B09B4F | 华文新魏 |
css属性代码大全
一 CSS文字属性：
color : #999999; /*文字颜色*/
font-family : 宋体,sans-serif; /*文字字体*/
font-size : 9pt; /*文字大小*/
font-style:itelic; /*文字斜体*/
font-variant:small-caps; /*小字体*/
letter-spacing : 1pt; /*字间距离*/
line-height : 200%; /*设置行高*/
font-weight:bold; /*文字粗体*/
vertical-align:sub; /*下标字*/
vertical-align:super; /*上标字*/
text-decoration:line-through; /*加删除线*/
text-decoration:overline; /*加顶线*/
text-decoration:underline; /*加下划线*/
text-decoration:none; /*删除链接下划线*/
text-transform : capitalize; /*首字大写*/
text-transform : uppercase; /*英文大写*/
text-transform : lowercase; /*英文小写*/
text-align:right; /*文字右对齐*/
text-align:left; /*文字左对齐*/
text-align:center; /*文字居中对齐*/
text-align:justify; /*文字分散对齐*/
vertical-align属性
vertical-align:top; /*垂直向上对齐*/
vertical-align:bottom; /*垂直向下对齐*/
vertical-align:middle; /*垂直居中对齐*/
vertical-align:text-top; /*文字垂直向上对齐*/
vertical-align:text-bottom; /*文字垂直向下对齐*/
二、CSS边框空白
padding-top:10px; /*上边框留空白*/
padding-right:10px; /*右边框留空白*/
padding-bottom:10px; /*下边框留空白*/
padding-left:10px; /*左边框留空白
三、CSS符号属性：
list-style-type:none; /*不编号*/
list-style-type:decimal; /*阿拉伯数字*/
list-style-type:lower-roman; /*小写罗马数字*/
list-style-type:upper-roman; /*大写罗马数字*/
list-style-type:lower-alpha; /*小写英文字母*/
list-style-type:upper-alpha; /*大写英文字母*/
list-style-type:disc; /*实心圆形符号*/
list-style-type:circle; /*空心圆形符号*/
list-style-type:square; /*实心方形符号*/
list-style-image:url(/dot.gif); /*图片式符号*/
list-style-position:outside; /*凸排*/
list-style-position:inside; /*缩进*/
四、CSS背景样式：
background-color:#F5E2EC; /*背景颜色*/
background:transparent; /*透视背景*/
background-image : url(/image/bg.gif); /*背景图片*/
background-attachment : fixed; /*浮水印固定背景*/
background-repeat : repeat; /*重复排列-网页默认*/
background-repeat : no-repeat; /*不重复排列*/
background-repeat : repeat-x; /*在x轴重复排列*/
background-repeat : repeat-y; /*在y轴重复排列*/
指定背景位置
background-position : 90% 90%; /*背景图片x与y轴的位置*/
background-position : top; /*向上对齐*/
background-position : buttom; /*向下对齐*/
background-position : left; /*向左对齐*/
background-position : right; /*向右对齐*/
background-position : center; /*居中对齐*/
五、CSS连接属性：
a /*所有超链接*/
a:link /*超链接文字格式*/
a:visited /*浏览过的链接文字格式*/
a:active /*按下链接的格式*/
a:hover /*鼠标转到链接*/
鼠标光标样式：
链接手指 CURSOR:hand
十字体cursor:crosshair
箭头朝下cursor:s-resize
十字箭头cursor:move
箭头朝右cursor:move
加一问号cursor:help
箭头朝左cursor:w-resize
箭头朝上cursor:n-resize
箭头朝右上cursor:ne-resize
箭头朝左上cursor:nw-resize
文字I型 cursor:text
箭头斜右下cursor:se-resize
箭头斜左下cursor:sw-resize
漏斗 cursor:wait
光标图案(IE6) p {cursor:url(“光标文件名.cur”),text;}
六、CSS框线一览表：
border-top : 1px solid #6699cc; /*上框线*/
border-bottom : 1px solid #6699cc; /*下框线*/
border-left : 1px solid #6699cc; /*左框线*/
border-right : 1px solid #6699cc; /*右框线*/
以上是建议书写方式,但也可以使用常规的方式 如下:
border-top-color : #369 /*设置上框线top颜色*/
border-top-width :1px /*设置上框线top宽度*/
border-top-style : solid/*设置上框线top样式*/
其他框线样式
solid /*实线框*/
dotted /*虚线框*/
double /*双线框*/
groove /*立体内凸框*/
ridge /*立体浮雕框*/
inset /*凹框*/
outset /*凸框*/
七、CSS表单运用：
文字方块
按钮
复选框
选择钮
多行文字方块
下拉式菜单 选项1选项2
八、CSS边界样式：
margin-top:10px; /*上边界*/
margin-right:10px; /*右边界值*/
margin-bottom:10px; /*下边界值*/
margin-left:10px; /*左边界值*/
CSS 属性： 字体样式(Font Style)
序号 中文说明 标记语法
1 字体样式{font:font-style font-variant font-weight font-size font-family}
2 字体类型{font-family:”字体1″,”字体2″,”字体3″,…}
3 字体大小{font-size:数值|inherit| medium| large| larger| x-large| xx-large| small| smaller|x-small| xx-small}
4 字体风格{font-style:inherit|italic|normal|oblique}
5 字体粗细 {font-weight:100-900|bold|bolder|lighter|normal;}
6 字体颜色 {color:数值;}
7 阴影颜色{text-shadow:16位色值}
8 字体行高 {line-height:数值|inherit|normal;}
9 字 间 距 {letter-spacing:数值|inherit|normal}
10 单词间距{word-spacing:数值|inherit|normal}
11 字体变形{font-variant:inherit|normal|small-cps }
12 英文转换{text-transform:inherit|none|capitalize|uppercase|lowercase}
13 字体变形{font-size-adjust:inherit|none}
14 字体{font-stretch:condensed|expanded|extra-condensed|extra-expanded|inherit|narrower|normal|semi-condensed|semi-expanded|ultra-condensed|ultra-expanded|wider}
文本样式(TextStyle)
序号 中文说明 标记语法
1 行 间 距 {line-height:数值|inherit|normal;}
2 文本修饰{text-decoration:inherit|none|underline|overline|line-through|blink}
3 段首空格 {text-indent:数值|inherit}
4 水平对齐{text-align:left|right|center|justify}
5 垂直对齐{vertical-align:inherit|top|bottom|text-top|text-bottom|baseline|middle|sub|super}
6 书写方式{writing-mode:lr-tb|tb-rl}
背景样式
序号 中文说明 标记语法
1 背景颜色{background-color:数值}
2 背景图片{background-image: url(URL)|none}
3 背景重复{background-repeat:inherit|no-repeat|repeat|repeat-x|repeat-y}
4 背景固定{background-attachment:fixed|scroll}
5 背景定位{background-position:数值|top|bottom|left|right|center}
6 背影样式{background:背景颜色|背景图象|背景重复|背景附件|背景位置}
框架样式(BoxStyle)
序号 中文说明 标记语法
1 边界留白{margin:margin-top margin-right margin-bottom margin-left}
2 补白{padding:padding-top padding-right padding-bottom padding-left}
3 边框宽度{border-width:border-top-width border-right-width border-bottom-widthborder-left-width}
宽度值：thin|medium|thick|数值
4 边框颜色{border-color:数值 数值 数值 数值}数值：分别代表top、right、bottom、left颜色值
5 边框风格{border-style:none|hidden|inherit|dashed|solid|double|inset|outset|ridge|groove}
6 边框{border:border-width border-style color}
上 边 框 {border-top:border-top-width border-style color}
右 边 框 {border-right:border-right-width border-style color}
下 边 框 {border-bottom:border-bottom-width border-style color}
左 边 框 {border-left:border-left-width border-style color}
7 宽度 {width:长度|百分比| auto}
8 高度 {height:数值|auto}
9 漂浮{float:left|right|none}
10 清除{clear:none|left|right|both}
分类列表
序号 中文说明 标记语法
1 控制显示{display:none|block|inline|list-item}
2 控制空白{white-space:normal|pre|nowarp}
3 符号列表{list-style-type:disc|circle|square|decimal|lower-roman|upper-roman|lower-alpha|upper-alpha|none}
4 图形列表{list-style-image:URL}
5 位置列表{list-style-position:inside|outside}
6 目录列表{list-style:目录样式类型|目录样式位置|url}
7 鼠标形状{cursor:hand|crosshair|text|wait|move|help|e-resize|nw-resize|w-resize|s-resize|se-resize|sw-resize}
posted @ 2009-06-08 13:39 DELPHI&.NET初学者[TECSOON WENDAY] 阅读(143) | 评论(0) | 编辑
表单验证代码全集
1:js 字符串长度限制、判断字符长度、js限制输入、限制不能输入、textarea 长度限制
2.:js判断汉字、判断是否汉字 、只能输入汉字
3:js判断是否输入英文、只能输入英文
4:js只能输入数字,判断数字、验证数字、检测数字、判断是否为数字、只能输入数字
5:只能输入英文字符和数字
6: js email验证 、js 判断email 、信箱/邮箱格式验证
7:js字符过滤,屏蔽关键字
8:js密码验证、判断密码
2.1: js 不为空、为空或不是对象 、判断为空、判断不为空
2.2:比较两个表单项的值是否相同
2.3:表单只能为数字和”_”,
2.4:表单项输入数值/长度限定
2.5:中文/英文/数字/邮件地址合法性判断
2.6:限定表单项不能输入的字符
2.7表单的自符控制
2.8:form文本域的通用校验函数
1. 长度限制
1.
2. <script>
3. function test()
4. {
5. if(document.a.b.value.length>50)
6. {
7. alert("不能超过50个字符！");
8. document.a.b.focus();
9. returnfalse;
10. }
11. }
12. </script>
13. <formname=aonsubmit="return test()">
14. <textareaname="b"cols="40"wrap="VIRTUAL"rows="6"></textarea>
15. <inputtype="submit"name="Submit"value="check">
16. </form>
2. 只能是汉字
1. <inputonkeyup="value="/oblog/value.replace(/[^u4E00-u9FA5]/g,'')">
3.” 只能是英文
1. <scriptlanguage=javascript>
2. function onlyEng()
3. {
4. if(!(event.keyCode>=65&&event.keyCode<=90))
5. event.returnvalue=false;
6. }
7. </script>
8.
9. <inputonkeydown="onlyEng();">
4. 只能是数字
1. <scriptlanguage=javascript>
2. function onlyNum()
3. {
4. if(!((event.keyCode>=48&&event.keyCode<=57)||(event.keyCode>=96&&event.keyCode<=105)))
5. //考虑小键盘上的数字键
6. event.returnvalue=false;
7. }
8. </script>
9.
10. <inputonkeydown="onlyNum();">
5. 只能是英文字符和数字
<input οnkeyup=”value=”/oblog/value.replace(/[W]/g,””)“onbeforepaste=”clipboardData.setData(‘text’,clipboardData.getData(‘text’).replace(/[^d]/g,”))”>
6. 验证邮箱格式
<SCRIPT LANGUAGE=javascript RUNAT=Server>
function isEmail(strEmail) {
if(strEmail.search(/^w+((-w+)|(.w+))*@[A-Za-z0-9]+((.|-)[A-Za-z0-9]+)*.[A-Za-z0-9]+$/)!= -1)
return true;
else
alert(“oh”);
}
</SCRIPT>
<input type=text οnblur=isEmail(this.value)>
7. 屏蔽关键字(这里屏蔽***和****)
<script language=”javascript1.2″>
function test() {
if((a.b.value.indexOf (“***”) == 0)||(a.b.value.indexOf (“****”) == 0)){
alert(“:)”);
a.b.focus();
return false;}
}
</script>
<form name=a οnsubmit=”return test()”>
<input type=text name=b>
<input type=”submit” name=”Submit” value=”check”>
</form>
8. 两次输入密码是否相同
<FORM METHOD=POST ACTION=””>
<input type=”password” id=”input1″>
<input type=”password” id=”input2″>
<input type=”button” value=”test” οnclick=”check()”>
</FORM>
<script>
function check()
{
with(document.all){
if(input1.value!=input2.value)
{
alert(“false”)
input1.value = “”;
input2.value = “”;
}
else document.forms[0].submit();
}
}
</script>
够了吧
屏蔽右键 很酷
οncοntextmenu=”return false” οndragstart=”return false” onselectstart=”returnfalse”
加在body中
二
2.1 表单项不能为空
<scriptlanguage=”javascript”>
<!–
function CheckForm()
{
if (document.form.name.value.length == 0) {
alert(“请输入您姓名!”);
document.form.name.focus();
return false;
}
return true;
}
–>
</script>
2.2 比较两个表单项的值是否相同
1. <scriptlanguage="javascript">
2. <!--
3. functionCheckForm()
4. if(document.form.PWD.value != document.form.PWD_Again.value){
5. alert("您两次输入的密码不一样！请重新输入.");
6. document.ADDUser.PWD.focus();
7. returnfalse;
8. }
9. returntrue;
10. }
11. -->
12. </script>
2.3 表单项只能为数字和”_”,用于电话/银行帐号验证上,可扩展到域名注册等
1. <scriptlanguage="javascript">
2. <!--
3. function isNumber(String)
4. {
5. varLetters="1234567890-";//可以自己增加可输入值
6. var i;
7. var c;
8. if(String.charAt(0)=='-')
9. returnfalse;
10. if(String.charAt(String.length -1)=='-')
11. returnfalse;
12. for( i =0; i <String.length; i ++)
13. {
14. c =String.charAt( i );
15. if(Letters.indexOf( c )<0)
16. returnfalse;
17. }
18. returntrue;
19. }
20. functionCheckForm()
21. {
22. if(! isNumber(document.form.TEL.value)){
23. alert("您的电话号码不合法！");
24. document.form.TEL.focus();
25. returnfalse;
26. }
27. returntrue;
28. }
29. -->
30. </script>
2.4 表单项输入数值/长度限定
1. <scriptlanguage="javascript">
2. <!--
3. functionCheckForm()
4. {
5. if(document.form.count.value >100|| document.form.count.value <1)
6. {
7. alert("输入数值不能小于零大于100!");
8. document.form.count.focus();
9. returnfalse;
10. }
11. if(document.form.MESSAGE.value.length<10)
12. {
13. alert("输入文字小于10!");
14. document.form.MESSAGE.focus();
15. returnfalse;
16. }
17. returntrue;
18. }
19. //-->
20. </script>
2.5 中文/英文/数字/邮件地址合法性判断
1. <SCRIPTLANGUAGE="javascript">
2. <!--
3.
4. function isEnglish(name)//英文值检测
5. {
6. if(name.length ==0)
7. returnfalse;
8. for(i =0; i < name.length; i++){
9. if(name.charCodeAt(i)>128)
10. returnfalse;
11. }
12. returntrue;
13. }
14.
15. function isChinese(name)//中文值检测
16. {
17. if(name.length ==0)
18. returnfalse;
19. for(i =0; i < name.length; i++){
20. if(name.charCodeAt(i)>128)
21. returntrue;
22. }
23. returnfalse;
24. }
25.
26. function isMail(name)// E-mail值检测
27. {
28. if(! isEnglish(name))
29. returnfalse;
30. i = name.indexOf(" at ");
31. j = name dot lastIndexOf(" at ");
32. if(i ==-1)
33. returnfalse;
34. if(i != j)
35. returnfalse;
36. if(i == name dot length)
37. returnfalse;
38. returntrue;
39. }
40.
41. function isNumber(name)//数值检测
42. {
43. if(name.length ==0)
44. returnfalse;
45. for(i =0; i < name.length; i++){
46. if(name.charAt(i)<"0"|| name.charAt(i)>"9")
47. returnfalse;
48. }
49. returntrue;
50. }
51.
52. functionCheckForm()
53. {
54. if(! isMail(form.Email.value)){
55. alert("您的电子邮件不合法！");
56. form.Email.focus();
57. returnfalse;
58. }
59. if(! isEnglish(form.name.value)){
60. alert("英文名不合法！");
61. form.name.focus();
62. returnfalse;
63. }
64. if(! isChinese(form.cnname.value)){
65. alert("中文名不合法！");
66. form.cnname.focus();
67. returnfalse;
68. }
69. if(! isNumber(form.PublicZipCode.value)){
70. alert("邮政编码不合法！");
71. form.PublicZipCode.focus();
72. returnfalse;
73. }
74. returntrue;
75. }
76. //-->
77. </SCRIPT>
2.6 限定表单项不能输入的字符
1. <scriptlanguage="javascript">
2. <!--
3.
4. function contain(str,charset)// 字符串包含测试函数
5. {
6. var i;
7. for(i=0;i<charset.length;i++)
8. if(str.indexOf(charset.charAt(i))>=0)
9. returntrue;
10. returnfalse;
11. }
12.
13. functionCheckForm()
14. {
15. if((contain(document.form.NAME.value,"%()><"))||(contain(document.form.MESSAGE.value,"%()><")))
16. {
17. alert("输入了非法字符");
18. document.form.NAME.focus();
19. returnfalse;
20. }
21. returntrue;
22. }
23. //-->
24. </script>
1. 检查一段字符串是否全由数字组成
—————————————
<script language=”Javascript”><!–
function checkNum(str){return str.match(/D/)==null}
alert(checkNum(“1232142141”))
alert(checkNum(“123214214a1”))
// –></script>
2. 怎么判断是否是字符
—————————————
if (/[^x00-xff]/g.test(s)) alert(“含有汉字”);
else alert(“全是字符”);
3. 怎么判断是否含有汉字
—————————————
if (escape(str).indexOf(“%u”)!=-1) alert(“含有汉字”);
else alert(“全是字符”);
4. 邮箱格式验证
—————————————
//函数名：chkemail
//功能介绍：检查是否为EmailAddress
//参数说明：要检查的字符串
//返回值：0：不是 1：是
function chkemail(a)
{ var i=a.length;
var temp = a.indexOf(‘@’);
var tempd = a.indexOf(‘.’);
if (temp > 1) {
if ((i-temp) > 3){
if ((i-tempd)>0){
return 1;
}
}
}
return 0;
}
5. 数字格式验证
—————————————
//函数名：fucCheckNUM
//功能介绍：检查是否为数字
//参数说明：要检查的数字
//返回值：1为是数字，0为不是数字
function fucCheckNUM(NUM)
{
var i,j,strTemp;
strTemp=”0123456789″;
if ( NUM.length== 0)
return 0
for (i=0;i<NUM.length;i++)
{
j=strTemp.indexOf(NUM.charAt(i));
if (j==-1)
{
//说明有字符不是数字
return 0;
}
}
//说明是数字
return 1;
}
6. 电话号码格式验证
—————————————
//函数名：fucCheckTEL
//功能介绍：检查是否为电话号码
//参数说明：要检查的字符串
//返回值：1为是合法，0为不合法
function fucCheckTEL(TEL)
{
var i,j,strTemp;
strTemp=”0123456789-()# “;
for (i=0;i<TEL.length;i++)
{
j=strTemp.indexOf(TEL.charAt(i));
if (j==-1)
{
//说明有字符不合法
return 0;
}
}
//说明合法
return 1;
}
7. 判断输入是否为中文的函数
—————————————
function ischinese(s){
var ret=true;
for(var i=0;i<s.length;i++)
ret=ret && (s.charCodeAt(i)>=10000);
return ret;
}
8. 综合的判断用户输入的合法性的函数
—————————————
<script language=”javascript”>
//限制输入字符的位数开始
//m是用户输入，n是要限制的位数
function issmall(m,n)
{
if ((m<n) && (m>0))
{
return(false);
}
else
{return(true);}
}
9. 判断密码是否输入一致
—————————————
function issame(str1,str2)
{
if (str1==str2)
{return(true);}
else
{return(false);}
}
10. 判断用户名是否为数字字母下滑线
1. function notchinese(str){
2. var reg=/[^A-Za-z0-9_]/g
3. if(reg.test(str)){
4. return(false);
5. }else{
6. return(true);}
7. }
2.8. form文本域的通用校验函数
—————————————
作用：检测所有必须非空的input文本，比如姓名，账号，邮件地址等等。
该校验现在只针对文本域，如果要针对form里面的其他域对象，可以改变判断条件。
使用方法：在要检测的文本域中加入title文字。文字是在提示信息，你要提示给用户的该字段的中文名。比如要检测用户名
html如下<inputname=”txt_1″ title=”姓名”>,当然，最好用可视化工具比如dreamweaver什么的来编辑域。
如果要检测数字类型数据的话，再把域的id统一为sz.
javascript判断日期类型比较麻烦，所以就没有做日期类型校验的程序了.高手可以补充。
程序比较草，只是提供一个思路。抛砖引玉！：）
哦，对了，函数调用方法：
1. < form οnsubmit="return dovalidate()">
2. function dovalidate()
3. {
4. fm=document.forms[0] //只检测一个form,如果是多个可以改变判断条件
5. for(i=0;i<fm.length;i++)
6. {
7. //检测判断条件，根据类型不同可以修改
8. if(fm.tagName.toUpperCase()=="INPUT" &&fm.type.toUpperCase()=="TEXT"&& (fm.title!=""))
9.
10. if(fm.value="/blog/="")//
11. {
12. str_warn1=fm.title+"不能为空!";
13. alert(str_warn1);
14. fm.focus();
15. return false;
16. }
17. if(fm.id.toUpperCase()=="SZ")//数字校验
18. {
19. if(isNaN(fm.value))
20. { str_warn2=fm.title+"格式不对";
21. alert(str_warn2);
22. fm.focus();
23. return false;
24. }
25. }
26. }
27. return true;
28. }
建立JavaScript正则表达式库简化表单验证
本文介绍如何创建一个可用于任何Web页面的“正则表达式库”——通过将表单验证代码保存为一个独立的文件，我们可以避免为不同表单重写类似的验证代码，只需在HTML页面中包含这个库文件即可。
一、HTML元素属性与JavaScript对象属性
我们知道，HTML允许我们为元素指定自定义属性。如对于表单中的文本输入框元素，我们可以给它指定一个称为validator的属性：
1. <formid="exampleForm">
2. <inputtype="text"name="input1"validator="whatsThisFor?">
3. ...
4. </form>
该属性将被浏览器的表现引擎忽略，即它对于页面的显示是没有任何影响的。不过，就像所有其它“正式的”属性一样，自定义属性对脚本语言也是可见的，即我们可以在JavaScript代码中引用它并分析它的值。当然，在IE4和N4中引用元素的方法是不同的。下面这个引用自定义属性的示例只能在IE4（及其更高版本）下工作，但其原理也适用于Netscape浏览器：
1. if(document.all.exampleForm.input1.validator=="whatsThisFor")
2. alert("Hello !");
3. else...
如果属性没有定义，则试图引用它时将返回空值，在if语句的表达式里它被视为false：
1. if(!document.all.exampleForm.input1.validator)
2. alert("No validator!");
下面我们来看看如何在表单验证中应用这种自定义属性。
二、正则表达式与模式匹配
许多表单验证任务包含了模式匹配操作。例如我们要验证这样一个图书编号值的合法性：它或者为5个数字字符，或为10个字符——5个数字，一个连字号，再加上4个数字。虽然这些验证任务也可以用一个专用的函数来完成，但用下面这个正则表达式模式与用户输入值比较更为简便：
/d{5}(-d{4})?/
如果你以前从来没有用过正则表达式，可以将它理解为一种指定字符模式的语言，其主要操作就是匹配。大多数字符只同它们自己匹配，如正则表达式/abc/只匹配字符串“abc”；但也提供了引用某一组字符（如全部数字）以及指定匹配字符个数的方法。在上例中：d{5}匹配的是任意5个数字，-d{4}匹配的是一个连字号加4个数字，?说明模式中的最后一个元素是可选的，可包含也可不包含。
三、正则表达式库及其应用
所谓的正则表达式库就是包含验证常用表单元素的正则表达式的脚本文件，如：
1. varPatternsDict=newObject();
2. // 匹配图书编号
3. PatternsDict.bookPat =/^d{5}(-d{4})?$/;
4. // 匹配12:34以及75:83
5. PatternsDict.timePat =/^d{2}:d{2}$/;
6. // 匹配5:04 或12:34,但不匹配75:83
7. PatternsDict.timePat2=/^([1-9]|1[0-2]):[0-5]d$/;
文件中还要包含下面这个提供验证功能的函数：
1. function validateForm(theForm){// 若验证通过则返回true
2. var elArr = theForm.elements;// 将表单中的所有元素放入数组
3. for(var i =0; i < elArr.length; i++)
4. with(elArr[i]){// 对于表单中的每一个元素...
5. var v = elArr[i].validator;// 获取其validator属性
6. if(!v)continue;// 如果该属性不存在,忽略当前元素
7. var thePat =PatternsDict[v];// 选择验证用的正则表达式
8. var gotIt = thePat.exec(value);// 用正则表达式验证elArr[i]的值
9. if(!gotIt){
10. alert(name +": 输入值与正则表达式不匹配（"+ v +" —— "+ value +"）");returnfalse;}
11. }returntrue;
12. }
validateForm函数检查每一个表单元素的validator属性，若该属性不存在，脚本忽略此元素并返回循环的开头。否则，从PatternDict中获得当前元素的匹配模式。每一个正则表达式都有对应的RegExp对象，RegExp对象的exec()方法在参数与它所关联的正则表达式不匹配时返回null——此时脚本显示警告对话框。在实际应用场合，为提高效率可以在执行验证之前将这些正则表达式编译。某些输入域可能需要除了简单匹配之外更为复杂的验证。因此，除了模式库之外，还可以为常用的验证任务建立一个函数库。
设上述验证模式文件为valPatterns.js，将它包含到所有必需用它来验证输入的页面中收集整理：css属性大全
建站教程 心晴客栈 3年前 (2013-03-06) 4436次浏览 0个评论 扫描二维码
CSS属性大全 由http://www.yonghappy.com/搜集整理
请ctrl+f 进行查找你需要的标签
字体属性：(font)
大小 font-size:x-large;(特大) xx-small;(极小) 一般中文用不到，只要用数值就可以，单位：PX、PD
样式 font-style:oblique;(偏斜体) italic;(斜体) normal;(正常)
行高line-height: normal;(正常) 单位：PX、PD、EM
粗细font-weight: bold;(粗体) lighter;(细体) normal;(正常)
变体font-variant: small-caps;(小型大写字母) normal;(正常)
大小写text-transform: capitalize;(首字母大写) uppercase;(大写) lowercase;(小写) none;(无)
修饰text-decoration: underline;(下划线) overline;(上划线) line-through;(删除线) blink;(闪烁)
常用字体： (font-family)
“Courier New”, Courier, monospace, “Times New Roman”, Times, serif, Arial,Helvetica, sans-serif, Verdana
背景属性：(background)
色彩background-color:#FFFFFF;
图片background-image:url();
重复background-repeat:no-repeat;
滚动background-attachment:fixed;(固定) scroll;(滚动)
位置background-position:left(水平) top(垂直);
简写方法background:#000 url(..) repeat fixed left top;
区块属性： (Block)
字间距letter-spacing:normal; 数值
对刘text-align:justify;(两端对齐) left;(左对齐) right;(右对齐) center;(居中)
缩进text-indent:数值px;
垂直对齐vertical-align:baseline;(基线) sub;(下标) super;(下标) top; text-top; middle; bottom;text-bottom;
词间距word-spacing:normal; 数值
空格white-space:pre;(保留) nowrap;(不换行)
显示display:block;(块) inline;(内嵌) list-item;(列表项) run-in;(追加部分) compact;(紧凑) marker;(标记) table; inline-table; table-raw-group;table-header-group; table-footer-group; table-raw; table-column-group;table-column; table-cell; table-caption;(表格标题)
方框属性： (Box)
width:; height:; float:; clear:both; margin:; padding:; 顺序：上右下左
边框属性： (Border)
border-style: dotted;(点线) dashed;(虚线) solid; double;(双线) groove;(槽线) ridge;(脊状) inset;(凹陷) outset;
border-width:; 边框宽度
border-color:#;
简写方法border：width style color;
列表属性：(List-style)
类型list-style-type: disc;(圆点) circle;(圆圈) square;(方块) decimal;(数字) lower-roman;(小罗码数字) upper-roman; lower-alpha;upper-alpha;
位置list-style-position:outside;(外) inside;
图像list-style-image:url(..);
定位属性：(Position)
Position: absolute; relative; static;
visibility: inherit; visible; hidden;
overflow: visible; hidden; scroll; auto;
clip: rect(12px,auto,12px,auto) (裁切)
中文名 | 英文名 | Unicode | Unicode 2 |
Mac OS | |||
华文细黑 | STHeiti Light [STXihei] | 534E65877EC69ED1 | 华文细黑 |
华文黑体 | STHeiti | 534E65879ED14F53 | 华文黑体 |
华文楷体 | STKaiti | 534E658769774F53 | 华文楷体 |
华文宋体 | STSong | 534E65875B8B4F53 | 华文宋体 |
华文仿宋 | STFangsong | 534E65874EFF5B8B | 华文仿宋 |
丽黑 Pro | LiHei Pro Medium | 4E3D9ED1 Pro | 丽黑 Pro |
丽宋 Pro | LiSong Pro Light | 4E3D5B8B Pro | 丽宋 Pro |
标楷体 | BiauKai | 680769774F53 | 标楷体 |
苹果丽中黑 | Apple LiGothic Medium | 82F9679C4E3D4E2D9ED1 | 苹果丽中黑 |
苹果丽细宋 | Apple LiSung Light | 82F9679C4E3D7EC65B8B | 苹果丽细宋 |
Windows | |||
新细明体 | PMingLiU | 65B07EC6660E4F53 | 新细明体 |
细明体 | MingLiU | 7EC6660E4F53 | 细明体 |
标楷体 | DFKai-SB | 680769774F53 | 标楷体 |
黑体 | SimHei | 9ED14F53 | 黑体 |
宋体 | SimSun | 5B8B4F53 | 宋体 |
新宋体 | NSimSun | 65B05B8B4F53 | 新宋体 |
仿宋 | FangSong | 4EFF5B8B | 仿宋 |
楷体 | KaiTi | 69774F53 | 楷体 |
仿宋_GB2312 | FangSong_GB2312 | 4EFF5B8B_GB2312 | 仿宋_GB2312 |
楷体_GB2312 | KaiTi_GB2312 | 69774F53_GB2312 | 楷体_GB2312 |
微软正黑体 | Microsoft JhengHei | 5FAEx8F6F6B639ED14F53 | 微软正黑体 |
微软雅黑 | Microsoft YaHei | 5FAE8F6F96C59ED1 | 微软雅黑 |
Office | |||
隶书 | LiSu | 96B64E66 | 隶书 |
幼圆 | YouYuan | 5E7C5706 | 幼圆 |
华文细黑 | STXihei | 534E65877EC69ED1 | 华文细黑 |
华文楷体 | STKaiti | 534E658769774F53 | 华文楷体 |
华文宋体 | STSong | 534E65875B8B4F53 | 华文宋体 |
华文中宋 | STZhongsong | 534E65874E2D5B8B | 华文中宋 |
华文仿宋 | STFangsong | 534E65874EFF5B8B | 华文仿宋 |
方正舒体 | FZShuTi | 65B96B6382124F53 | 方正舒体 |
方正姚体 | FZYaoti | 65B96B6359DA4F53 | 方正姚体 |
华文彩云 | STCaiyun | 534E65875F694E91 | 华文彩云 |
华文琥珀 | STHupo | 534E6587742573C0 | 华文琥珀 |
华文隶书 | STLiti | 534E658796B64E66 | 华文隶书 |
华文行楷 | STXingkai | 534E6587884C6977 | 华文行楷 |
华文新魏 | STXinwei | 534E658765B09B4F | 华文新魏 |
css属性代码大全
一 CSS文字属性：
color : #999999; /*文字颜色*/
font-family : 宋体,sans-serif; /*文字字体*/
font-size : 9pt; /*文字大小*/
font-style:itelic; /*文字斜体*/
font-variant:small-caps; /*小字体*/
letter-spacing : 1pt; /*字间距离*/
line-height : 200%; /*设置行高*/
font-weight:bold; /*文字粗体*/
vertical-align:sub; /*下标字*/
vertical-align:super; /*上标字*/
text-decoration:line-through; /*加删除线*/
text-decoration:overline; /*加顶线*/
text-decoration:underline; /*加下划线*/
text-decoration:none; /*删除链接下划线*/
text-transform : capitalize; /*首字大写*/
text-transform : uppercase; /*英文大写*/
text-transform : lowercase; /*英文小写*/
text-align:right; /*文字右对齐*/
text-align:left; /*文字左对齐*/
text-align:center; /*文字居中对齐*/
text-align:justify; /*文字分散对齐*/
vertical-align属性
vertical-align:top; /*垂直向上对齐*/
vertical-align:bottom; /*垂直向下对齐*/
vertical-align:middle; /*垂直居中对齐*/
vertical-align:text-top; /*文字垂直向上对齐*/
vertical-align:text-bottom; /*文字垂直向下对齐*/
二、CSS边框空白
padding-top:10px; /*上边框留空白*/
padding-right:10px; /*右边框留空白*/
padding-bottom:10px; /*下边框留空白*/
padding-left:10px; /*左边框留空白
三、CSS符号属性：
list-style-type:none; /*不编号*/
list-style-type:decimal; /*阿拉伯数字*/
list-style-type:lower-roman; /*小写罗马数字*/
list-style-type:upper-roman; /*大写罗马数字*/
list-style-type:lower-alpha; /*小写英文字母*/
list-style-type:upper-alpha; /*大写英文字母*/
list-style-type:disc; /*实心圆形符号*/
list-style-type:circle; /*空心圆形符号*/
list-style-type:square; /*实心方形符号*/
list-style-image:url(/dot.gif); /*图片式符号*/
list-style-position:outside; /*凸排*/
list-style-position:inside; /*缩进*/
四、CSS背景样式：
background-color:#F5E2EC; /*背景颜色*/
background:transparent; /*透视背景*/
background-image : url(/image/bg.gif); /*背景图片*/
background-attachment : fixed; /*浮水印固定背景*/
background-repeat : repeat; /*重复排列-网页默认*/
background-repeat : no-repeat; /*不重复排列*/
background-repeat : repeat-x; /*在x轴重复排列*/
background-repeat : repeat-y; /*在y轴重复排列*/
指定背景位置
background-position : 90% 90%; /*背景图片x与y轴的位置*/
background-position : top; /*向上对齐*/
background-position : buttom; /*向下对齐*/
background-position : left; /*向左对齐*/
background-position : right; /*向右对齐*/
background-position : center; /*居中对齐*/
五、CSS连接属性：
a /*所有超链接*/
a:link /*超链接文字格式*/
a:visited /*浏览过的链接文字格式*/
a:active /*按下链接的格式*/
a:hover /*鼠标转到链接*/
鼠标光标样式：
链接手指 CURSOR:hand
十字体 cursor:crosshair
箭头朝下cursor:s-resize
十字箭头cursor:move
箭头朝右cursor:move
加一问号cursor:help
箭头朝左cursor:w-resize
箭头朝上cursor:n-resize
箭头朝右上cursor:ne-resize
箭头朝左上cursor:nw-resize
文字I型 cursor:text
箭头斜右下cursor:se-resize
箭头斜左下cursor:sw-resize
漏斗 cursor:wait
光标图案(IE6) p {cursor:url(“光标文件名.cur”),text;}
六、CSS框线一览表：
border-top : 1px solid #6699cc; /*上框线*/
border-bottom : 1px solid #6699cc; /*下框线*/
border-left : 1px solid #6699cc; /*左框线*/
border-right : 1px solid #6699cc; /*右框线*/
以上是建议书写方式,但也可以使用常规的方式 如下:
border-top-color : #369 /*设置上框线top颜色*/
border-top-width :1px /*设置上框线top宽度*/
border-top-style : solid/*设置上框线top样式*/
其他框线样式
solid /*实线框*/
dotted /*虚线框*/
double /*双线框*/
groove /*立体内凸框*/
ridge /*立体浮雕框*/
inset /*凹框*/
outset /*凸框*/
七、CSS表单运用：
文字方块
按钮
复选框
选择钮
多行文字方块
下拉式菜单 选项1选项2
八、CSS边界样式：
margin-top:10px; /*上边界*/
margin-right:10px; /*右边界值*/
margin-bottom:10px; /*下边界值*/
margin-left:10px; /*左边界值*/
CSS 属性： 字体样式(Font Style)
序号 中文说明 标记语法
1 字体样式{font:font-style font-variant font-weight font-size font-family}
2 字体类型{font-family:”字体1″,”字体2″,”字体3″,…}
3 字体大小{font-size:数值|inherit| medium| large| larger| x-large| xx-large| small| smaller|x-small| xx-small}
4 字体风格{font-style:inherit|italic|normal|oblique}
5 字体粗细 {font-weight:100-900|bold|bolder|lighter|normal;}
6 字体颜色 {color:数值;}
7 阴影颜色{text-shadow:16位色值}
8 字体行高 {line-height:数值|inherit|normal;}
9 字 间 距 {letter-spacing:数值|inherit|normal}
10 单词间距{word-spacing:数值|inherit|normal}
11 字体变形{font-variant:inherit|normal|small-cps }
12 英文转换{text-transform:inherit|none|capitalize|uppercase|lowercase}
13 字体变形{font-size-adjust:inherit|none}
14 字体{font-stretch:condensed|expanded|extra-condensed|extra-expanded|inherit|narrower|normal|semi-condensed|semi-expanded|ultra-condensed|ultra-expanded|wider}
文本样式(TextStyle)
序号 中文说明 标记语法
1 行 间 距 {line-height:数值|inherit|normal;}
2 文本修饰{text-decoration:inherit|none|underline|overline|line-through|blink}
3 段首空格 {text-indent:数值|inherit}
4 水平对齐{text-align:left|right|center|justify}
5 垂直对齐{vertical-align:inherit|top|bottom|text-top|text-bottom|baseline|middle|sub|super}
6 书写方式{writing-mode:lr-tb|tb-rl}
背景样式
序号 中文说明 标记语法
1 背景颜色{background-color:数值}
2 背景图片{background-image: url(URL)|none}
3 背景重复{background-repeat:inherit|no-repeat|repeat|repeat-x|repeat-y}
4 背景固定{background-attachment:fixed|scroll}
5 背景定位{background-position:数值|top|bottom|left|right|center}
6 背影样式{background:背景颜色|背景图象|背景重复|背景附件|背景位置}
框架样式(BoxStyle)
序号 中文说明 标记语法
1 边界留白{margin:margin-top margin-right margin-bottom margin-left}
2 补白{padding:padding-top padding-right padding-bottom padding-left}
3 边框宽度{border-width:border-top-width border-right-width border-bottom-widthborder-left-width}
宽度值：thin|medium|thick|数值
4 边框颜色{border-color:数值 数值 数值 数值}数值：分别代表top、right、bottom、left颜色值
5 边框风格{border-style:none|hidden|inherit|dashed|solid|double|inset|outset|ridge|groove}
6 边框{border:border-width border-style color}
上 边 框 {border-top:border-top-width border-style color}
右 边 框 {border-right:border-right-width border-style color}
下 边 框 {border-bottom:border-bottom-width border-style color}
左 边 框 {border-left:border-left-width border-style color}
7 宽度 {width:长度|百分比| auto}
8 高度 {height:数值|auto}
9 漂浮{float:left|right|none}
10 清除{clear:none|left|right|both}
分类列表
序号 中文说明 标记语法
1 控制显示{display:none|block|inline|list-item}
2 控制空白{white-space:normal|pre|nowarp}
3 符号列表{list-style-type:disc|circle|square|decimal|lower-roman|upper-roman|lower-alpha|upper-alpha|none}
4 图形列表{list-style-image:URL}
5 位置列表{list-style-position:inside|outside}
6 目录列表{list-style:目录样式类型|目录样式位置|url}
7 鼠标形状{cursor:hand|crosshair|text|wait|move|help|e-resize|nw-resize|w-resize|s-resize|se-resize|sw-resize}
posted @ 2009-06-08 13:39 DELPHI&.NET初学者[TECSOON WENDAY] 阅读(143) | 评论(0) | 编辑
表单验证代码全集
1:js 字符串长度限制、判断字符长度、js限制输入、限制不能输入、textarea 长度限制
2.:js判断汉字、判断是否汉字 、只能输入汉字
3:js判断是否输入英文、只能输入英文
4:js只能输入数字,判断数字、验证数字、检测数字、判断是否为数字、只能输入数字
5:只能输入英文字符和数字
6: js email验证 、js 判断email 、信箱/邮箱格式验证
7:js字符过滤,屏蔽关键字
8:js密码验证、判断密码
2.1: js 不为空、为空或不是对象 、判断为空、判断不为空
2.2:比较两个表单项的值是否相同
2.3:表单只能为数字和”_”,
2.4:表单项输入数值/长度限定
2.5:中文/英文/数字/邮件地址合法性判断
2.6:限定表单项不能输入的字符
2.7表单的自符控制
2.8:form文本域的通用校验函数
1. 长度限制
1.
2. <script>
3. function test()
4. {
5. if(document.a.b.value.length>50)
6. {
7. alert("不能超过50个字符！");
8. document.a.b.focus();
9. returnfalse;
10. }
11. }
12. </script>
13. <formname=aonsubmit="return test()">
14. <textareaname="b"cols="40"wrap="VIRTUAL"rows="6"></textarea>
15. <inputtype="submit"name="Submit"value="check">
16. </form>
2. 只能是汉字
1. <inputonkeyup="value="/oblog/value.replace(/[^u4E00-u9FA5]/g,'')">
3.” 只能是英文
1. <scriptlanguage=javascript>
2. function onlyEng()
3. {
4. if(!(event.keyCode>=65&&event.keyCode<=90))
5. event.returnvalue=false;
6. }
7. </script>
8.
9. <inputonkeydown="onlyEng();">
4. 只能是数字
1. <scriptlanguage=javascript>
2. function onlyNum()
3. {
4. if(!((event.keyCode>=48&&event.keyCode<=57)||(event.keyCode>=96&&event.keyCode<=105)))
5. //考虑小键盘上的数字键
6. event.returnvalue=false;
7. }
8. </script>
9.
10. <inputonkeydown="onlyNum();">
5. 只能是英文字符和数字
<input οnkeyup=”value=”/oblog/value.replace(/[W]/g,””)“onbeforepaste=”clipboardData.setData(‘text’,clipboardData.getData(‘text’).replace(/[^d]/g,”))”>
6. 验证邮箱格式
<SCRIPT LANGUAGE=javascript RUNAT=Server>
function isEmail(strEmail) {
if(strEmail.search(/^w+((-w+)|(.w+))*@[A-Za-z0-9]+((.|-)[A-Za-z0-9]+)*.[A-Za-z0-9]+$/)!= -1)
return true;
else
alert(“oh”);
}
</SCRIPT>
<input type=text οnblur=isEmail(this.value)>
7. 屏蔽关键字(这里屏蔽***和****)
<script language=”javascript1.2″>
function test() {
if((a.b.value.indexOf (“***”) == 0)||(a.b.value.indexOf (“****”) == 0)){
alert(“:)”);
a.b.focus();
return false;}
}
</script>
<form name=a οnsubmit=”return test()”>
<input type=text name=b>
<input type=”submit” name=”Submit” value=”check”>
</form>
8. 两次输入密码是否相同
<FORM METHOD=POST ACTION=””>
<input type=”password” id=”input1″>
<input type=”password” id=”input2″>
<input type=”button” value=”test” οnclick=”check()”>
</FORM>
<script>
function check()
{
with(document.all){
if(input1.value!=input2.value)
{
alert(“false”)
input1.value = “”;
input2.value = “”;
}
else document.forms[0].submit();
}
}
</script>
够了吧
屏蔽右键 很酷
οncοntextmenu=”return false” οndragstart=”return false” onselectstart=”returnfalse”
加在body中
二
2.1 表单项不能为空
<scriptlanguage=”javascript”>
<!–
function CheckForm()
{
if (document.form.name.value.length == 0) {
alert(“请输入您姓名!”);
document.form.name.focus();
return false;
}
return true;
}
–>
</script>
2.2 比较两个表单项的值是否相同
1. <scriptlanguage="javascript">
2. <!--
3. functionCheckForm()
4. if(document.form.PWD.value != document.form.PWD_Again.value){
5. alert("您两次输入的密码不一样！请重新输入.");
6. document.ADDUser.PWD.focus();
7. returnfalse;
8. }
9. returntrue;
10. }
11. -->
12. </script>
2.3 表单项只能为数字和”_”,用于电话/银行帐号验证上,可扩展到域名注册等
1. <scriptlanguage="javascript">
2. <!--
3. function isNumber(String)
4. {
5. varLetters="1234567890-";//可以自己增加可输入值
6. var i;
7. var c;
8. if(String.charAt(0)=='-')
9. returnfalse;
10. if(String.charAt(String.length -1)=='-')
11. returnfalse;
12. for( i =0; i <String.length; i ++)
13. {
14. c =String.charAt( i );
15. if(Letters.indexOf( c )<0)
16. returnfalse;
17. }
18. returntrue;
19. }
20. functionCheckForm()
21. {
22. if(! isNumber(document.form.TEL.value)){
23. alert("您的电话号码不合法！");
24. document.form.TEL.focus();
25. returnfalse;
26. }
27. returntrue;
28. }
29. -->
30. </script>
2.4 表单项输入数值/长度限定
1. <scriptlanguage="javascript">
2. <!--
3. functionCheckForm()
4. {
5. if(document.form.count.value >100|| document.form.count.value <1)
6. {
7. alert("输入数值不能小于零大于100!");
8. document.form.count.focus();
9. returnfalse;
10. }
11. if(document.form.MESSAGE.value.length<10)
12. {
13. alert("输入文字小于10!");
14. document.form.MESSAGE.focus();
15. returnfalse;
16. }
17. returntrue;
18. }
19. //-->
20. </script>
2.5 中文/英文/数字/邮件地址合法性判断
1. <SCRIPTLANGUAGE="javascript">
2. <!--
3.
4. function isEnglish(name)//英文值检测
5. {
6. if(name.length ==0)
7. returnfalse;
8. for(i =0; i < name.length; i++){
9. if(name.charCodeAt(i)>128)
10. returnfalse;
11. }
12. returntrue;
13. }
14.
15. function isChinese(name)//中文值检测
16. {
17. if(name.length ==0)
18. returnfalse;
19. for(i =0; i < name.length; i++){
20. if(name.charCodeAt(i)>128)
21. returntrue;
22. }
23. returnfalse;
24. }
25.
26. function isMail(name)// E-mail值检测
27. {
28. if(! isEnglish(name))
29. returnfalse;
30. i = name.indexOf(" at ");
31. j = name dot lastIndexOf(" at ");
32. if(i ==-1)
33. returnfalse;
34. if(i != j)
35. returnfalse;
36. if(i == name dot length)
37. returnfalse;
38. returntrue;
39. }
40.
41. function isNumber(name)//数值检测
42. {
43. if(name.length ==0)
44. returnfalse;
45. for(i =0; i < name.length; i++){
46. if(name.charAt(i)<"0"|| name.charAt(i)>"9")
47. returnfalse;
48. }
49. returntrue;
50. }
51.
52. functionCheckForm()
53. {
54. if(! isMail(form.Email.value)){
55. alert("您的电子邮件不合法！");
56. form.Email.focus();
57. returnfalse;
58. }
59. if(! isEnglish(form.name.value)){
60. alert("英文名不合法！");
61. form.name.focus();
62. returnfalse;
63. }
64. if(! isChinese(form.cnname.value)){
65. alert("中文名不合法！");
66. form.cnname.focus();
67. returnfalse;
68. }
69. if(! isNumber(form.PublicZipCode.value)){
70. alert("邮政编码不合法！");
71. form.PublicZipCode.focus();
72. returnfalse;
73. }
74. returntrue;
75. }
76. //-->
77. </SCRIPT>
2.6 限定表单项不能输入的字符
1. <scriptlanguage="javascript">
2. <!--
3.
4. function contain(str,charset)// 字符串包含测试函数
5. {
6. var i;
7. for(i=0;i<charset.length;i++)
8. if(str.indexOf(charset.charAt(i))>=0)
9. returntrue;
10. returnfalse;
11. }
12.
13. functionCheckForm()
14. {
15. if((contain(document.form.NAME.value,"%()><"))||(contain(document.form.MESSAGE.value,"%()><")))
16. {
17. alert("输入了非法字符");
18. document.form.NAME.focus();
19. returnfalse;
20. }
21. returntrue;
22. }
23. //-->
24. </script>
1. 检查一段字符串是否全由数字组成
—————————————
<script language=”Javascript”><!–
function checkNum(str){return str.match(/D/)==null}
alert(checkNum(“1232142141”))
alert(checkNum(“123214214a1”))
// –></script>
2. 怎么判断是否是字符
—————————————
if (/[^x00-xff]/g.test(s)) alert(“含有汉字”);
else alert(“全是字符”);
3. 怎么判断是否含有汉字
—————————————
if (escape(str).indexOf(“%u”)!=-1) alert(“含有汉字”);
else alert(“全是字符”);
4. 邮箱格式验证
—————————————
//函数名：chkemail
//功能介绍：检查是否为EmailAddress
//参数说明：要检查的字符串
//返回值：0：不是 1：是
function chkemail(a)
{ var i=a.length;
var temp = a.indexOf(‘@’);
var tempd = a.indexOf(‘.’);
if (temp > 1) {
if ((i-temp) > 3){
if ((i-tempd)>0){
return 1;
}
}
}
return 0;
}
5. 数字格式验证
—————————————
//函数名：fucCheckNUM
//功能介绍：检查是否为数字
//参数说明：要检查的数字
//返回值：1为是数字，0为不是数字
function fucCheckNUM(NUM)
{
var i,j,strTemp;
strTemp=”0123456789″;
if ( NUM.length== 0)
return 0
for (i=0;i<NUM.length;i++)
{
j=strTemp.indexOf(NUM.charAt(i));
if (j==-1)
{
//说明有字符不是数字
return 0;
}
}
//说明是数字
return 1;
}
6. 电话号码格式验证
—————————————
//函数名：fucCheckTEL
//功能介绍：检查是否为电话号码
//参数说明：要检查的字符串
//返回值：1为是合法，0为不合法
function fucCheckTEL(TEL)
{
var i,j,strTemp;
strTemp=”0123456789-()# “;
for (i=0;i<TEL.length;i++)
{
j=strTemp.indexOf(TEL.charAt(i));
if (j==-1)
{
//说明有字符不合法
return 0;
}
}
//说明合法
return 1;
}
7. 判断输入是否为中文的函数
—————————————
function ischinese(s){
var ret=true;
for(var i=0;i<s.length;i++)
ret=ret && (s.charCodeAt(i)>=10000);
return ret;
}
8. 综合的判断用户输入的合法性的函数
—————————————
<script language=”javascript”>
//限制输入字符的位数开始
//m是用户输入，n是要限制的位数
function issmall(m,n)
{
if ((m<n) && (m>0))
{
return(false);
}
else
{return(true);}
}
9. 判断密码是否输入一致
—————————————
function issame(str1,str2)
{
if (str1==str2)
{return(true);}
else
{return(false);}
}
10. 判断用户名是否为数字字母下滑线
1. function notchinese(str){
2. var reg=/[^A-Za-z0-9_]/g
3. if(reg.test(str)){
4. return(false);
5. }else{
6. return(true);}
7. }
2.8. form文本域的通用校验函数
—————————————
作用：检测所有必须非空的input文本，比如姓名，账号，邮件地址等等。
该校验现在只针对文本域，如果要针对form里面的其他域对象，可以改变判断条件。
使用方法：在要检测的文本域中加入title文字。文字是在提示信息，你要提示给用户的该字段的中文名。比如要检测用户名
html如下<inputname=”txt_1″ title=”姓名”>,当然，最好用可视化工具比如dreamweaver什么的来编辑域。
如果要检测数字类型数据的话，再把域的id统一为sz.
javascript判断日期类型比较麻烦，所以就没有做日期类型校验的程序了.高手可以补充。
程序比较草，只是提供一个思路。抛砖引玉！：）
哦，对了，函数调用方法：
1. < form οnsubmit="return dovalidate()">
2. function dovalidate()
3. {
4. fm=document.forms[0] //只检测一个form,如果是多个可以改变判断条件
5. for(i=0;i<fm.length;i++)
6. {
7. //检测判断条件，根据类型不同可以修改
8. if(fm.tagName.toUpperCase()=="INPUT"&&fm.type.toUpperCase()=="TEXT" &&(fm.title!=""))
9.
10. if(fm.value="/blog/="")//
11. {
12. str_warn1=fm.title+"不能为空!";
13. alert(str_warn1);
14. fm.focus();
15. return false;
16. }
17. if(fm.id.toUpperCase()=="SZ")//数字校验
18. {
19. if(isNaN(fm.value))
20. { str_warn2=fm.title+"格式不对";
21. alert(str_warn2);
22. fm.focus();
23. return false;
24. }
25. }
26. }
27. return true;
28. }
建立JavaScript正则表达式库简化表单验证
本文介绍如何创建一个可用于任何Web页面的“正则表达式库”——通过将表单验证代码保存为一个独立的文件，我们可以避免为不同表单重写类似的验证代码，只需在HTML页面中包含这个库文件即可。
一、HTML元素属性与JavaScript对象属性
我们知道，HTML允许我们为元素指定自定义属性。如对于表单中的文本输入框元素，我们可以给它指定一个称为validator的属性：
1. <formid="exampleForm">
2. <inputtype="text"name="input1"validator="whatsThisFor?">
3. ...
4. </form>
该属性将被浏览器的表现引擎忽略，即它对于页面的显示是没有任何影响的。不过，就像所有其它“正式的”属性一样，自定义属性对脚本语言也是可见的，即我们可以在JavaScript代码中引用它并分析它的值。当然，在IE4和N4中引用元素的方法是不同的。下面这个引用自定义属性的示例只能在IE4（及其更高版本）下工作，但其原理也适用于Netscape浏览器：
1. if(document.all.exampleForm.input1.validator=="whatsThisFor")
2. alert("Hello !");
3. else...
如果属性没有定义，则试图引用它时将返回空值，在if语句的表达式里它被视为false：
1. if(!document.all.exampleForm.input1.validator)
2. alert("No validator!");
下面我们来看看如何在表单验证中应用这种自定义属性。
二、正则表达式与模式匹配
许多表单验证任务包含了模式匹配操作。例如我们要验证这样一个图书编号值的合法性：它或者为5个数字字符，或为10个字符——5个数字，一个连字号，再加上4个数字。虽然这些验证任务也可以用一个专用的函数来完成，但用下面这个正则表达式模式与用户输入值比较更为简便：
/d{5}(-d{4})?/
如果你以前从来没有用过正则表达式，可以将它理解为一种指定字符模式的语言，其主要操作就是匹配。大多数字符只同它们自己匹配，如正则表达式/abc/只匹配字符串“abc”；但也提供了引用某一组字符（如全部数字）以及指定匹配字符个数的方法。在上例中：d{5}匹配的是任意5个数字，-d{4}匹配的是一个连字号加4个数字，?说明模式中的最后一个元素是可选的，可包含也可不包含。
三、正则表达式库及其应用
所谓的正则表达式库就是包含验证常用表单元素的正则表达式的脚本文件，如：
1. varPatternsDict=newObject();
2. // 匹配图书编号
3. PatternsDict.bookPat =/^d{5}(-d{4})?$/;
4. // 匹配12:34以及75:83
5. PatternsDict.timePat =/^d{2}:d{2}$/;
6. // 匹配5:04 或12:34,但不匹配75:83
7. PatternsDict.timePat2=/^([1-9]|1[0-2]):[0-5]d$/;
文件中还要包含下面这个提供验证功能的函数：
1. function validateForm(theForm){// 若验证通过则返回true
2. var elArr = theForm.elements;// 将表单中的所有元素放入数组
3. for(var i =0; i < elArr.length; i++)
4. with(elArr[i]){// 对于表单中的每一个元素...
5. var v = elArr[i].validator;// 获取其validator属性
6. if(!v)continue;// 如果该属性不存在,忽略当前元素
7. var thePat =PatternsDict[v];// 选择验证用的正则表达式
8. var gotIt = thePat.exec(value);// 用正则表达式验证elArr[i]的值
9. if(!gotIt){
10. alert(name +": 输入值与正则表达式不匹配（"+ v +" —— "+ value +"）");returnfalse;}
11. }returntrue;
12. }
validateForm函数检查每一个表单元素的validator属性，若该属性不存在，脚本忽略此元素并返回循环的开头。否则，从PatternDict中获得当前元素的匹配模式。每一个正则表达式都有对应的RegExp对象，RegExp对象的exec()方法在参数与它所关联的正则表达式不匹配时返回null——此时脚本显示警告对话框。在实际应用场合，为提高效率可以在执行验证之前将这些正则表达式编译。某些输入域可能需要除了简单匹配之外更为复杂的验证。因此，除了模式库之外，还可以为常用的验证任务建立一个函数库。
设上述验证模式文件为valPatterns.js，将它包含到所有必需用它来验证输入的页面中，然后为每个输入框指定合适的validator属性即可。下面是应用上述valPatterns.js的一个完整示例：
1. <HTML><HEAD>
2. <TITLE> formVal.HTM </TITLE>
3. <SCRIPTsrc=" ValPatterns.js">
4. </SCRIPT>
5. <SCRIPT>
6. function showForm(theForm){
7. alert("表单："+ theForm.id +"已经提交");
8. }
9. </SCRIPT></HEAD>
10.
11. <BODY><P>用正则表达式库验证表单示例.</P>
12. <FORMid="theForm"onSubmit="return validateForm(theForm)"
13. Action="javascript:showForm(theForm)">
14. 图书编号:
15. <INPUTTYPE="TEXT" name="book"value="12345-6789"validator=bookPat>< BR >
16. 时 间 值:
17. <INPUTTYPE="TEXT"name="time"value="12:45"validator=timePat2> < BR >
18. 单击按钮提交表单：
19. <INPUTTYPE="SUBMIT">
20. </FORM>
21. </BODY>< /HTML >
，然后为每个输入框指定合适的validator属性即可。下面是应用上述valPatterns.js的一个完整示例：
1. <HTML><HEAD>
2. <TITLE> formVal.HTM </TITLE>
3. <SCRIPTsrc=" ValPatterns.js">
4. </SCRIPT>
5. <SCRIPT>
6. function showForm(theForm){
7. alert("表单："+ theForm.id +"已经提交");
8. }
9. </SCRIPT></HEAD>
10.
11. <BODY><P>用正则表达式库验证表单示例.</P>
12. <FORMid="theForm"onSubmit="return validateForm(theForm)"
13. Action="javascript:showForm(theForm)">
14. 图书编号:
15. <INPUTTYPE="TEXT" name="book"value="12345-6789"validator=bookPat>< BR >
16. 时 间 值:
17. <INPUTTYPE="TEXT"name="time"value="12:45"validator=timePat2> < BR >
18. 单击按钮提交表单：
19. <INPUTTYPE="SUBMIT">
20. </FORM>
21. </BODY>< /HTML >
2万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
