JQuery
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 * $(‘#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();
} }, ‘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 ); }, & ‘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 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 ‘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 } | |
话题作者
头衔:无
活跃成员
