jQuery 表单验证扩展代码(一)(3)

      
效果图2

          
效果图3

复制代码 代码如下:

$("#txtPass2").checkCompare({
onFocus:"和前面的比较",
onEmpty:"输入的不能为空",
onSucces:"验证成功",
onBlur:"验证失败",
dataType:"number",
comType:">=",
tipId:"txtPass2Tip",
targetId:"txtPass1"
});

<p>
<label>密码1:</label><textarea></textarea><span></span>
</p>
<p>
<label>密码2:</label><textarea></textarea><span></span>
</p>

五. 输入的参数正则表达式验证

这个验证相对比较简单，因为使用正则表达式，无需自己去思考输入的情况。只需要引入一个正则表达式就可以了

下面是输入参数:

onFocus : 获得焦点的文字提示(如果指定样式则在样式名前加 @ ,因此文字提示首字母不能有@)

onEmpty : 输入项为空文字提示(如果指定样式则在样式名前加 @ ,因此文字提示首字母不能有@)

onSucces : 验证成功的文字提示(如果指定样式则在样式名前加 @ ,因此文字提示首字母不能有@)

onBlur : 失去焦点的文字提示(如果指定样式则在样式名前加 @ ,因此文字提示首字母不能有@)(验证失败提示)

regExp : 正则表达式

tipId : 用于显示提示信息的控件id (*)

jQuery正则表达式的验证

复制代码 代码如下:

/**
* 正则表达式的验证
* 输入参数:
* onFocus : 获得焦点的文字提示(如果指定样式则在样式名前加 @ ,因此文字提示首字母不能有@)
* onEmpty : 输入项为空文字提示(如果指定样式则在样式名前加 @ ,因此文字提示首字母不能有@)
* onSucces : 验证成功的文字提示(如果指定样式则在样式名前加 @ ,因此文字提示首字母不能有@)
* onBlur : 失去焦点的文字提示(如果指定样式则在样式名前加 @ ,因此文字提示首字母不能有@)(验证失败提示)
* regExp : 正则表达式
* tipId : 用于显示提示信息的控件id (*)
*/

$.fn.extend({
checkRegExp:function(inputArg){
if ($(this).is("input") || $(this).is("textarea")) {
//获得焦点绑定
$(this).bind("focus", function(){
if (inputArg.onFocus != undefined) {
$("#" + inputArg.tipId).html(inputArg.onFocus);
}
});

//获得失去焦点事件
$(this).bind("blur",function(){
if($(this).val()!=undefined && $(this).val()!=""){
if ($(this).val().match(inputArg.regExp) == null) {
$("#" + inputArg.tipId).html(inputArg.onSucces);
}else{
$("#" + inputArg.tipId).html(inputArg.onBlur);
}
}else{
$("#" + inputArg.tipId).html(inputArg.onEmpty);
}
});
}
}
});

正则表达式效果和测试代码

  
输入非数字

  
 输入数字

复制代码 代码如下: