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

来源:转载

该插件主要用于验证表单是否输入正确. 主要是简化表单验证程序的编写. 如果在一发表页面 例如 淘宝发布商品 页面 拥有 多个输入框验证 那么编写代码就变得很长 看起来也十分复杂了. 因此弄出一个jquery 插件来 简化编写的代码. 

如何加载:

 代码如下 复制代码

<script type=“text/javascript” charset=“utf-8″ src=“../jquery.js”></script> 

<script type=“text/javascript” charset=“utf-8″ src=“../DForm.js”></script> 

<script type=“text/javascript” charset=“utf-8″> 

$(document).ready(function(){ 

$.fn.extend({ ‘dform’:DForm }); 

… 

}) 

</script> 

 

 

 

那先预先看下代码简化效果: 判断 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( ‘[email protected]’ ) //是否为邮箱

DForm().isEmail( ‘[email protected]’, true ) //是否为邮箱 将验证邮箱的错误结果全部输出;

DForm().isPassw

ord( ’[email protected]#$%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


分享给朋友:
您可能感兴趣的文章:
随机阅读: