编程开发 购物 网址 游戏 小说 歌词 地图 快照 股票 美女 新闻 笑话 | 汉字 软件 日历 阅读 下载 图书馆 开发 租车 短信 China
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
图片批量下载器
↓批量下载图片,美女图库↓
多播视频美女直播
↓电视,电影,美女直播,迅雷资源↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
移动开发 架构设计 编程语言 互联网 开发经验 Web前端 开发总结
开发杂谈 系统运维 研发管理 数据库 云 计 算 Java开发
VC(MFC) Delphi VB C++(C语言) C++ Builder 其它开发语言 云计算 Java开发 .Net开发 IOS开发 Android开发 PHP语言 JavaScript
ASP语言 HTML(CSS) HTML5 Apache MSSQL数据库 Oracle数据库 PowerBuilder Informatica 其它数据库 硬件及嵌入式开发 Linux开发资料
  编程开发知识库 -> Java开发 -> jQueryEasyUi验证 -> 正文阅读
 

[Java开发]jQueryEasyUi验证[第1页]

http://uule.iteye.com/blog/1849690
多重验证:
Js代码  收藏代码

                    field : 'startPort', 
                    title : "起始端口", 
                    editor: "text", 
                    width : 50, 
                    editor: { 
                        type: 'SuperValidatebox', 
                        options: { 
                            required: true, 
                            validType: ['integer','length[0,5]'] 
                        } 
                    }, 
                     
                     
自从1.3.2版本开始,validatebox自身已经支持多重校验了,例如: 
input class="easyui-validatebox" data-options="required:true,validType:['email','length[0,20]']">                     
Java代码  收藏代码
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
    <script src="easyui1.2.4/jquery-1.6.min.js" type="text/javascript"></script> 
    <script src="easyui1.2.4/jquery.easyui.min.js" type="text/javascript"></script> 
    <!--自定义验证--> 
    <script src="easyui1.2.4/validator.js" type="text/javascript"></script> 
    <link href="easyui1.2.4/themes/default/easyui.css" rel="stylesheet" type="text/css" /> 
    <script> 
        $(function () { 
             
            //设置text需要验证 
            $('input[type=text]').validatebox(); 
        }) 
     
    </script> 
</head> 
<body> 
    邮箱验证:<input type="text" validtype="email" required="true" missingMessage="不能为空" invalidMessage="邮箱格式不正确" /><br /> 
    网址验证:<input type="text" validtype="url" invalidMessage="url格式不正确[http://www.example.com]" /><br /> 
    长度验证:<input type="text" validtype="length[8,20]" invalidMessage="有效长度8-20" /><br /> 
    手机验证:<input type="text" validtype="mobile"  /><br /> 
    邮编验证:<input type="text" validtype="zipcode" /><br /> 
    账号验证:<input type="text" validtype="account[8,20]" /><br /> 
    汉子验证:<input type="text" validtype="CHS" /><br /> 
    远程验证:<input type="text" validtype="remote['checkname.aspx','name']" invalidMessage="用户名已存在"/> 
</body> 
</html> 
自定义验证:
Java代码  收藏代码
//扩展easyui表单的验证 
$.extend($.fn.validatebox.defaults.rules, { 
    //验证汉子 
    CHS: { 
        validator: function (value) { 
            return /^[\u0391-\uFFE5]+$/.test(value); 
        }, 
        message: '只能输入汉字' 
    }, 
    //移动手机号码验证 
    mobile: {//value值为文本框中的值 
        validator: function (value) { 
            var reg = /^1[3|4|5|8|9]\d{9}$/; 
            return reg.test(value); 
        }, 
        message: '输入手机号码格式不准确.' 
    }, 
    //国内邮编验证 
    zipcode: { 
        validator: function (value) { 
            var reg = /^[1-9]\d{5}$/; 
            return reg.test(value); 
        }, 
        message: '邮编必须是非0开始的6位数字.' 
    }, 
    //用户账号验证(只能包括 _ 数字 字母)  
    account: {//param的值为[]中值 
        validator: function (value, param) { 
            if (value.length < param[0] || value.length > param[1]) { 
                $.fn.validatebox.defaults.rules.account.message = '用户名长度必须在' + param[0] + '至' + param[1] + '范围'; 
                return false; 
            } else { 
                if (!/^[\w]+$/.test(value)) { 
                    $.fn.validatebox.defaults.rules.account.message = '用户名只能数字、字母、下划线组成.'; 
                    return false; 
                } else { 
                    return true; 
                } 
            } 
        }, message: '' 
    } 
}) 
Js代码  收藏代码
$.extend($.fn.validatebox.defaults.rules, {          
        checkWSDL: {    
            validator: function(value,param){              
                 var reg = "^(http://|([0-9]{1,3}[.]{1}[0-9]{1,3}[.]{1}[0-9]{1,3}[.]{1}[0-9]{1,3}:[0-9]{1,4}))[/a-zA-Z0-9._%&:=(),?+]*[?]{1}wsdl$"; 
                 return reg.test(value); 
            },    
            message: '请输入合法的WSDL地址'    
        }, 
        checkIp : {// 验证IP地址 
            validator : function(value) { 
                var reg = /^((1?\d?\d|(2([0-4]\d|5[0-5])))\.){3}(1?\d?\d|(2([0-4]\d|5[0-5])))$/ ; 
                return reg.test(value); 
            }, 
            message : 'IP地址格式不正确' 
    } 
});  
=================================
Java代码  收藏代码
$.extend($.fn.validatebox.defaults.rules, {  
    selectValueRequired: {  
        validator: function(value,param){            
             if (value == "" || value.indexOf('请选择') >= 0) {  
                return false; 
             }else { 
                return true; 
             }   
        },  
        message: '该下拉框为必选项'  
    }  
});  
Java代码  收藏代码
<select id="serviceType" name="serviceType" style="width: 150px" class="easyui-combobox" required="true" validType="selectValueRequired"></select> 
===================================
Remote:远程验证
Easyui validatebox修改
http://blog.csdn.net/qlh2863/article/details/7269689
http://www.cnblogs.com/qiancheng509/archive/2012/11/23/2783700.html
http://blog.csdn.net/dyllove98/article/details/8866711
自己代码:
Java代码  收藏代码
equalTo : { 
            validator : function(value, param) { 
                return $("#" + param[0]).val() == value; 
            }, 
            message : '两次输入的密码不一致!' 
        }, 
        checkPassword :{ 
            validator : function(value,param){ 
                var sysUser = {}; 
                var flag ; 
                sysUser.userPassword = value; 
                $.ajax({ 
                    url : root + 'login/checkPwd.do', 
                    type : 'POST',                   
                    timeout : 60000, 
                    data:sysUser, 
                    async: false,   
                    success : function(data, textStatus, jqXHR) {    
                        if (data == "0") { 
                            flag = true;     
                        }else{ 
                            flag = false; 
                        } 
                    } 
                }); 
                if(flag){ 
                    $("#userPassword").removeClass('validatebox-invalid'); 
                } 
                return flag; 
            }, 
            message: '原始密码输入错误!' 
        } 
Java代码  收藏代码
<table cellpadding="0" align="center" style="width: 98%; height: 98%; text-align: right;"> 
    <tr> 
        <td>请输入原密码:</td> 
        <td style="text-align: left; padding-left: 10px;"><input type="password" id="userPassword" name="userPassword" class="easyui-validatebox" 
            data-options="required:true" validType="checkPassword"/> 
        </td> 
    </tr> 
    <tr> 
        <td>请输入新密码:</td> 
        <td style="text-align: left; padding-left: 10px;"><input type="password" id="newPassword" name="newPassword" class="easyui-validatebox" 
            data-options="required:true" /> 
        </td> 
    </tr> 
    <tr> 
        <td>请确认输入新密码:</td> 
        <td style="text-align: left; padding-left: 10px;"><input type="password" id="reNewPassword" name="reNewPassword" 
            class="easyui-validatebox" data-options="required:true"  validType="equalTo['newPassword']" /> 
        </td> 
    </tr> 
</table> 
====================================================================================
Js代码  收藏代码
/**
* 扩展easyui的validator插件rules,支持更多类型验证
*/ 
$.extend($.fn.validatebox.defaults.rules, { 
            minLength : { // 判断最小长度 
                validator : function(value, param) { 
                    return value.length >= param[0]; 
                }, 
                message : '最少输入 {0} 个字符' 
            }, 
            length : { // 长度 
                validator : function(value, param) { 
                    var len = $.trim(value).length; 
                    return len >= param[0] && len <= param[1]; 
                }, 
                message : "输入内容长度必须介于{0}和{1}之间" 
            }, 
            phone : {// 验证电话号码 
                validator : function(value) { 
                    return /^((\(\d{2,3}\))|(\d{3}\-))?(\(0\d{2,3}\)|0\d{2,3}-)?[1-9]\d{6,7}(\-\d{1,4})?$/i.test(value); 
                }, 
                message : '格式不正确,请使用下面格式:020-88888888' 
            }, 
            mobile : {// 验证手机号码 
                validator : function(value) { 
                    return /^(13|15|18)\d{9}$/i.test(value); 
                }, 
                message : '手机号码格式不正确' 
            }, 
            phoneAndMobile : {// 电话号码或手机号码 
                validator : function(value) { 
                    return /^((\(\d{2,3}\))|(\d{3}\-))?(\(0\d{2,3}\)|0\d{2,3}-)?[1-9]\d{6,7}(\-\d{1,4})?$/i.test(value) || /^(13|15|18)\d{9}$/i.test(value); 
                }, 
                message : '电话号码或手机号码格式不正确' 
            }, 
            idcard : {// 验证身份证 
                validator : function(value) { 
                    return /^\d{15}(\d{2}[A-Za-z0-9])?$/i.test(value) || /^\d{18}(\d{2}[A-Za-z0-9])?$/i.test(value); 
                }, 
                message : '身份证号码格式不正确' 
            }, 
            intOrFloat : {// 验证整数或小数 
                validator : function(value) { 
                    return /^\d+(\.\d+)?$/i.test(value); 
                }, 
                message : '请输入数字,并确保格式正确' 
            }, 
            currency : {// 验证货币 
                validator : function(value) { 
                    return /^\d+(\.\d+)?$/i.test(value); 
                }, 
                message : '货币格式不正确' 
            }, 
            qq : {// 验证QQ,从10000开始 
                validator : function(value) { 
                    return /^[1-9]\d{4,9}$/i.test(value); 
                }, 
                message : 'QQ号码格式不正确' 
            }, 
            integer : {// 验证整数 
                validator : function(value) { 
                    return /^[+]?[1-9]+\d*$/i.test(value); 
                }, 
                message : '请输入整数' 
            }, 
            chinese : {// 验证中文 
                validator : function(value) { 
                    return /^[\u0391-\uFFE5]+$/i.test(value); 
                }, 
                message : '请输入中文' 
            }, 
            chineseAndLength : {// 验证中文及长度 
                validator : function(value) { 
                    var len = $.trim(value).length; 
                    if (len >= param[0] && len <= param[1]) { 
                        return /^[\u0391-\uFFE5]+$/i.test(value); 
                    } 
                }, 
                message : '请输入中文' 
            }, 
            english : {// 验证英语 
                validator : function(value) { 
                    return /^[A-Za-z]+$/i.test(value); 
                }, 
                message : '请输入英文' 
            }, 
            englishAndLength : {// 验证英语及长度 
                validator : function(value, param) { 
                    var len = $.trim(value).length; 
                    if (len >= param[0] && len <= param[1]) { 
                        return /^[A-Za-z]+$/i.test(value); 
                    } 
                }, 
                message : '请输入英文' 
            }, 
            englishUpperCase : {// 验证英语大写 
                validator : function(value) { 
                    return /^[A-Z]+$/.test(value); 
                }, 
                message : '请输入大写英文' 
            }, 
            unnormal : {// 验证是否包含空格和非法字符 
                validator : function(value) { 
                    return /.+/i.test(value); 
                }, 
                message : '输入值不能为空和包含其他非法字符' 
            }, 
            username : {// 验证用户名 
                validator : function(value) { 
                    return /^[a-zA-Z][a-zA-Z0-9_]{5,15}$/i.test(value); 
                }, 
                message : '用户名不合法(字母开头,允许6-16字节,允许字母数字下划线)' 
            }, 
            faxno : {// 验证传真 
                validator : function(value) { 
                    return /^((\(\d{2,3}\))|(\d{3}\-))?(\(0\d{2,3}\)|0\d{2,3}-)?[1-9]\d{6,7}(\-\d{1,4})?$/i.test(value); 
                }, 
                message : '传真号码不正确' 
            }, 
            zip : {// 验证邮政编码 
                validator : function(value) { 
                    return /^[1-9]\d{5}$/i.test(value); 
                }, 
                message : '邮政编码格式不正确' 
            }, 
            ip : {// 验证IP地址 
                validator : function(value) { 
                    return /d+.d+.d+.d+/i.test(value); 
                }, 
                message : 'IP地址格式不正确' 
            }, 
            name : {// 验证姓名,可以是中文或英文 
                validator : function(value) { 
                    return /^[\u0391-\uFFE5]+$/i.test(value) | /^\w+[\w\s]+\w+$/i.test(value); 
                }, 
                message : '请输入姓名' 
            }, 
            engOrChinese : {// 可以是中文或英文 
                validator : function(value) { 
                    return /^[\u0391-\uFFE5]+$/i.test(value) | /^\w+[\w\s]+\w+$/i.test(value); 
                }, 
                message : '请输入中文' 
            }, 
            engOrChineseAndLength : {// 可以是中文或英文 
                validator : function(value) { 
                    var len = $.trim(value).length; 
                    if (len >= param[0] && len <= param[1]) { 
                        return /^[\u0391-\uFFE5]+$/i.test(value) | /^\w+[\w\s]+\w+$/i.test(value); 
                    } 
                }, 
                message : '请输入中文或英文' 
            }, 
            carNo : { 
                validator : function(value) { 
                    return /^[\u4E00-\u9FA5][\da-zA-Z]{6}$/.test(value); 
                }, 
                message : '车牌号码无效(例:粤B12350)' 
            }, 
            carenergin : { 
                validator : function(value) { 
                    return /^[a-zA-Z0-9]{16}$/.test(value); 
                }, 
                message : '发动机型号无效(例:FG6H012345654584)' 
            }, 
            same : { 
                validator : function(value, param) { 
                    if ($("#" + param[0]).val() != "" && value != "") { 
                        return $("#" + param[0]).val() == value; 
                    } else { 
                        return true; 
                    } 
                }, 
                message : '两次输入的密码不一致!' 
            } 
        }); 
/**
* 扩展easyui validatebox的两个方法.移除验证和还原验证
*/ 
$.extend($.fn.validatebox.methods, { 
            remove : function(jq, newposition) { 
                return jq.each(function() { 
                    $(this).removeClass("validatebox-text validatebox-invalid").unbind('focus.validatebox').unbind('blur.validatebox'); 
                        // remove tip 
                        // $(this).validatebox('hideTip', this); 
                    }); 
            }, 
            reduce : function(jq, newposition) { 
                return jq.each(function() { 
                    var opt = $(this).data().validatebox.options; 
                    $(this).addClass("validatebox-text").validatebox(opt); 
                        // $(this).validatebox('validateTip', this); 
                    }); 
            }, 
            validateTip : function(jq) { 
                jq = jq[0]; 
                var opts = $.data(jq, "validatebox").options; 
                var tip = $.data(jq, "validatebox").tip; 
                var box = $(jq); 
                var value = box.val(); 
                function setTipMessage(msg) { 
                    $.data(jq, "validatebox").message = msg; 
                }; 
                var disabled = box.attr("disabled"); 
                if (disabled == true || disabled == "true") { 
                    return true; 
                } 
                if (opts.required) { 
                    if (value == "") { 
                        box.addClass("validatebox-invalid"); 
                        setTipMessage(opts.missingMessage); 
                        $(jq).validatebox('showTip', jq); 
                        return false; 
                    } 
                } 
                if (opts.validType) { 
                    var result = /([a-zA-Z_]+)(.*)/.exec(opts.validType); 
                    var rule = opts.rules[result[1]]; 
                    if (value && rule) { 
                        var param = eval(result[2]); 
                        if (!rule["validator"](value, param)) { 
                            box.addClass("validatebox-invalid"); 
                            var message = rule["message"]; 
                            if (param) { 
                                for (var i = 0; i < param.length; i++) { 
                                    message = message.replace(new RegExp("\\{" + i + "\\}", "g"), param[i]); 
                                } 
                            } 
                            setTipMessage(opts.invalidMessage || message); 
                            $(jq).validatebox('showTip', jq); 
                            return false; 
                        } 
                    } 
                } 
                box.removeClass("validatebox-invalid"); 
                $(jq).validatebox('hideTip', jq); 
                return true; 
            }, 
            showTip : function(jq) { 
                jq = jq[0]; 
                var box = $(jq); 
                var msg = $.data(jq, "validatebox").message 
                var tip = $.data(jq, "validatebox").tip; 
                if (!tip) { 
                    tip = $("<div class=\"validatebox-tip\">" + "<span class=\"validatebox-tip-content\">" + "</span>" + "<span class=\"validatebox-tip-pointer\">" + "</span>" + "</div>").appendTo("body"); 
                    $.data(jq, "validatebox").tip = tip; 
                } 
                tip.find(".validatebox-tip-content").html(msg); 
                tip.css({ 
                            display : "block", 
                            left : box.offset().left + box.outerWidth(), 
                            top : box.offset().top 
                        }); 
            }, 
            hideTip : function(jq) { 
                jq = jq[0]; 
                var tip = $.data(jq, "validatebox").tip; 
                if (tip) { 
                    tip.remove; 
                    $.data(jq, "validatebox").tip = null; 
                } 
            } 
        }); 
easyUi动态验证提示信息的清除:
在使用带 validatebox 的输入框,第一次没输入出现如图验证提示信息
但是点击窗口取消后,再次打开窗口后输入框仍然带有验证信息,查看APi也没有找到解决的方法于是分析了一下页面代码,采用下面处理成功,
  $(".validatebox-tip").remove();
  $(".validatebox-invalid").removeClass("validatebox-invalid");
另外,有一篇文章
easyui验证的删除和恢复 地址http://liuna718-163-com.iteye.com/blog/1726145 供参考
引用一下他的代码:
Js代码  收藏代码
$.extend($.fn.validatebox.methods, {   
    remove: function(jq, newposition){   
        return jq.each(function(){   
            $(this).removeClass("validatebox-text validatebox-invalid").unbind('focus').unbind('blur'); 
        });   
    }, 
    reduce: function(jq, newposition){   
        return jq.each(function(){   
           var opt = $(this).data().validatebox.options; 
           $(this).addClass("validatebox-text").validatebox(opt); 
        });   
    }    
}); 
//使用 
$('#id').validatebox('remove'); //删除 
$('#id').validatebox('reduce'); //恢复 
设置Datagrid中Editor中验证的清除:
Js代码  收藏代码
$.extend($.fn.datagrid.methods, {     
        setDColumnTitle: function(jq, option){     
            if(option.field){   
                return jq.each(function(){     
                    var $panel = $(this).datagrid("getPanel");   
                    var $field = $('td[field='+option.field+']',$panel);   
                    if($field.length){   
                        var $span = $("span",$field).eq(0);   
                        var $span1 = $("span",$field).eq(1);   
                        $span.html(option.title);   
                        $span1.html(option.title);   
                    }   
                });   
            }   
            return jq;         
        } , 
        
        removeRequired: function(jq, field){     
            if(field){   
                return jq.each(function(){     
                    var $panel = $(this).datagrid("getPanel");   
                    var $field = $('td[field='+field+']',$panel);   
                    if($field.length){   
                        var $input = $("input",$field);                        
                        $input.removeClass("validatebox-text validatebox-invalid").unbind('focus').unbind('blur'); 
                    }   
                });   
            }   
            return jq;                 
        },   
        addRequired: function(jq, field){  
            if(field){   
                return jq.each(function(){     
                    var $panel = $(this).datagrid("getPanel");   
                    var $field = $('td[field='+field+']',$panel);   
                    if($field.length){   
                        var $input = $("input",$field);                        
                        $input.addClass("validatebox-text validatebox-invalid").unbind('focus').unbind('blur'); 
                    }   
                });   
            }            
        }  
});  
     
使用: 
$obj.datagrid('removeRequired','startPort'); 
$obj.datagrid('addRequired','startPort'); 
     
  Java开发 最新文章
nvm每次启动终端都要设置nvm use
单页面应用优缺点分析
微信小程序开发入门
jQueryEasyUi验证
CSS标签属性之position
ReactElement
Webpack+Babel+React的快速搭建
关于mongo 日期查询
Spring Boot基础教程8-web应用开发-模板引擎
java date time问题总结
上一篇文章      下一篇文章      查看所有文章
加:2017-02-15 22:11:03  更:2017-10-30 05:18:54 
VC(MFC) Delphi VB C++(C语言) C++ Builder 其它开发语言 云计算 Java开发 .Net开发 IOS开发 Android开发 PHP语言 JavaScript
ASP语言 HTML(CSS) HTML5 Apache MSSQL数据库 Oracle数据库 PowerBuilder Informatica 其它数据库 硬件及嵌入式开发 Linux开发资料
360图书馆 软件开发资料 文字转语音 购物精选 软件下载 美食菜谱 新闻资讯 电影视频 小游戏 Chinese Culture 股票 租车
生肖星座 三丰软件 视频 开发 短信 中国文化 网文精选 搜图网 美图 阅读网 多播 租车 短信 看图 日历 万年历 2018年1日历
2018-1-24 6:02:01
多播视频美女直播
↓电视,电影,美女直播,迅雷资源↓
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
图片批量下载器
↓批量下载图片,美女图库↓
  网站联系: qq:121756557 email:121756557@qq.com  编程开发知识库