表单验证对于我们做web的基本上天天都会用到，我这里整理了一个基于jquery的一个函数，方便大家以后直接调用。
js函数：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
|
////常规验证 必填项、数字、日期、邮箱、手机号码 验证函数/*** 检查输入框是否为必填项* 输入参数：* required : 是否为必填项，true 和 false ，true 表示为必填项 (*)* onFocus : 获得焦点的文字提示(如果指定样式则在样式名前加 @ ,因此文字提示首字母不能有@)* onError : 验证失败的文字提示(如果指定样式则在样式名前加 @ ,因此文字提示首字母不能有@)(验证失败提示)* onSucces : 验证成功的文字提示(如果指定样式则在样式名前加 @ ,因此文字提示首字母不能有@)* tipId : 用于显示提示信息的控件id (*)*dataType :数据类型参数(text,number,date,mail,mobile)*regExp :正则函数* 组合例子 : {required:true,onFocus:"Required",onBlur:"@error",onSucces:"Success",tipId:"tipid"}*/$.fn.extend({checkRequired: function (inputArg) {if (inputArg.required) {
if ($(this).is("input") || $(this).is("textarea") || $(this).is("text")) {
//绑定获得焦点事件$(this).bind("focus", function () {
if (inputArg.onFocus != undefined) {
$("#"
+ inputArg.tipId).html(inputArg.onFocus);
$("#"
+ inputArg.tipId).addClass("div_req");
}});//绑定事情焦点事件$(this).bind("blur", function () {
if ($(this).val() != undefined && $(this).val() != "") {
if (inputArg.dataType == undefined || inputArg.dataType == "") {
$("#"
+ inputArg.tipId).html(inputArg.onSucces);
}else
{
var
bTrue = false;
if (inputArg.regExp != undefined && inputArg.regExp != "") {
if (!inputArg.regExp.test($(this).val()))
bTrue = true;
}else
{
switch
(inputArg.dataType) {
case
"text":
$("#"
+ inputArg.tipId).html(inputArg.onSucces);
break;
case
"number":
if (parseInt($(this).val()) > 0) {
bTrue = true;
}break;
case
"date":
var
mydate = /^((^((1[8-9]\d{2})|([2-9]\d{3}))([-\/\._])(10|12|0?[13578])([-\/\._])(3[01]|[12][0-9]|0?[1-9])$)|(^((1[8-9]\d{2})|([2-9]\d{3}))([-\/\._])(11|0?[469])([-\/\._])(30|[12][0-9]|0?[1-9])$)|(^((1[8-9]\d{2})|([2-9]\d{3}))([-\/\._])(0?2)([-\/\._])(2[0-8]|1[0-9]|0?[1-9])$)|(^([2468][048]00)([-\/\._])(0?2)([-\/\._])(29)$)|(^([3579][26]00)([-\/\._])(0?2)([-\/\._])(29)$)|(^([1][89][0][48])([-\/\._])(0?2)([-\/\._])(29)$)|(^([2-9][0-9][0][48])([-\/\._])(0?2)([-\/\._])(29)$)|(^([1][89][2468][048])([-\/\._])(0?2)([-\/\._])(29)$)|(^([2-9][0-9][2468][048])([-\/\._])(0?2)([-\/\._])(29)$)|(^([1][89][13579][26])([-\/\._])(0?2)([-\/\._])(29)$)|(^([2-9][0-9][13579][26])([-\/\._])(0?2)([-\/\._])(29)$))$/;
if (!mydate.test($(this).val()))
bTrue = true;
break;
case
"mail":
var
myreg = /^([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+@([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+\.[a-zA-Z]{2,3}$/;
if (!myreg.test($(this).val())) {
bTrue = true;
}break;
case
"mobile":
var
mymobile = /^0?(13[0-9]|15[012356789]|18[0236789]|14[57])[0-9]{8}$/;
if (!mymobile.test($(this).val()))
bTrue = true;
break;
}}if (bTrue) {
$("#"
+ inputArg.tipId).html(inputArg.onError);
}else
{
$("#"
+ inputArg.tipId).html(inputArg.onSucces);
}}}else
{
$("#"
+ inputArg.tipId).html(inputArg.onError);
}});}}}});////常规验证 必填项、数字、日期、邮箱、手机号码 验证函数 |
HTML 和样式部分
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
|
<style> .div_req {
font-size:small;
display:inline;
color:red;
padding-left:10px;
letter-spacing:2px
}
</style>
</head><body> <form id="form1"
runat="server">
<div>
是否必填项验证： <input type="text"
id="txtName"
/><div id="txtNameTip"
></div><br /><br />
手机号码验证： <input type="text"
id="mobileId"
/><div id="txtmobileTip"></div><br /><br />
邮箱验证：<input type="text"
id="mailId"
/><div id="txtmailTip"></div><br /><br />
日期验证：<input type="text"
id="dateId"
/><div id="txtdateTip"></div>
</div>
</form>
</body> |
JS测试方法
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
|
$(document).ready(function () { $("#txtName").checkRequired({
required: true,
onFocus: "*必填项！",
onError: "必须填写啊!",
onSucces: "OK",
tipId: "txtNameTip"
});
$("#mobileId").checkRequired({ required: true, onFocus: "*必填项！", onError: "手机号码有误！请重新输入！", onSucces: "OK", tipId: "txtmobileTip", dataType: "mobile", regExp: /^0?(13[0-9]|15[012356789]|18[0236789]|14[57])[0-9]{8}$/ });
$("#mailId").checkRequired({
required: true, onFocus: "*必填项！", onError: "邮箱有误！请重新输入！", onSucces: "OK", tipId: "txtmailTip", dataType: "mail"
});
$("#dateId").checkRequired({
required: true, onFocus: "*必填项！", onError: "日期输入有误！请重新输入！", onSucces: "OK", tipId: "txtdateTip", dataType: "date"
});
});
|
ok！就一个js函数checkRequired();根据不同需求传递不同参数。