基于jQuery基础表单验证

浏览数：34 / 时间：2015年06月09日

表单验证对于我们做web的基本上天天都会用到，我这里整理了一个基于jquery的一个函数，方便大家以后直接调用。

js函数：

////常规验证 必填项、数字、日期、邮箱、手机号码 验证函数
/**
* 检查输入框是否为必填项
* 输入参数：
* 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 和样式部分

<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测试方法

$(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"
      });
 
  });