12jQuery formValidator插件

时间：2016-07-13 16:49:44 阅读：271 评论：0 收藏：0 [点我收藏+]

标签：

jQuery formValidator表单验证插件是客户端表单验证插件。
使用jQuery formValidator需要加载的js文件：
加载jQuery类库支持jquery-1.3.2
<script src="jquery-1.3.2.js" type="text/javascript"></script>
注意这里jquery-1.3.2.js必须导入到其他js文件前面。

需要导入的css样式文件：validator.css
<link type="text/css" rel="stylesheet" href="formValidator/style/validator.css"></link>

加载插件的样式库，如果你是自动构建提示层，请加载validatorAuto.css，(一般不需要导入)

加载验证用的核心文件：formValidator.js
<script src="formValidator.js" type="text/javascript"></script>

加载用于正则表达式的扩展文件：formValidatorRegex.js
<script src="formValidatorRegex.js" type="text/javascript"></script>

如果使用验证中日历控件还需要导入的文件有：
formValidator/DateTimeMask.js
formValidator/datepicker/WdatePicker.js

jQuery formValidator目前支持5种大的校验方式，分别是：
inputValidator（针对input、textarea、select控件的字符长度、值范围、选择个数的控制）
compareValidator（提供2个对象的比较，目前可以比较字符串和数值型）
ajaxValidator（通过ajax到服务器上做数据校验）
regexValidator（提供可扩展的正则表达式库）
functionValidator （提供可扩展函数库来做校验）

每种格式支持的控件类型如下：
inputValidator:text,radio,checkbox,file,password,textarea,select单选/多选
compareValidator:text,file,password,textarea
ajaxValidator:text,file,password,textarea,select单选/多选
regexValidator:text,file,password,textarea
functionValidator:text,radio.checkbox,file,password,textarea,select单选/多选

插件目前提示错误，有两种模式：showword和showalert,即文字提示和窗口提示，下面的4大验证方式，针对showalert这种方式不是都必须的，有些配置是没有作用的。

formValidator用来初始化类型，必须先执行。例如：设置当元素获取焦点是显示的提示信息，验证失败的错误提示等。当对某个元素进行验证配置时先配置formValidator然后再配置下面的inputValidator等验证，一般将异步Ajax验证放在后面。
inputValidator用来设置元素可接受的验证规则，例如：最大最小长度，日期的格式。(一个元素上可以有多个inputValidator)
compareValiator用来进行元素之间的比较。例如：密码是否相同。
regexValidator用来进行正则表达式的验证。
ajaxValidator用来进行异步验证。

$.formValidator.initConfig，用于对要进行验证的表单进行初始化
例如：下面是对id为form1的表单进行初始化
$.formValidator.initConfig({formid:"form1",onsuccess:function(){alert(‘ddd‘);return true;},
onerror:function(msg,elem){alert(msg+elem.id);}
});
例如：下面是对id为test1的文本域配置验证规则并与id为max的文本进行比较。
$("#test1").formValidator({onfocus:"用户名至少6个字符,最多10个字符",oncorrect:"",onshow:""})
.inputValidator({min:6,max:10,onerror:"你输入的用户名非法,请确认"})
.compareValidator({desid:"max",operateor:"<",onerror:"大小不对",datatype:"number"});
对于.compareValidator，<表示小于，>表示大于，!=表示不等于，=表示等于,大于等于>=，小于等于<=
*****************
jQuery formValidator的验证执行是在单击了表单中的submit按钮触发。如果是通过button调用Form表单的submit()方法，那么表单在没有通过验证的情况下也会提交。如果想通过botton来提交表单并且进行验证应该使用$("#Formid").trigger("submit");来触发Submit事件，而不要使用submit()方法。

****************

initConfig中的参数：
formid，接受的值是被验证的表单的id。

onsuccess，接受一个函数，表示在表单中的被验证的通过验证后的执行的函数。不能只写函数名称。但是只有该函数return true时表单才能被提交。如果return false表单时不能被提交的。

onerror，同样也是接受一个函数，如果在表单验证失败时执行。onerror对应的函数可以接受两个参数，第一个参数是第一个验证失败元素提示的错误信息，第二个参数代表第一个验证失败元素(DOM)。当表单提交时调用此函数

wideword，表示是否把一个全角字符(中文字符)当做2个长度。默认为true;

errorfocus，表示发生错误时，第一个出错的控件是否获得焦点。默认为true;

validatorGroup String
(默认: "1") 属性名:校验组组号。你要针对哪个组进行配置。
formvalidator函数里的validatorGroup值如果跟这里的值一样，就认为是同一组的控件。

forceValid Boolean
(默认: true) 属性名:强制验证。同组的控件都采用：一直输入正确为止才允许离开焦点

alertMessage Boolean
属性名:弹出窗口模式。是否弹出窗口。是否通过alert来提示错误信息，没有漂浮的提示层

autoTip Boolean
(默认: false) 属性名:自动构建提示层。是否自动构建提示层。插件自动构建提示层，偏移的位置用formValidator函数里的tipCss来动态调整相对位置

formValidator中的参数：
validatorGroup，默认值为1，一个页面的控件可以分成多个组，分开进行校验。
empty，被验证的元素是否为空。默认为false，不能为空。
automodify，输入错误离开焦点的时候自动修复错误。支持text,file,textarea三种类型。
onempty，输入内容为空的时候提示的信息。如果取值为空则不显示。
onshow，显示的时候给出的提示的信息。如果取值为空则不显示。
onfocus，获得焦点的提示的信息。如果取值为空则不显示。
oncorrect，输出正确后的提示。如果输出正确将出现该提示，为空将不提示。
tipid，显示错误的容器ID，默认为被验证的元素的ID+"Tip"。
defaultvalue,input和select元素的默认值。
triggerevent,默认值为blur(失去焦点时触发)，change:当输入框里的值发生改变的时候触发。
leftTrim:默认为false，是否去掉左边空格再校验。
rightTrim:默认为false，是否去掉右边空格再校验。

例如下面的是针对select多选，defaultvalue:["0","1","2"]表示默认select元素中的索引号为0,1,2的项是被
$("#selectmore").formValidator({onshow:"按住CTRL可以多选",onfocus:"按住CTRL可以多选,至少选择2个",oncorrect:"谢谢你的合作",defaultvalue:["0","1","2"]})
.inputValidator({min:2,onerror:"至少选择2个"});

inputValidator中的参数：
type，比较类型。对select无效。默认为"size":表示比较长度。还可以取值为:(以下取值用引号包括)
number:数值型比较。
string:字符型比较。
date:短日期类型。
datetime:长日期类型。

min，最小长度。默认为0。默认数值型。对select-one而言inputValidator里的参数min和max表示选择的索引号范围。对select-multiple而言inputValidator里的参数min和max表示选择的个数。对于checkbox而言表示被选中的checkbox的最小个数。
例如：
$(":checkbox[name=‘checkbox1‘]").formValidator().inputValidator({min:1,onerror:"你选的个数不对(至少选择一个)"});
<td colspan="2"> <input type="checkbox" name="checkbox1" id="qq1"/>
乒乓球
<input type="checkbox" name="checkbox1" id="qq2" value="1" />
羽毛球
<input type="checkbox" name="checkbox1" id="qq3" value="2" />
上网
<input type="checkbox" name="checkbox1" id="qq4" value="3" />
旅游
<input type="checkbox" name="checkbox1" id="qq5" value="4" />
购物 </td>

max，最大长度，默认为9999999999。同上。

onerror，发生错误的提示。默认为"输入错误"。为空者不显示。
onerrormin，比min属性小的提示，默认为null。当用户输入的值比min属性小的时候的错误提示
onerrormax，比max属性大的提示，默认为null。当用户输入的值比max属性大的时候的错误提示

empty,控件文本值是否允许两边为空两边都允许出现空默认值{leftempty:true,rightempty:true,emptyerror:null}
leftempty:表示左边是否允许为空
rightempty:表示右边是否允许为空
emptyerror：出现该错误的时候的提示，如果为null，则利用onerror属性来提示错误。

compareValitor中的参数：
desid，要比较控件的ID，默认为""，要跟源目标进行比较的目标ID
operateor，比较符号，默认为"="，还可以的取值:=、!=、>、>=、<、<=
datatype，数据类型，默认为"string"，目前只支持2种:"string"、"number","datetime","date"
onerror，发生错误的提示，默认为"输入错误"。为空者不显示。

regexValidator中的参数：
regexp，正则表达式，默认为""，采用的是显式构造函数new RegExp("pattern"[,"flags"]); 由于Javascript 中‘\‘ 被用作转义字符，所以在使用显示构造函数构造实例对象的时候，需要使用‘\\‘ 代替‘\‘ 。

param，附加参数 "i" g：代表可以进行全局匹配。
i：代表不区分大小写匹配。
m：代表可以进行多行匹配。
可以任意组合,当然也可以不加参数。

datatype，数据类型 "string"，"string":自己写的表达式，"enum":枚举名。
你可以自己修改、添加formValidatorRegex.js里的枚举项目名和表达式。

onerror: 发生错误的提示 "输入错误"。为空者不显示。

ajaxValidator中的参数：
type 请求的类型 "GET" "POST" 或 "GET" ，默认为"GET"
url 发送到的URL地址，默认为""
datatype 返回的数据类型 "html" xml、html、script、json ，默认为"html"
data 数据，默认为"" ,可以是JSON对象 data:{ ... }
modifyParam，我自己添加的添加的一个函数用来在ajax请求前修改data参数的值。
async 是否以异步的方式发送，默认为true
success 当请求成功时调用的函数，默认为null
processdata 自动处理返回的数据为字符串 true 在默认的情况下，如果data选项传进的数据是一个对象而不是字符串，将会自动地被处理和转换成一个查询字符串
complete 当请求完成时调用的函数，默认为null
beforesend 当请求前时调用的函数，默认为null 有个一个参数，根$.ajax里的beforeSend参数一样。
buttons 你点提交的按钮(组)jQuery对象，默认为null 当你触发了ajax校验，buttons里对应的按钮（组）就会灰掉，一直等待服务器返回数据为止
error 当请求失败时调用的函数 "请求失败" 你可以自己定义这个错误，在error里自动打出。为空者不显示。
onerror 取值为字符串，提示异步验证失败时提示的信息。
它会将被验证的字段的id作为属性名，被验证字段的内容作为值传递到url中。

functionValidator中的参数
fun,接受的的参数是外部函数名。该函数有两个参数，第一个参数是元素的值，第二个参数是元素的对象(DOM)。返回true/false代表校验成功/失败。
onerror,发生错误的提示信息。默认值为"输入错误"。
例如：
$("#sfzh").formValidator({onshow:"请输入15或18位的身份证",onfocus:"输入15或18位的身份证",oncorrect:"输入正确"}).functionValidator({fun:test,onerror:"外部函数验证失败"});
test是我们要执行的函数的名称。那么如何向这个test函数传递参数呢。在源码中有一句setting.fun(srcjo.val(),srcjo.get(0));它向我们配置的test函数传递
两个参数第一个参数元素的值，第二个参数是元素本身(DOM对象)。所以在可以这样就可以传递参数了
function test(value,obj){
alert("元素的值"+value);
alert("元素的id"+obj.id);
...
}
test返回false则会输出onerror信息。

isCardID是formValidatorRegex.js自带的函数，该文件还带有很多正则表达式和函数我们可以自己扩展。它自带的函数如：
isTime形如 (13:04:06)，isDate形如 (2003-12-05)，isDateTime形如 (2003-12-05 13:04:06)

还可以使用它自带的正则表达式如下面验证整数：
$("#zs").formValidator({onshow:"请输入整数",oncorrect:"谢谢你的合作，你的整数正确"})
.regexValidator({regexp:"intege",datatype:"enum",onerror:"整数格式不正确"});

公共函数：
$.formValidator.pageIsValid接受的参数是validatorGroup属性为的值，表示针对那个组进行验证，如果验证成功返回true，验证失败返回false。也将分别执行验证成功和失败对应的函数。
例如：下面表示针对第一组进行验证。
var bool=jQuery.formValidator.pageIsValid(‘1‘)
该函数用于进行分组验证。例如：
function Button1_onclick() {
return jQuery.formValidator.pageIsValid(‘1‘);
}

var bool=$.formValidator.oneIsValid("id").isvalid，判断某个元素是否通过验证，返回true/false。参数是元素的id。

unFormValidator(true)，用于动态的将配置到某个元素上的验证给卸载掉。如果取值为false，则恢复对它的验证。如：
$("#userUrl").unFormValidator(true);
如果之前已经对某个元素配置了验证并卸载后，使用$("#userUrl").unFormValidator(false);可以再恢复其上的验证配置。

$.formValidator.getInitConfig("...")，该函数用于获得第一组表单的配置。它的参数为valitorgroup的取值。下例中获得第一组表单的初始化配置中的wideword的值。我们还可以动态的进行设置它的值。
alert($.formValidator.getInitConfig("1").wideword);
$.formValidator.getInitConfig("1").wideword = false

$.formValidator.resetTipState("1")，该函数将第一个组表达恢复到onshow状态。
例如：
$.formValidator.initConfig({validatorGroup:"2",onsuccess:function(){alert("校验组2通过验证，不过我不给它提交");return false;}});
$("#shouji").formValidator({validatorGroup:"2",onshow:"请输入手机号码",onfocus:"手机号码要符合格式哦",oncorrect:"恭喜你,你输对了"}).inputValidator({min:11,max:11,onerror:"长度不正确"}).regexValidator({regexp:"^[1][3][0-9]{9}$"});
如果一个页面中有两组表单，表单中都是通过submit按钮进行提交。那么点击其中一个submit按钮，另一个表单也会跟着提交，可以给submit按钮一个click事件，分别调用对应的方法来进行提交，这样点击一个submit仅仅提交其对应的表单。如：
function Submit1_onclick() {

return jQuery.formValidator.pageIsValid(‘1‘);

}
function Submit2_onclick() {
return jQuery.formValidator.pageIsValid("2");
}

实例：
//验证表单
$.formValidator.initConfig({formid:"companyForm",wideword:false,onsuccess:function(){
var boolyewu=checkyewu();
var boolmail=checkmail();
var s="";
if(boolyewu){
var child=0;
$("#haveselect option").each(function(i){
child++;
if(child>0){
s+=$(this).val()+",";
}
});
s=s.substring(0,s.lastIndexOf(‘,‘));
$("#hidden10").val(s);
}

if(boolyewu && boolmail){
var p=$("#telephone1").val()+"-"+$("#telephone2").val()+"-"+$("#telephone3").val();
var f=$("#fax1").val()+"-"+$("#fax2").val()+"-"+$("#fax3").val();
$("#phone").attr("value",p);
$("#fax").attr("value",f);
return true;
}
return false;
},onerror:function(){
checkyewu();
checkmail();
}

});

$("#corpname").formValidator({onfocus:"正确完整的公司信息有助于快速通过认证",oncorrect:"公司名称可以注册",onshow:""})
.inputValidator({min:3,max:50,onerror:"请输入3-50个字符"})
.regexValidator({regexp:"^[^@#!%$￥^*+-,.?\\s=\\|]+$",onerror:"公司名称不要包含空格等特殊字符"})
.ajaxValidator({
type : "post",
url : "${pageContext.request.contextPath}/portal/ajaxCheckCorpName.action",
datatype : "json",
success : function(data){
if( data > 0 )
{
return true;
}
else if(data<0)
{
return false;
}
},
onerror : "公司名称已经被注册",

onwait : "正在检查公司名称是否可用，请稍候..."
});

$("#userUrl").formValidator({onfocus:"公司站点名称",oncorrect:"该站点名称可以使用",onshow:""})
.inputValidator({min:1,max:20,onerror:"请输入站点名称(1-20)个字符)"})
.regexValidator({regexp:"^(\\w+)([_|.|\\-|\\/|\\\\]?(\\w+))*$",onerror:"请填写正确格式的站点名称"})
.ajaxValidator({
type : "post",
url : "${pageContext.request.contextPath}/portal/ajaxCheckDomainUrl.action",
datatype : "json",
success : function(data){
if( data > 0 )
{
return true;
}
else if(data<0)
{
return false;
}
},

onerror : "该站点名称已经被注册",

onwait : "正在检查公司站点是否可用，请稍候..."
});

$(":checkbox[name=‘compType‘]").formValidator({tipid:"corptypeTip",onshow:"",onfocus:"选择公司类型",oncorrect:"已选择公司类型"})
.inputValidator({min:1,onerror:"你至少选择1个"});

$("#quzhen").formValidator({onfocus:"选择区镇",oncorrect:"",onshow:""})
.inputValidator({min:1,onerror:"请选择所在区镇"});

$("#keyword").formValidator({onfocus:"输入公司关键字",oncorrect:"",onshow:"",onempty:"",empty:true})
.inputValidator({max:80,onerror:"公司关键词不超过80个字符"})
.regexValidator({regexp:"^([\\w\\d\\u4e00-\\u9fa5][,|，]?)+$",onerror:"关键词需以逗号分隔"});

$("#detail").formValidator({onfocus:"输入公司详细描述",oncorrect:"",onshow:"",onempty:"",empty:true})
.inputValidator({max:10000,onerror:"公司关键词不超过10000个字符"});

$("#telephone1").formValidator({onfocus:"国家号",onshow:"",tipid:"telephoneTip"})
.inputValidator({min:2,onerror:"请输入正确国家号"})
.regexValidator({regexp:"^[0-9]+$",onerror:"国家号码格式不正确"});

$("#telephone2").formValidator({onfocus:"区号",onshow:"",tipid:"telephoneTip"})
.inputValidator({min:3,onerror:"请输入正确区号"})
.regexValidator({regexp:"^[0-9]+$",onerror:"区号格式不正确"});

$("#telephone3").formValidator({onfocus:"电话号码",onshow:"",tipid:"telephoneTip"})
.inputValidator({min:3,onerror:"请输入正确电话号码"})
.regexValidator({regexp:"^[0-9]+$",onerror:"电话号码格式不正确"});

$("#relationMan").formValidator({onfocus:"希望客户怎么称呼您",onshow:""})
.inputValidator({min:1,onerror:"请输入联系人名称"})
.regexValidator({regexp:"^[^\\s]+$",onerror:"请不要输入空白字符"});

$("#read").formValidator({onshow:"",oncorrect:"已经阅读服务条款",onfocus:"请阅读服务条款"})
.inputValidator({min:1,onerror:"您是否阅读服务条款"});

$("#email1").formValidator({onfocus:"请输入email",oncorrect:"该Email可以使用",onshow:""})
.inputValidator({min:1,onerror:"请输入您的email地址"})
.regexValidator({regexp:"^(\\w+)([_|\\-]?(\\w+))*@{1}([_|\\-]?(\\w+))*(\\.{1}[a-zA-Z0-9]{2,})+$",onerror:"请填写正确格式的email地址"})
.ajaxValidator({
type : "post",
url : "${pageContext.request.contextPath}/portal/ajaxCheckEmail.action",
datatype : "json",
success : function(data){
if( data > 0 )
{
return true;
}
else if(data<0)
{
return false;
}
},

onerror : "email已经被占用",

onwait : "正在检验email是否可用，请稍候..."
});

$("#standbyemail").formValidator({onfocus:"请输入备用email",oncorrect:"该Email可以使用",onshow:"",onempty:"",empty:true})
.regexValidator({regexp:"^(\\w+)([_|\\-]?(\\w+))*@{1}([_|\\-]?(\\w+))*(\\.{1}[a-zA-Z0-9]{2,})+$",onerror:"请填写正确格式的email地址"})
.compareValidator({desid:"email1",operateor:"!=",onerror:"备用电子邮箱不能与电子邮箱相同"});

$("#fax1").formValidator({onfocus:"国家号",oncorrect:"",onshow:"",tipid:"faxTip",onempty:"",empty:true})
.inputValidator({min:2,onerror:"请输入正确国家号"})
.regexValidator({regexp:"^[0-9]+$",onerror:"国家号码格式不正确"});

$("#fax2").formValidator({onfocus:"区号",oncorrect:"",onshow:"",tipid:"faxTip",onempty:"",empty:true})
.inputValidator({min:3,onerror:"请输入正确区号"})
.regexValidator({regexp:"^[0-9]+$",onerror:"区号格式不正确"});

$("#fax3").formValidator({onfocus:"电话号码",oncorrect:"",onshow:"",tipid:"faxTip",onempty:"",empty:true})
.inputValidator({min:3,onerror:"请输入正确电话号码"})
.regexValidator({regexp:"^[0-9]+$",onerror:"电话号码格式不正确"});

$("#statec").formValidator({onfocus:"国家号码",oncorrect:"",onshow:"",onempty:"",empty:true,tipid:"mobileTip"})
.regexValidator({regexp:"^[0-9]+$",onerror:"国家号码格式不正确"});

$("#mobile").formValidator({onfocus:"手机号码",onshow:"",onempty:"",empty:true})
.regexValidator({regexp:"^(((13[0-9]{1})|(15[0-9]{1})|(18[0-9]{1}))+\\d{8})$",onerror:"手机号码格式不正确"});

$("#regcode").formValidator({onfocus:"公司注册号码(字母数字组合)",onshow:"",onempty:"",empty:true})
.regexValidator({regexp:"^[0-9a-zA-Z]+$",onerror:"注册号码格式不正确"});

$("#papercode").formValidator({onfocus:"公司法人证件号码(字母数字组合)",onshow:"",onempty:"",empty:true})
.regexValidator({regexp:"^[0-9a-zA-Z]+$",onerror:"证件号码格式不正确"});

$("#postcode").formValidator({onfocus:"公司邮编",onshow:"",onempty:"",empty:true})
.regexValidator({regexp:"^[0-9]{6}$",onerror:"邮编格式不正确"});

$("#date1").focus(function(){WdatePicker({skin:‘whyGreen‘,dateFmt:‘yyyy-MM‘,oncleared:function(){$(this).blur();},onpicked:function(){$(this).blur();}})});

**************************
当使用formValidator对某个元素配置了异步验证，而且该元素有默认值，那么在提交的时候就会对该进行异步验证就选通过验证不会就此提交而需要再次单击提交才行，为了避免这种情况，我们对含有
默认值且要进行异步验证的元素在页面加载时通过触发它的blur或change事件来激发它的异步验证。例如：
$("#userUrl").trigger("blur");
$("#email1").trigger("blur");

*********************

新版4.1.1帮助文档可以参考一下这里：
http://www.yhuan.com/formValidator4.1.1/doc/index.html

***************
正则表达式验证指定输入的日期是否合法且格式是否满足(yyyy/mm/dd):
$("#startMonth").formValidator({onfocus:"",oncorrect:"",onshow:""})
.regexValidator({regexp:"^((((1[6-9]|[2-9]\\d)\\d{2})\\/(0?[13578]|1[02])\\/(0?[1-9]|[12]\\d|3[01]))|(((1[6-9]|[2-9]\\d)\\d{2})\\/(0?[13456789]|1[012])\\/(0?[1-9]|[12]\\d|30))|(((1[6-9]|[2-9]\\d)\\d{2})\\/0?2\\/(0?[1-9]|1\\d|2[0-8]))|(((1[6-9]|[2-9]\\d)(0[48]|[2468][048]|[13579][26])|((16|[2468][048]|[3579][26])00))\\/0?2\\/29\\/))$",onerror:"请输入正确的日期格式(yyyy/mm/dd)"})

正则表达式验证指定输入的日期是否满足(yyyy/mm/dd或----/--/--):
$("#startMonth")).formValidator({onfocus:"",tipid:"inDateTip",oncorrect:"",onshow:"",onempty:"",empty:true})
.regexValidator({regexp:"((^\\-{4}\\/\\-{2}\\/\\-{2}$)|(^((((1[6-9]|[2-9]\\d)\\d{2})\\/(0?[13578]|1[02])\\/(0?[1-9]|[12]\\d|3[01]))|(((1[6-9]|[2-9]\\d)\\d{2})\\/(0?[13456789]|1[012])\\/(0?[1-9]|[12]\\d|30))|(((1[6-9]|[2-9]\\d)\\d{2})\\/0?2\\/(0?[1-9]|1\\d|2[0-8]))|(((1[6-9]|[2-9]\\d)(0[48]|[2468][048]|[13579][26])|((16|[2468][048]|[3579][26])00))\\/0?2\\/29\\/)))$)",onerror:"请输入正确的日期格式(yyyy/mm/dd)"})


正则表达式验证指定输入的日期是否合法且格式是否满足(yyyy/mm/dd HH:mm):
.regexValidator({regexp:"^((((1[6-9]|[2-9]\\d)\\d{2})\\/(0?[13456789]|1[012])\\/(0?[1-9]|[12]\\d|30))|(((1[6-9]|[2-9]\\d)\\d{2})\\/0?2\\/(0?[1-9]|1\\d|2[0-8]))|(((1[6-9]|[2-9]\\d)(0[48]|[2468][048]|[13579][26])|((16|[2468][048]|[3579][26])00))\\/0?2\\/29\\/))\\s(0\\d{1}|1\\d{1}|2[0-3]):([0-5]\\d{1})$",onerror:"时间格式如：2011/10/01 09:00"});

//不允许输入空白字符
.regexValidator({regexp:"\\S",onerror:"请输入订单号"})

jQuery DateTimeMask日期掩码插件，能比较完美的控制日期的输入，在ie6.0和firefox3.0下调试通过。本插件采用配置信息的思想，主要有以下配置参数
safemodel: true, //安全模式下，不能粘贴，不能拖拉
masktype: "3", //掩码类型，目前有5种类型
isnull: false, //是否可以全部都是0
lawlessmessage: "你输入的格式错误", //当输入非法日期，失去焦点的时候，插件将自动出现该错误信息，恢复原值。
onlycontrolkeydown: false, //只控制输入，允许出现非法日期
focuscssname: "", //获得焦点的样式
oldclassname: "", //记录当前的样式
isnow: false, //是否取当前日期
ismonthstart: false, //是否取当月1日
whenfocus:function(){}, //获得焦点时候的回调函数。无返回值。
whenblur: function(){return true;} //失去焦点时候的回调函数。return ture 表示额外校验成功；return false:恢复到上次的值
masktype的五种类型
1:yyyy-MM-dd HH:mm:ss 2:yyyy-MM-dd HH:mm 3:yyyy-MM-dd 4:HH:mm 5:HH:mm:ss 。

*****************
My97 DatePicker的使用
formValidator使用的日期控件时my97 datepicker4.0版。由于这个版本的zh-cn.js在火狐中显示的乱码，我将4.7版本的zh-cn.js覆盖它，就解决了它的乱码问题。
关于My97 DatePicker：
WdatePicker.js(导入文件,使用WdatePicker仅需导入该文件)
config.js(主配置文件)
calendar.js(日期库主文件)
My97DatePicker.htm(临时页面文件,不可删除)
目录lang(存放语言文件)
目录skin(存放皮肤的相关文件)

使用My97 DatePicker非常简单，只需要调用WdatePicker()函数即可，显示日期控件。
y97 DatePicker的多语言支持：
繁体中文：
<input id="d311" class="Wdate" type="text" onFocus="WdatePicker({lang:‘zh-tw‘})"/>
英文:
<input id="d312" class="Wdate" type="text" onFocus="WdatePicker({lang:‘en‘})"/>
简体中文:
<input id="d313" class="Wdate" type="text" onFocus="WdatePicker({lang:‘zh-cn‘})"/>
默认情况lang=‘auto‘,即根据浏览器的语言自动选择语言.

默认皮肤：在WdatePicker里配置了skin=‘default‘,所以此处可省略
<input id="d321" class="Wdate" type="text" onfocus="WdatePicker()"/>

whyGreen皮肤：
<input id="d322" class="Wdate" type="text" onfocus="WdatePicker({skin:‘whyGreen‘})"/>

日期控件的事件：
onpicked，表示在日期控件选择日期后应该执行的函数。
例如：
<input id="d322" class="Wdate" type="text" onfocus="WdatePicker({skin:‘whyGreen‘,onpicked:function(){$(this).blur(); alert($(this).val());} })"/>

下面的事件取值为function，默认为null，y M d H m s 分别表示年月日时分秒，changing 事件发生在属性改变之前，changed 事件发生在属性改变之后。
ychanging ychanged
Mchanging Mchanged
dchanging dchanged
Hchanging Hchanged
mchanging mchanged
schanging schanged

WdatePicker中的配置项：
doubleCalendar，是否是双月模式,如果该属性为true,则弹出同时显示2个月的日期框。默认为false.
lang,设置日期控件语言。当值为‘auto‘时自动根据客户端浏览器的语言自动选择语言。
skin，皮肤名称默认自带 default和whyGreen两个皮肤。
dateFmt，默认为‘yyyy-MM-dd‘，日期显示格式。例如：dateFmt:‘yyyy-MM-dd HH:mm:ss‘。如果dateFmt取值为‘yyy-MM‘,则其不会显示某日，只会显示年分月份进行选择。
minDate,默认为‘1900-01-01 00:00:00‘，最小日期。
maxDate,默认为‘2099-12-31 23:59:59‘，最大日期。
realDateFmt，默认为‘yyyy-MM-dd‘
realTimeFmt，默认为：‘HH:mm:ss‘
realFullFmt，默认为：‘%Date %Time‘
startDate，默认为‘‘,起始日期,既点击日期框时显示的起始日期为空时,使用今天作为起始日期(默认值)否则使用传入的日期作为起始日期(注意要与上面的real日期相匹配)
firstDayOfWeek,默认为0，周的第一天 0表示星期日 1表示星期一。
isShowWeek，是否显示周，默认为false。
isShowClear，是否显示清空按钮，默认为true。
isShowToday，是否显示今天按钮，默认为true。
readOnly，是否只读，默认为false。
errDealMode，纠错模式，默认为0。 0 - 提示 1 - 自动纠错 2 - 标记，一般选择1。
<input id="d321" class="Wdate" type="text" onfocus="WdatePicker({skin:‘whyGreen‘,errDealMode:1})"/>
例如：
<input type="text" class="Wdate" id="d412" onfocus="WdatePicker({skin:‘whyGreen‘,dateFmt:‘yyyy-MM-dd HH:mm:ss‘,minDate:‘2008-03-08 11:30:00‘,maxDate:‘2008-03-10 20:59:30‘})" value="2008-03-09 11:00:00"/>

<input type="text" class="Wdate" id="d414" onfocus="WdatePicker({dateFmt:‘H:mm:ss‘,minDate:‘8:00:00‘,maxDate:‘11:30:00‘})"/>
动态限制日期：注意:日期格式必须与 realDateFmt 和 realTimeFmt 一致
%y 当前年
%M 当前月
%d 当前日
%ld 本月最后一天
%H 当前时
%m 当前分
%s 当前秒
{} 运算表达式,如:{%d+1}:表示明天
例如，只能选择今天以前的日期：
<input id="d421" class="Wdate" type="text" onfocus="WdatePicker({skin:‘whyGreen‘,maxDate:‘%y-%M-%d‘})"/>
只能选择今天7:00:00至明天21:00:00的日期
<input id="d424" class="Wdate" type="text" onfocus="WdatePicker({dateFmt:‘yyyy-M-d H:mm:ss‘,minDate:‘%y-%M-%d 7:00:00‘,maxDate:‘%y-%M-{%d+1} 21:00:00‘})"/>

specialDates，默认为null，取值为Array，特殊日期,对指定的日期进行高亮显示。例如：高亮每月1号 15号
<input id="d472" type="text" class="Wdate" onFocus="WdatePicker({specialDates:[‘....-..-01‘,‘....-..-15‘]})"/>

specialDays，默认为null，取值为Array，特殊天,使用此功能禁用周日至周六所对应的日期进行高亮显示0至6 分别代表周日至周六。例如：高亮每周周一周五
<input id="d471" type="text" class="Wdate" onFocus="WdatePicker({specialDays:[1,5]})"/>

*******************
同步的ajax与点击两次提交：

当在一个input元素onblur上使用了同步的ajax验证，如果这个input获得焦点时然后鼠标点击提交按钮，需要点击两次才能提交表单。因为鼠标点击表单的提交按钮会触发这个input元素的onblur事件，而onblur事件方法中如果有同步的ajax验证则会锁住浏览器，等同步的ajax执行完成后才能在执行其它操作，所以需要点击两次提交，要解决这个问题需要在提交按钮上绑定mouseover事件，当数据移动到提交按钮时就将触发获得焦点元素的blur事件，这样提前触发blur事件的同步ajax,就不用点击两次提交了。
$("#save").bind("mouseover",function(){
if(!(typeof $(":focus")[0]=="undefined") && $(":focus")[0].nodeName!="undefined" && $(":focus")[0].nodeName==‘INPUT‘){
$(":focus").blur();
}

});

标签：

原文地址：http://blog.csdn.net/bin71722/article/details/51889881

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行