JS正则表达式验证控件

最新推荐文章于 2024-12-26 14:18:14 发布

awmxmif55601270

最新推荐文章于 2024-12-26 14:18:14 发布

阅读量252

点赞数

CC 4.0 BY-SA版权

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/howardwyy/archive/2009/08/28/jsvalidation.html

本文介绍了一种基于正则表达式的JS验证控件，用于解决微软自带验证控件在绑定自定义JavaScript代码后可能遇到的失效问题。该控件在元素下方显示错误信息，并支持多个按钮触发验证。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一直以来都是习惯于用微软自带的验证控件，但是给按钮绑定了自己的JavaScript代码后会莫名造成验证控件失效的问题，索性就自己写了个js基于正则表达式的验证控件。代码贴出来各位看看，评论评论（仅支持IE）。

Code
1

// JScript 文件
2

var objdiv;//提示信息的现实层对象
3

function killmess()
5

{
6

//objdiv.parentElement.remove(objdiv);
7

if(objdiv!=null)
8

objdiv.style.display="none";
9

}
10

//绑定验证,
11

//参数：要验证元素，正则表达式，错误信息,引发验证的按钮id（id1,id2）多个要以逗号隔开
12

function boundsource(sourceid,reg,msg,activebutton)
13

{
14

var source=document.getElementById(sourceid);
15

source.attachEvent("onpropertychange",function checkchange()
16

{
17

var newreg=new RegExp(reg);
18

if(!newreg.test(source.value))
19

{
20

showmess(source,msg);
21

}
22

else
23

killmess();
24

});
25

var sact=activebutton.split(',');
26

for(js=0;js<sact.length;js++)
27

{
28

var sub=document.getElementById(sact[js]);
29

//alert(sact[js]);
30

if(sub!=null)
31

{
32

sub.attachEvent("onclick",function su()
33

{
34

var newreg=new RegExp(reg);
35

//alert(source.value+":");
36

if(!newreg.test(source.value))
37

{
38

if(objdiv==null||objdiv.style.display=="none")
39

{
40

showmess(source,msg);
41

source.focus();
42

}
43

return false;
44

}
45

});
46

}
47

}
48

source.attachEvent("onfocus",function checkblur()
49

{
50

var newreg=new RegExp(reg);
51

if(!newreg.test(source.value))
52

{
53

showmess(source,msg);
54

}
55

else
56

killmess();
57

});
58

source.attachEvent("onblur",function checkblur()
59

{
60

killmess();
61

});
62

}
63

//在元素下方显示提示信息，source是要显示信息的元素，msg要显示的信息
64

function showmess(source,msg)
65

{
66

if(objdiv==null)
67

objdiv=document.createElement("DIV");
68

var hei=source.offsetHeight;
69

var loc=getElementPos(source.id);
70

var left=loc.x;
71

var top=loc.y+hei;
72

objdiv.style.position="absolute";
73

objdiv.style.backgroundColor="#ECE9D8";
74

objdiv.style.color="#FF0000";
75

objdiv.style.zIndex="9999";
76

objdiv.style.border="solid 1px #FFAA25";
77

objdiv.style.fontFamily="Arial";
78

objdiv.style.fontSize="11px";
79

objdiv.innerText=msg;
80

objdiv.style.top=top;
81

objdiv.style.left=left;
82

source.parentElement.appendChild(objdiv);
83

objdiv.style.display="";
84

}
85

//获取元素绝对定位，参数：元素id。返回对象obj.x,obj.y
86

function getElementPos(elementId)
87

{
88

var ua = navigator.userAgent.toLowerCase();
89

var isOpera = (ua.indexOf('opera') != -1);
90

var isIE = (ua.indexOf('msie') != -1 && !isOpera); // not opera spoof
91

var el = document.getElementById(elementId);
92

if(el.parentNode === null || el.style.display == 'none')
93

{
94

return false;
95

}
96

var parent = null;
97

var pos = [];
98

var box;
99

if(el.getBoundingClientRect) //IE
100

{
101

box = el.getBoundingClientRect();
102

var scrollTop = Math.max(document.documentElement.scrollTop, document.body.scrollTop);
103

var scrollLeft = Math.max(document.documentElement.scrollLeft, document.body.scrollLeft);
104

return

{x:box.left + scrollLeft, y:box.top + scrollTop};
105

}
106

else if(document.getBoxObjectFor) // gecko
107

{
108

box = document.getBoxObjectFor(el);
109

var borderLeft = (el.style.borderLeftWidth)?parseInt(el.style.borderLeftWidth):0;
110

var borderTop = (el.style.borderTopWidth)?parseInt(el.style.borderTopWidth):0;
111

pos = [box.x - borderLeft, box.y - borderTop];
112

}
113

else // safari & opera
114

{
115

pos = [el.offsetLeft, el.offsetTop];
116

parent = el.offsetParent;
117

if (parent != el)
118

{
119

while (parent)
120

{
121

pos[0] += parent.offsetLeft;
122

pos[1] += parent.offsetTop;
123

parent = parent.offsetParent;
124

}
125

}
126

if (ua.indexOf('opera') != -1 || ( ua.indexOf('safari') != -1 && el.style.position == 'absolute' ))
127

{
128

pos[0] -= document.body.offsetLeft;
129

pos[1] -= document.body.offsetTop;
130

}
131

}
132

if (el.parentNode)
133

{
134

parent = el.parentNode;
135

}
136

else
137

{
138

parent = null;
139

}
140

while (parent && parent.tagName != 'BODY' && parent.tagName != 'HTML')

{ // account for any scrolled ancestors
141

pos[0] -= parent.scrollLeft;
142

pos[1] -= parent.scrollTop;
143

if (parent.parentNode)

{
144

parent = parent.parentNode;
145

} else

{
146

parent = null;
147

}
148

}
149

return

{x:pos[0], y:pos[1]};
150

}

这是调用方法，当然要在body的onload事件里执行bound方法，效果是如果绑定的不合法会在不合法的控件下方弹出一个提示框

Code
function bound()
{
    boundsource("txtSnum","^([1-9][0-9]*(\\.[0-9]+)?|0\\.[0-9]*[1-9]+[0-9]*)$","输入不合法-Error Format","LANGUAGEbtn01,LANGUAGEbtn03");//必须是数字
    boundsource("txtPrice","^([1-9][0-9]*(\\.[0-9]+)?|0\\.[0-9]*[1-9]+[0-9]*)$","输入不合法-Error Format","LANGUAGEbtn01,LANGUAGEbtn03");
    boundsource("txtRate","^[0-9]+(\\.[0-9]+)?$","输入不合法-Error Format","LANGUAGEbtn01,LANGUAGEbtn03");
    boundsource("txtScode","^.+$","不可为空-not null","LANGUAGEbtn01,LANGUAGEbtn03");
    boundsource("txtDes","^.+$","不可为空-not null","LANGUAGEbtn05,LANGUAGEbtn06");//非空
    boundsource("ddlCC","[^-1]","必须选择-Choose a Item","LANGUAGEbtn05,LANGUAGEbtn06");
    boundsource("txtAccount","^[0-9]*(\\.[0-9]+)?$","输入不合法-Error Format","LANGUAGEbtn05,LANGUAGEbtn06");
}

转载于:https://www.cnblogs.com/howardwyy/archive/2009/08/28/jsvalidation.html