表单验证对于我们做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();根据不同需求传递不同参数。
原文：http://www.cnblogs.com/qfjzr/p/3573473.html