jQuery 表单验证扩展(三)

2020-05-22 15:33:26易采站长站整理

在看这篇文章之前, 可以看看前两篇文章,表单验证输入范围验证是在原有的基础上改写的。

(一). 输入范围验证存在问题
在第二篇上提到的问题,在原有的验证中也存在相同的问题。当然在这次改写中也解决了一些这些问题。同时也添加了对radio,checkbox,select 元素的验证。当然对于时间的验证仍没有解决,后续过程中会继续补充!

(二). 验证参数的设计

onEmptyText: 当输入内容为空的时候显示文本
onEmptyClass: 当输入内容为空的时候显示样式
onSuccessText: 当验证成功的时候显示的文本
onSuccessClass: 当验证成功的时候显示的样式
onErrorText:当验证失败的时候显示的文本
onErrorClass:当验证失败的时候显示的样式
onFocusText: 当获得焦点的时候显示的文本
onFocusClass:当获得焦点的时候显示的样式
dataType:输入的数据类型
min:输入的最小值
max:输入的最大值
targetId:显示提示消息的元素id

改写的部分就是将提示性文字和样式都单独隔离出来,可以更好灵活的操作表单验证!
改写的文章支持text,number,date 三种 数据形式,而且在radio,checkbox,select的验证也有更新。
radio,checkbox ,select 验证只是验证是否选中,而且这里的select 对于blur 事件并不敏感,所以这里采用的change事件来验证比较好。

(三). 验证范围源码解析
jQuery检查输入项的范围 源码解析
/**
* onEmptyText: 当输入内容为空的时候显示文本
* onEmptyClass: 当输入内容为空的时候显示样式
* onSuccessText: 当验证成功的时候显示的文本
* onSuccessClass: 当验证成功的时候显示的样式
* onErrorText:当验证失败的时候显示的文本
* onErrorClass:当验证失败的时候显示的样式
* onFocusText: 当获得焦点的时候显示的文本
* onFocusClass:当获得焦点的时候显示的样式
* dataType:输入的数据类型
* min:输入的最小值
* max:输入的最大值
* targetId:显示提示消息的元素id
* @param {Object} inputArg
*/
$.fn.extend({
checkRange:function(inputArg){
//绑定焦点事件
$(this).bind(“focus”,function(){
var flag=true;
if($(this).is(“input”) || $(this).is(“textarea”)){
if($(this).attr(“type”)==”radio” || $(this).attr(“type”)==”checkbox”){
var name=$(this).attr(“name”);
var items=$(‘input[@name=””+name+””][checked]’);
if(items.length>0){
flag=false;
}
}else{
if($(this).val()!=undefined && $(this).val()!=””){
flag=false;
}
}
}else{ //select 需要改进 select没有focus事件,应该改为change事件