博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
番茄的表单验证类
阅读量:2340 次
发布时间:2019-05-10

本文共 8514 字,大约阅读时间需要 28 分钟。

  1. <form id="form1" name="form1" method="post" action="" οnsubmit="return validator(this);">
  2.   <table width="600" border="0" cellspacing="0" cellpadding="2" style="font:12px Tahoma">
  3.     <tr>
  4.       <td>密码</td>
  5.       <td>password</td>
  6.       <td><input type="text" name="password" controlName="密码" dataType="password" /></td>
  7.     </tr>
  8.     <tr>
  9.       <td>密码确认</td>
  10.       <td>confirm</td>
  11.       <td><input type="text" name="confirm" controlName="密码确认" confirm="password" /></td>
  12.     </tr>
  13.     <tr>
  14.       <td width="57">英文</td>
  15.       <td width="60">english</td>
  16.       <td width="471"><input type="text" name="english" controlName="英文" dataType="english" dataLength="4,10" />
  17.       4~10个字符</td>
  18.     </tr>
  19.     <tr>
  20.       <td>中文</td>
  21.       <td>chinese</td>
  22.       <td><input type="text" name="chinese" required="required" controlName="中文" />
  23. 非空</td>
  24.     </tr>
  25.     <tr>
  26.       <td>数字</td>
  27.       <td>number</td>
  28.       <td><input type="text" name="number" controlName="数字" dataBetween="10,100" />
  29.       大于10,小于100</td>
  30.     </tr>
  31.     <tr>
  32.       <td>整数</td>
  33.       <td>integer</td>
  34.       <td><input type="text" name="integer" controlName="整数" dataType="integer" /></td>
  35.     </tr>
  36.     <tr>
  37.       <td>浮点数</td>
  38.       <td>float</td>
  39.       <td><input type="text" name="float" controlName="浮点数" dataType="float" /></td>
  40.     </tr>
  41.     <tr>
  42.       <td>日期</td>
  43.       <td>date</td>
  44.       <td><input type="text" name="date" controlName="日期" dataType="date" /></td>
  45.     </tr>
  46.     <tr>
  47.       <td>邮件</td>
  48.       <td>email</td>
  49.       <td><input type="text" name="email" controlName="邮件" dataType="email" /></td>
  50.     </tr>
  51.     <tr>
  52.       <td>网址</td>
  53.       <td>url</td>
  54.       <td><input type="text" name="url" controlName="网址" dataType="url" /></td>
  55.     </tr>
  56.     <tr>
  57.       <td>电话</td>
  58.       <td>phone</td>
  59.       <td><input type="text" name="phone" controlName="电话" dataType="phone" /></td>
  60.     </tr>
  61.     <tr>
  62.       <td>手机</td>
  63.       <td>mobile</td>
  64.       <td><input type="text" name="mobile" controlName="手机" dataType="mobile" /></td>
  65.     </tr>
  66.     <tr>
  67.       <td>IP地址</td>
  68.       <td>ip</td>
  69.       <td><input type="text" name="ip" controlName="IP地址" dataType="ip" /></td>
  70.     </tr>
  71.     <tr>
  72.       <td>邮编</td>
  73.       <td>zipcode</td>
  74.       <td><input type="text" name="zipcode" controlName="邮编" dataType="zipcode" /></td>
  75.     </tr>
  76.     <tr>
  77.       <td>QQ号码</td>
  78.       <td>qq</td>
  79.       <td><input type="text" name="qq" controlName="QQ号码" dataType="ip" /></td>
  80.     </tr>
  81.     <tr>
  82.       <td>MSN</td>
  83.       <td>msn</td>
  84.       <td><input type="text" name="msn" controlName="MSN" dataType="msn" /></td>
  85.     </tr>
  86.     <tr>
  87.       <td>身份证</td>
  88.       <td>idcard</td>
  89.       <td><input type="text" name="idcard" controlName="身份证" dataType="idcard" /></td>
  90.     </tr>
  91.     <tr>
  92.       <td colspan="3" align="left"><input type="submit" name="Submit" value=" 提交 " /></td>
  93.     </tr>
  94.   </table>
  95. </form>
 

在上发过一次,个人的项目中在后台处理时用到这个东西,对于简单的表单验证还是挺方便的。

因为不想让代码变得太臃肿,所以有很多不常用的功能就没有再添加了

对于就没有做修改了,为什么?因为我懒呗,哈哈

今天看到,做了许多修改,改得挺不错的,谢谢了。

源码在这里:

//去除字符串两边的空格
String
.
prototype
.
trim
=
function
()
{
    
return
this
.
replace
(
/
(^/s+)|(/s+$)
/g
,
""
)
;
}
//检测字符串是否为空
String
.
prototype
.
isEmpty
=
function
()
{
    
return
!
(
/
.?[^/s ]+
/
.
test
(
this
))
;
}
//检测值是否介于某两个指定的值之间
String
.
prototype
.
isBetween
=
function
(
val
,
min
,
max
)
{
    
return
isNaN
(
val
)
==
false
&&
val
>=
min
&&
val
<=
max
;
}
//获取最大值或最小值
String
.
prototype
.
getBetweenVal
=
function
(
what
)
{
    
var
val
=
this
.
split
(
'
,
'
)
;
    
var
min
=
val
[
0
]
;
    
var
max
=
val
[
1
]
==
null
?
val
[
0
]
:
val
[
1
]
;
    
if
(
parseInt
(
min
)
>
parseInt
(
max
))
{
        
min
=
max
;
        
max
=
val
[
0
]
;
    
}
    
return
what
==
'
min
'
?
(
isNaN
(
min
)
?
null
:
min
)
:
(
isNaN
(
max
)
?
null
:
max
)
;
}
var
validator
=
function
(
formObj
)
{
    
this
.
allTags
=
formObj
.
getElementsByTagName
(
'
*
'
)
;
    
//字符串验证正则表达式
    
this
.
reg
=
new
Object
()
;
    
this
.
reg
.
english
=
/
^[a-zA-Z0-9_/-]+$
/
;
    
this
.
reg
.
chinese
=
/
^[/u0391-/uFFE5]+$
/
;
    
this
.
reg
.
number
=
/
^[-/+]?/d+(/./d+)?$
/
;
    
this
.
reg
.
integer
=
/
^[-/+]?/d+$
/
;
    
this
.
reg
.
float
=
/
^[-/+]?/d+(/./d+)?$
/
;
    
this
.
reg
.
date
=
/
^(/d{4})(-|
//
)(/d{1,2})/2(/d{1,2})$
/
;
    
this
.
reg
.
email
=
/
^/w+([-+.]/w+)*@/w+([-.]/w+)*/./w+([-.]/w+)*$
/
;
    
this
.
reg
.
url
=
/
^(((ht|f)tp(s?))/:
)[a-zA-Z0-9]+/.[a-zA-Z0-9]+[
//
=/?%/-&_~`@[/]/':+!]*([^<>/"/"])*$
/
;
    
this
.
reg
.
phone
=
/
^((/(/d{2,3}/))|(/d{3}/-))?(/(0/d{2,3}/)|0/d{2,3}-)?[1-9]/d{6,7}(/-/d{1,4})?$
/
;
    
this
.
reg
.
mobile
=
/
^((/(/d{2,3}/))|(/d{3}/-))?((13/d{9})|(159/d{8}))$
/
;
    
this
.
reg
.
ip
=
/
^(0|[1-9]/d?|[0-1]/d{2}|2[0-4]/d|25[0-5]).(0|[1-9]/d?|[0-1]/d{2}|2[0-4]/d|25[0-5]).(0|[1-9]/d?|[0-1]/d{2}|2[0-4]/d|25[0-5]).(0|[1-9]/d?|[0-1]/d{2}|2[0-4]/d|25[0-5])$
/
;
    
this
.
reg
.
zipcode
=
/
^[1-9]/d{5}$
/
;
    
this
.
reg
.
qq
=
/
^[1-9]/d{4,10}$
/
;
    
this
.
reg
.
msn
=
/
^/w+([-+.]/w+)*@/w+([-.]/w+)*/./w+([-.]/w+)*$
/
;
    
this
.
reg
.
idcard
=
/
(^/d{15}$)|(^/d{17}[0-9Xx]$)
/
;
    
//错误输出信息
    
this
.
tip
=
new
Object
()
;
    
this
.
tip
.
unknow
=
'
未找到的验证类型,无法执行验证。
'
;
    
this
.
tip
.
paramError
=
'
参数设置错误,无法执行验证。
'
;
    
this
.
tip
.
required
=
'
不允许为空。
'
;
    
this
.
tip
.
english
=
'
仅允许英文字符及下划线 (a-zA-Z0-9_)。
'
;
    
this
.
tip
.
chinese
=
'
仅允许中文字符。
'
;
    
this
.
tip
.
number
=
'
不是一个有效的数字。
'
;
    
this
.
tip
.
integer
=
'
不是一个有效的整数。
'
;
    
this
.
tip
.
float
=
'
不是一个有效的浮点数。
'
;
    
this
.
tip
.
date
=
'
不是一个有效的日期格式。 (例如:2007-06-29)
'
;
    
this
.
tip
.
email
=
'
不是一个有效的电子邮件格式。
'
;
    
this
.
tip
.
url
=
'
不是一个有效的超链接格式。
'
;
    
this
.
tip
.
phone
=
'
不是一个有效的电话号码。
'
;
    
this
.
tip
.
mobile
=
'
不是一个有效的手机号码。
'
;
    
this
.
tip
.
ip
=
'
不是一个有效的IP地址。
'
;
    
this
.
tip
.
zipcode
=
'
不是一个有效的邮政编码。
'
;
    
this
.
tip
.
qq
=
'
不是一个有效的QQ号码。
'
;
    
this
.
tip
.
msn
=
'
不是一个有效的MSN帐户。
'
;
    
this
.
tip
.
idcard
=
'
不是一个有效的身份证号码。
'
;
    
//获取控件名称
    
this
.
getControlName
=
function
()
    
{
        
return
this
.
element
.
getAttribute
(
'
controlName
'
)
==
null
               ?
'
指定控件的值
'
               :
this
.
element
.
getAttribute
(
'
controlName
'
)
;
    
}
    
//设定焦点
    
this
.
setFocus
=
function
(
ele
)
{
        
try
{
            
ele
.
focus
()
;
        
}
catch
(
e
){}
    
}
    
//设置边框颜色
    
this
.
setBorderColor
=
function
(
ele
)
{
        
var
borderColor
=
ele
.
currentStyle
?
                          
ele
.
currentStyle
.
borderColor
:
                          
document
.
defaultView
.
getComputedStyle
(
ele
,
null
)[
'
borderColor
'
]
;
        
ele
.
style
.
borderColor
=
'
#ff9900
'
;
        
ele
.
onkeyup
=
function
()
{
            
this
.
style
.
borderColor
=
borderColor
;
        
}
    
}
    
//输出错误反馈信息
    
this
.
feedback
=
function
(
type
)
{
        
try
{
            
var
msg
=
eval
(
'
this.tip.
'
+
type
)
==
undefined
?
                      
type
:
                      
this
.
getControlName
()
+
eval
(
'
this.tip.
'
+
type
)
;
        
}
catch
(
e
)
{
            
msg
=
type
;
        
}
        
this
.
setBorderColor
(
this
.
element
)
;
        
alert
(
msg
)
;
        
this
.
setFocus
(
this
.
element
)
;
    
}
;
    
//执行字符串验证
    
this
.
validate
=
function
()
{
        
var
v
=
this
.
element
.
value
;
        
//验证是否允许非空
        
var
required
=
this
.
element
.
getAttribute
(
'
required
'
)
;
        
if
(
required
!=
null
&&
v
.
isEmpty
())
{
            
this
.
feedback
(
'
required
'
)
;
            
return
false
;
        
}
        
//验证是否合法格式
        
var
dataType
=
this
.
element
.
getAttribute
(
'
dataType
'
)
;
        
if
(
!
v
.
isEmpty
()
&&
dataType
!=
null
&& 
dataType
.
toLowerCase
()
!=
'
password
'
)
{
            
dataType
=
dataType
.
toLowerCase
()
;
            
try
{
                
if
(
!
(
eval
(
'
this.reg.
'
+
dataType
))
.
test
(
v
))
{
                    
this
.
feedback
(
dataType
)
;
                    
return
false
;
                
}
            
}
catch
(
e
)
{
                
this
.
feedback
(
'
unknow
'
)
;
                
return
false
;
            
}
        
}
        
//执行数据验证
        
var
confirm
=
this
.
element
.
getAttribute
(
'
confirm
'
)
;
        
if
(
confirm
!=
null
)
{
            
try
{
                
var
data
=
eval
(
'
formObj.
'
+
confirm
+
'
.value
'
)
;
                
if
(
v
!=
data
)
{
                    
alert
(
'
两次输入的内容不一致,请重新输入。
'
)
;
                    
this
.
setBorderColor
(
this
.
element
)
;
                    
this
.
setFocus
(
this
.
element
)
;
                    
return
false
;
                
}
            
}
catch
(
e
)
{
                
this
.
feedback
(
'
paramError
'
)
;
                
return
false
;
            
}
        
}
        
//验证数字大小
        
var
dataBetween
=
this
.
element
.
getAttribute
(
'
dataBetween
'
)
;
        
if
(
!
v
.
isEmpty
()
&&
dataBetween
!=
null
)
{
            
var
min
=
dataBetween
.
getBetweenVal
(
'
min
'
)
;
            
var
max
=
dataBetween
.
getBetweenVal
(
'
max
'
)
;
            
if
(
min
==
null
||
max
==
null
)
{
                
this
.
feedback
(
'
paramError
'
)
;
                
return
false
;
            
}
            
if
(
!
v
.
isBetween
(
v
.
trim
()
,
min
,
max
))
{
                
this
.
feedback
(
this
.
getControlName
()
+
'
必须是介于
'
+
min
+
'
-
'
+
max
+
'
之间的数字。
'
)
;
                
return
false
;
            
}
        
}
        
//验证字符长度
        
var
dataLength
=
this
.
element
.
getAttribute
(
'
dataLength
'
)
;
        
if
(
!
v
.
isEmpty
()
&&
dataLength
!=
null
)
{
            
var
min
=
dataLength
.
getBetweenVal
(
'
min
'
)
;
            
var
max
=
dataLength
.
getBetweenVal
(
'
max
'
)
;
            
if
(
min
==
null
||
max
==
null
)
{
                
this
.
feedback
(
'
paramError
'
)
;
                
return
false
;
            
}
            
if
(
!
v
.
isBetween
(
v
.
trim
()
.
length
,
min
,
max
))
{
                
this
.
feedback
(
this
.
getControlName
()
+
'
必须是
'
+
min
+
'
-
'
+
max
+
'
个字符。
'
)
;
                
return
false
;
            
}
        
}
        
return
true
;
    
}
;
    
//执行初始化操作
    
this
.
init
=
function
()
{
        
for
(
var
i
=
0
;
i
<
this
.
allTags
.
length
;
i
++
)
{
            
if
(
this
.
allTags
[
i
]
.
tagName
.
toUpperCase
()
==
'
INPUT
'
||
                
this
.
allTags
[
i
]
.
tagName
.
toUpperCase
()
==
'
SELECT
'
||
                
this
.
allTags
[
i
]
.
tagName
.
toUpperCase
()
==
'
TEXTAREA
'
)
            
{
                
this
.
element
=
allTags
[
i
]
;
                
if
(
!
this
.
validate
())
                    
return
false
;
            
}
        
}
    
}
;
    
return
this
.
init
()
;
}
 
 
使用例子:
 

转载地址:http://zszvb.baihongyu.com/

你可能感兴趣的文章
servlet文件上传下载
查看>>
解决文件提示: /bin/ksh^M: bad interpreter: bad interpreter:No such file or directory
查看>>
ajaxanywhere jsp 使用
查看>>
jquery的使用
查看>>
如何静态化JSP页面
查看>>
XML 与 Java 技术: 用 Castor 进行数据绑定
查看>>
Python未知领域系列:(附Python学习教程+Python学习路线)Python高级教程之面向对象
查看>>
盘点Python 面向对象编程最容易被忽视的知识点
查看>>
Python:一个可以套路别人的python小程序
查看>>
用Python告诉你:这些年,我们点过的的那些外卖
查看>>
如何美观地打印Python对象?这个标准库可以简单实现
查看>>
写作路上的这些小成绩,铸就了一个不平庸的程序员
查看>>
程序员找工作的个人经验教训以及注意事项
查看>>
2019 编程语言排行榜:Java、Python 龙争虎斗!谁又屹立不倒
查看>>
拥有10年编程经验的你,为什么还一直停留在原地
查看>>
Flask vs Django,Python Web开发用哪个框架更好
查看>>
用Python制作动态二维码,一行代码就做到了
查看>>
Python说:常见的数据分析库有哪些
查看>>
Python教程:Python数据类型之字典
查看>>
Python基础教程:python的数据类型
查看>>