代碼如下:
<form action="" method="post" id="formValidate">
數值
<input name="" type="text" validate="number" /><span></span><br/>
浮點型
<input name="" type="text" validate="decimal" /><span></span><br/>
英文
<input name="" type="text" validate="english" /><span></span><br/>
大寫英文
<input name="" type="text" validate="upper_english" /><span></span><br/>
小寫英文
<input name="" type="text" validate="lower_english" /><span></span><br/>
郵件格式
<input name="" type="text" validate="email" /><span></span><br/>
是否包含中文
<input name="" type="text" validate="chinese" /><span></span><br/>
URL
<input name="" type="text" validate="url" /><span></span><br/>
電話號碼
<input name="" type="text" validate="phone" /><span></span><br/>
IP地址
<input name="" type="text" validate="ip" /><span></span><br/>
金額
<input name="" type="text" validate="money" /><span></span><br/>
數值或者英文或者_
<input name="" type="text" validate="number_letter" /><span></span><br/>
郵政編碼
<input name="" type="text" validate="zip_code" /><span></span><br/>
可用賬號
<input name="" type="text" validate="account" /><span></span><br/>
QQ
<input name="" type="text" validate="qq" /><span></span><br/>
身份證:<input name="" type="text" validate="card" /><span></span><br/>
數值 允許為空
<input name="" type="text" validate="number" empty=
yes
/><span></span><br/>
數值 長度
<input name="" type="text" validate="number" min=
max=
/><span></span><br/>
數值 長度
允許為空
<input name="" type="text" validate="number" min=
max=
empty=
yes
/><span></span><br/>
<input name="" type="submit" />
</form>
<script src="jquery
js" type="text/javascript"></script>
<script src="formValidate
js" type="text/javascript"></script>
<script type="text/javascript">
var formValidate = new formValidate();
formValidate
init({});
</script>
[javascript]
代碼如下:
/*
* 通用JS驗證類
* 使用方法
* var formValidate = new formValidate();
* formValidate
init({});
* 注意
* <form action="" method="post" id="formValidate">
* id為formValidate
*
* <input name="" type="text" validate="zip_code" empty="yes" min=
max=
/><span></span>
* validate="zip_code" 驗證是否是郵政編碼
* empty="yes" 驗證是否允許為空
* min=
最小長度
* max=
最大長度
* <span></span> 顯示提示內容
*/
var formValidate = function () {
var _this = this;
this
options = {
number : {reg : /^[
]+$/
str :
必須為數字
}
decimal : {reg : /^[
]{
}(d+)[
]+(d+)$/
str :
必須為DECIMAL格式
}
english : {reg : /^[A
Za
z]+$/
str :
必須為英文字母
}
upper_english : {reg : /^[A
Z]+$/
str :
必須為大寫英文字母
}
lower_english : {reg : /^[a
z]+$/
str :
必須為小寫英文字母
}
email : {reg : /^([a
zA
Z
]+[_|_|
]?)*[a
zA
Z
]+@([a
zA
Z
]+[_|_|
]?)*[a
zA
Z
]+
[a
zA
Z]{
}$/
str :
Email格式不正確
}
chinese : {reg : /[u
E
u
FA
uf
ufa
d]/ig
str :
必須含有中文
}
url : {reg : /^[a
zA
z]+://[^s]*/
str :
URL格式不正確
}
phone : {reg : /^[
][
][
]{
}$/
str :
電話號碼格式不正確
}
ip : {reg : /^(d+)
(d+)
(d+)
(d+)$/
str :
IP地址格式不正確
}
money : {reg : /^[
]+[
][
]{
}$/
str :
金額格式不正確
}
number_letter : {reg : /^[
a
zA
Z_]+$/
str :
只允許輸入英文字母
數字
_
}
zip_code : {reg : /^[a
zA
Z
]{
}$/
str :
郵政編碼格式不正確
}
account : {reg : /^[a
zA
Z][a
zA
Z
_]{
}$/
str :
賬號名不合法
允許
字符
字母下劃線和數字
}
qq : {reg : /[
][
]{
}/
str :
QQ賬號不正確
}
card : {reg : /^(d{
})(
|
|
)?(d{
})([
]d)([
]d)(d{
})(d|X)?$/
str :
身份證號碼不正確
}
};
//初始化 綁定表單 選項
this
init = function (options) {
this
setOptions(options);
this
checkForm();
};
//設置參數
this
setOptions = function (options) {
for (var key in options) {
if (key in this
options) {
this
options[key] = options[key];
}
}
};
//檢測表單 包括是否為空
最大值 最小值
正則驗證
this
checkForm = function () {
$("#formValidate")
submit(function () {
var formChind = $("#formValidate")
children();
var testResult = true;
formChind
each(function (i) {
var child = formChind
eq(i);
var value = child
val();
var len = value
length;
var childSpan = child
next();
//屬性中是否為空的情況
if (child
attr(
empty
)) {
if (child
attr(
empty
) ==
yes
&& value ==
) {
if (childSpan) {
childSpan
html(
);
}
return;
}
}
//屬性中min 和 max 最大和最小長度
var min = null;
var max = null;
if (child
attr(
min
)) min = child
attr(
min
);
if (child
attr(
max
)) max = child
attr(
max
);
if (min && max) {
if (len < min || len > max) {
if (childSpan) {
childSpan
html(
);
childSpan
html(
字符串長度在
+ min +
與
+ max +
之間
);
testResult = false;
return;
}
}
} else if (min) {
if (len < min) {
if (childSpan) {
childSpan
html(
);
childSpan
html(
字符串長度應大於
+ min);
testResult = false;
return;
}
}
} else if (max) {
if (len > max) {
if (childSpan) {
childSpan
html(
);
childSpan
html(
字符串長度應小於
+ max);
testResult = false;
return;
}
}
}
//正則校驗
if (child
attr(
validate
)) {
var type = child
attr(
validate
);
var result = _this
check(value
type);
if (childSpan) {
childSpan
html(
);
if (result != true) {
childSpan
html(
+ result);
testResult = false;
}
}
}
});
return testResult;
});
};
//檢測單個正則選項
this
check = function (value
type) {
if (this
options[type]) {
var val = this
options[type][
reg
];
if (!val
test(value)) {
return this
options[type][
str
];
}
return true;
} else {
return
找不到該表單驗證正則項
;
}
};
}
From:http://tw.wingwit.com/Article/program/Java/JSP/201311/20490.html
