一聚教程网:一个值得你收藏的教程网站

热门教程

jquery表单验证插件之dform使用说明

时间:2022-11-14 22:03:27 编辑:袖梨 来源:一聚教程网

如何加载:

代码如下 复制代码

那先预先看下代码简化效果: 判断 test 是否等于1 结束 则alert 结果

代码如下 复制代码

$(‘#test’).dform({

‘allError’ : false,

‘equal’ : ‘1‘,

‘complete’ : function( res ){

alert( res )

}

})

判断 TEST 是否含有英文字母 (非字符) 错误则alert 结果

代码如下 复制代码

$(‘#test’).dform({

‘allError’ : false,

‘hasEn’ : true,

‘error’ : function( res ){

alert( res )

}

})

判断test 是否 符合正则表达式 若符合 这 alert 结果

代码如下 复制代码

$(‘#test’).dform({

‘allError’ : false,

‘preg’ : /123/,

‘success’ : function( res ){

alert( res )

}

})

判断test 是否为数字 并且大于1 如果正确 则alert 结果 allError 则为是否返回所有结果集

如果isNum = false 则 res.isNum = false 如果min = true 则 res.min = true

代码如下 复制代码

$(‘#test’).dform({

‘allError’ : true,

‘isNum’ : true,

‘min’ : 1,

‘success’ : function( res ){

alert( res )

}

})

判断test 是否为不为空 并且 必须为 数字 如果正确则 alert 结果

allError = false 则 noEmpty 与isNum 同时为 TRUE RES才等于TRUE 反则 都返回FALSE

代码如下 复制代码

$(‘#test’).dform({

‘allError’ : false,

‘noEmpty’ : true,

‘isNum’ : true,

‘success’ : function( res ){

alert( res )

}

})

判断test 是否符合要求: 符合返回 alert true 反则 false

必须不为空 (为数字或为英文字母) ======> ( isEn || isNum ) && noEmpty

代码如下 复制代码

var test1 = $(‘#test’).dform({

‘allError’ : false,

‘noEmpty’ : true,

‘isNum’ : true

})

var test2 = $(‘#test’).dform({

‘allError’ : false,

‘noEmpty’ : true,

‘isEn’ : true,

‘complete’ : function( res ){

if( test1.getResponse() === true || res === true ) alert( true )

else alert( false )

}

})

1233333333333333333333333333333

/*

* $(‘#pw’) 为input password id=pw 根据j
Query 来定义

* $(‘#pw2′) 为input password id=pw2

* 功能:

* 主要是用来检测 密码一与密码二是否相同

* 同时检测 pw是否为空 若为空则返回 false

**/

var dpw = $(‘#pw’).dform({

‘allError’ : false,

‘cache’ : false,

‘noEmpty’ : true,

‘equal’ : $(‘#pw2′),

‘complete’ : function( res ){

$(‘#pwR’).val( res );

}

})

var dpw = $(‘#pw2′).dform({

‘allError’ : false,

‘cache’ : false,

‘noEmpty’ : true,

‘equal’ : $(‘#pw’),

‘complete’ : function( res ){

$(‘#pwR’).val( res );

}

})

有一个要明确该类暂时只用于form 中对象的判断 如果为可编辑iframe/div 则 暂时不能使用 并且如果为input radio 则应为这样:

代码如下 复制代码

/**

* 功能:

* 主要用于判断是否选择了男 如果选择了则输出男 否则输出女;

*

* equal 必须等于1

*/

var dsex = $(‘input:radio[name="gender"]‘).dform({

‘allError’ : false,

‘equal’ : 1,

‘event’ : ‘change’,

‘complete’ : function( res ){

$(‘#sexR’).val( res ? ‘男’: ‘女’ );

}

})

如果要用 按钮 来检测 则可以这样:

/**

* 功能:

* 当点击 $(‘#btnR’) button id = btnR时

* 运行检测;

* 判断是否为数字 这里的数字并非有效数字 00.00 这样正确

* 有效数字 用isEffectiveNum 属性 或 函数;

**/

var dbtn = $(‘#btn’).dform({

‘trigger’ : $(‘#btnt’),

‘allError’ : false,

‘isNum’ : true,

‘event’ : ‘click’,

‘complete’ : function( res ){

$(‘#btnR’).val( res )

}

})

现在看起来好像 比不用更好….但是这简单的判断绝对必能看出这插件的作用 来点复杂点的吧:

代码如下 复制代码

/**

* 功能:把现在两年的日期载入到

* $(‘#year’) 年份 select id = year

* $(‘#month’) 年份 select id = month

* $(‘#date’) 年份 select id = date

* 同时判断月份 有多少日 例如 非闰年 2月 只有28日

*

* ready 是装载后运行的方法 如果该方法为该对象的发放 可以直接使用this;

* extend 方法是扩展 方法类 必须以类 function(){} 这个形式添加

* 里面的方法若调用该类的方法 可以直接使用this;

* event 默认为blur 可以改变其触发的动作;

* complete 是结束是运行的代码;

*

* 该方法主要不是应用在验证 而作用在选择 同步变异

**/

var dyear = $(‘#year’).dform({

‘ready’ : function(){

this.reSetYear();

},

‘extend’ : function(){

this.reSetYear = function(){

this.cleanOPtions();

var now = new Date();


n class="keyword">for( var i = now.getFullYear() ; i < now.getFullYear() + 2; i ++ ) this.addOPtions( i );

}

},

‘event’ : ‘change’,

‘complete’ : function(){

dmonth.reSetMonth();

ddate.reSetDate();

}

})

var dmonth = $(‘#month’).dform({

‘ready’ : function(){

this.reSetMonth();

},

‘extend’ : function(){

this.reSetMonth = function(){

var month = this.val();

this.cleanOPtions();

for( var i = 1; i < 13; i ++ ) this.addOPtions( i, i < 10 ? ‘0‘ + i : i );

this.val( month );

}

},

‘event’ : ‘change’,

‘complete’ : function(){

ddate.reSetDate();

}

})

var ddate = $(‘#date’).dform({

‘ready’ : function(){

this.reSetDate();

},

‘extend’ : function(){

this.reSetDate = function(){

var date = this.val();

this.cleanOPtions();

var maxDate = new DForm().getDaysInMonth( parseInt( dyear.val() ), parseInt( dmonth.val() ) );

for( var i = 1; i < maxDate + 1; i ++ ) this.addOPtions( i, i < 10 ? ‘0‘ + i : i );

this.val( date );

}

}

})

这三者是相互关联的 3级关联 我做的是 年月日时分 五级关联 并且不能超过当前时间. 这里三级关联比较容易理解. 如果我要用ajax 处理 不又要使用jquery.ajax({})再进行提交并且 处理吗? 这点也考虑到在里面了 使用ajax 并且 与jQuery 中$.ajax({})方法完全一样

/**

* 功能:

* 主要是验证 是不是 邮箱地址;

* 同时请求服务器 看邮箱地址是否被占用

*

* $(‘#email’) input text id = email

* method 检测方法 是自定义方法 可以用extend(function(){})来添加

* 或则再js文件的DFormET方法中添加

* before 操作前运行

* wait 等待中运行 wait 主要用于ajax时运行

* error 错误是运行

* success 正确运行

* complete 结束时运行 无论对错;

*/

var demail = $(‘#email’).dform({

‘allError’ : false,

‘method’ : ‘isEmail’,

‘ajax’ : {

‘type’ : ‘post’,

‘dataType’ : ‘json’,

‘url’ : ‘ajax.php’

},

‘before’ : function(){

$(‘#emailR’).val(‘beforeFunc’);

},

‘wait’ : function(){

$(‘#emailR’).val(‘waitFunc’);

},

‘error’ : function( res ){

$(‘#emailR’).val( ‘error:’ + res );

}, &
nbsp;

‘success’ : function( res ){

$(‘#emailR’).val( ‘success:’ + res );

},

‘complete’ : function( res ){

// $(‘#emailR’).val( ‘complete:’ + res );

}

});

此外还可以直接使用类的方法操作数值;

DForm().empty( ” ) //” 是否为 ”;

DForm().noEmpty( ” ) //” 是否不为 ”;

DForm().equal( ‘123‘, ‘321‘ ) //’123′ 是否为 ’123′

DForm().equal( $(‘#pw’), $(‘#pw2′) ) //$(‘#pw’) 是否等于 $(‘#pw2′)

DForm().noEqual( $(‘#pw’), $(‘#pw2′) ) //$(‘#pw’) 是否不等于 $(‘#pw2′)

DForm().noEqual( ‘123‘, ‘321‘ ) //321 是否不等于 123

DForm().min( 122, 321 ) //321 是否不小于123 (这里数字上判断 字符串也行)

DForm().max( 122, 321 ) //321 是否不大于123 (同上)

DForm().length( 3, ‘123‘, ‘>’ ) //’123′ 的字符长度 是否 > 3

DForm().length( 13, ‘测试下先q’, ‘>=’, ‘all’, ‘utf8′, /[^u4E00-uFA29]/g, /[u4E00-uFA29]/g )

DForm().preg( /[u4E00-uFA29]/g, ‘请问’ ) //正则

DForm().minChLength( 3, ‘请问’ ) //中文字符长度是否不小于3

DForm().maxChlength( 3, ‘请问’ ) //中文字符长度是否不大于3

DForm().minEnLength( 3, ‘qweq’ ) //英文字符长度是否不小于3

DForm().maxEnLength( 3, ‘qweq’ ) //英文字符串度是否不大于3

DForm().minLength( 10, ‘武器厄q’ ) //字符长度是否不小于10

DForm().minLength( 9, ‘武器厄q’, ‘all’, ‘utf8′, /[^u4E00-uFA29]/g, /[u4E00-uFA29]/g )

DForm().maxLength( 9, ‘武器厄q’, ‘all’, ‘utf8′, /[^u4E00-uFA29]/g, /[u4E00-uFA29]/g )

DForm().minChOrEnLength( 4, 7, ‘请问qwe’ ) //字符长度是否不大于10

DForm().minChOrEnLength( 3, 6, ‘请问qwe’, ‘utf8′, /[^u4E00-uFA29]/g, /[u4E00-uFA29]/g )

DForm().maxChOrEnLength( 3, 6, ‘请问qwe’, ‘utf8′, /[^u4E00-uFA29]/g, /[u4E00-uFA29]/g )

DForm().hasEn( ‘请问wqe’ ) //是否含有英文字母 不包括标点数字

DForm().hasCh( ‘请问wqe’ ) //是否含有中文 包括中文标点

DForm().noHasEn( ‘qwe’ ) //是否不含

DForm().noHasCh( ‘qwe’ ) //是否不含

DForm().hasEnNoCh( ‘qwe’ ) //是否只有中文 没英文

DForm().hasChNoEn( ‘qwe’ ) //是否只有英文 没中文

DForm().hasChAndEn( ‘请问’ ) //是否有中文 与中文

DForm().isEmail( ‘qowera@qq.com’ ) //是否为邮箱

DForm().isEmail( ‘qowera@qq.com’, true ) //是否为邮箱 将验证邮箱的错误结果全部输出;

DForm().isPassw
ord( ’123qwe7890!@#$%67‘ ) //是否为密码 可填写TRUE 同上

DForm().isName( ‘ox’ ) //是否为名字 自定义的 具体为 必须只有中文 或英文 中文不能小于2个中文字符 不能超过10个中文字符 英文不能小于2个英文字符 不能超过10个英文字符

DForm().isName( ‘123‘, true ) //同上上

DForm().toUpperMoney( ‘en’, ‘11231223.132‘ ) //money 转化成 千位 用逗号隔开

DForm().toUpperMoney( ‘ch’, ‘11231223.132‘ ) //money 转化成 中文形式;

DForm().isEffectiveNum( ‘23‘ ) //是否为 有效数字;

发布所有的属性 有点儿能改 有点儿最好不要改;

var options = {

‘trigger’ : null, //触发器;

‘target’ : null, //对象;

‘allError’ : true, //返回所有结果 all/single;

‘cache’ : true, //缓存;

‘language’ : ‘en’, // en, ch;

‘charset’ : ‘utf8′, // utf8, gbk;

‘tag’ : ‘input’, // target 的 tag;

‘type’ : ‘text’, // target 的 type;

‘response’ : {}, //设置resonse初始值;

‘value’ : null, //设置初始值;

‘typeSet’ : new Array( ‘>’, ‘<’, ‘>=’, ‘<=’ ,’==’ ),

‘charSet’ : new Array( ‘utf8′, ‘gbk’ ),

‘languageSet’ : new Array( ‘en’, ‘ch’, ‘all’ ),

‘pregSet’ : {

‘enChar’ : /[^u4E00-uFA29]/,

‘chChar’ : /[u4E00-uFA29]/,

‘en’ : /^[a-zA-Z]+$/,

‘ch’ : /^[u4E00-uFA29]+$/,

‘num’ : /[0-9]+/,

‘effectiveNum’ : /^([1-9][0-9]*(.)?[0-9]+|0(.)[0-9]+|[1-9][0-9]*[0-9]*)$/

},

‘upper’ : {

‘num’ : new Array( ‘零’, ‘壹’, ‘贰’, ‘叁’, ‘肆’, ‘伍’, ‘陆’, ‘柒’, ‘捌’, ‘玖’ ),

‘unitAdvanced’ : new Array( ‘圆’, ‘万’, ‘亿’, ‘兆’, ‘京’, ‘垓’, ‘秭’, ‘穰’, ‘沟’, ‘涧’, ‘正’, ‘载’, ‘极’, ‘恒河沙’, ‘阿僧?’, ‘那由他’, ‘不可思议’, ‘无量’, ‘大数’ ),

‘unitLow’ : new Array( ‘仟’, ‘佰’, ‘拾’, ” ),

‘unitDecimal’ : new Array( ‘角’, ‘分’, ‘厘’ )

},

‘line’ : new Array( //操作循序;

‘method’, ‘selected’, ‘empty’, ‘noEmpty’, ‘equal’, ‘noEqual’,

‘min’, ‘max’, ‘between’, ‘minLen’, ‘maxLen’,'minEnOrChLength’,

‘maxEnOrChLe
ngth’, ‘minEnLength’, ‘maxEnLength’, ‘minChLength’ ,’maxChlength’,

‘isEn’, ‘isCh’, ‘isNum’, ‘isEffectiveNum’, ‘isEnChar’, ‘noHasEnChar’, ‘noHasNum’,

‘noHasEnChar’, ‘noHasChChar’, ‘hasEnChar’, ‘hasChChar’, ‘hasNum’,

‘preg’, ‘ajax’

),

‘package‘ : new Array(), //封装好的方法;

‘method’ : null, //检测的方法;

‘selected’ : null, //选择;

‘empty’ : null, //必须为空;

‘noEmpty’ : null, //不能为空;

‘equal’ : null, //必须等于;

‘noEqual’ : null, //不能等于;

‘min’ : null, //必须大于等于( 数字 );

‘max’ : null, //必须小于等于( 数字 );

‘between’ : null, //必须大于等于 AND 小于等于;

‘minLen’ : null, //字符长度必须大于等于;

‘maxLen’ : null, //字符长度必须小于等于;

‘minEnOrChLength’ : null, //英文必须大于等于或中文必须大于等于;

‘maxEnOrChLength’ : null, //英文必须小于等于或中文必须小于等于;

‘minEnLength’ : null, //英文必须大于等于;

‘maxEnLength’ : null, //英文必须小于等于;

‘minChLength’ : null, //中文必须大于等于;

‘maxChlength’ : null, //中文必须小于等于;

‘isEn’ : null, //必须为英文;

‘isCh’ : null, //必须为中文;

‘isNum’ : null, //必须为数字;

‘isEffectiveNum’ : null, //必须为有效数字;

‘isEnChar’ : null, //必须为英文字符;

‘isChChar’ : null, //必须为中文字符;

‘noHasEnChar’ : null, //必须不含英文字符;

‘noHasChChar’ : null, //必须不含中文字符;

‘noHasNum’ : null,
//必须不含数字(字符串);

‘hasEnChar’ : null, //必须含有英文字符;

‘hasChChar’ : null, //必须含有中文字符;

‘hasNum’ : null, //必须含有数字(字符串);

‘preg’ : null, //检测正则是否符合;

‘ajax’ : null, //触发 ajax 请求;

‘ready’ : null, //初始化后运行func;

‘extend’ : null, //扩展方法类;

‘event’ : ‘blur’, //触发事件的要素;

‘before’ : function(){}, //触发前func

‘wait’ : function(){}, //等待时的func 主要用于ajax 等待;

‘error’ : function(){}, //触发error func

‘success’ : function(){}, //触发success func

‘complete’ : function(){} //触发complete func

}

热门栏目