EasyUI表单验证，自定义插件验证，自定义js插件验证，远程验证，常见手机号，中英文，qq等验证规则验证

{

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]']">

EasyUI表单验证，自定义插件验证，自定义js插件验证，远程验证，常见手机号，中英文，qq等验证规则验证

<head>

$(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>

自定义验证：

//扩展easyui表单的验证

$.extend($.fn.validatebox.defaults.rules, {

//验证汉子

chs: {

validator: function (value) {

return /^[\u0391-\uffe5]+$/.test(value);

message: '只能输入汉字'

//移动手机号码验证

mobile: {//value值为文本框中的值

var reg = /^1[3|4|5|8|9]\d{9}$/;

return reg.test(value);

message: '输入手机号码格式不准确.'

//国内邮编验证

zipcode: {

var reg = /^[1-9]\d{5}$/;

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: ''

}

})

$.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地址格式不正确'

});

=================================

$.extend($.fn.validatebox.defaults.rules, {

selectvaluerequired: {

validator: function(value,param){

if (value == "" || value.indexof('请选择') >= 0) {

}else {

return true;

}

message: '该下拉框为必选项'

}

===================================

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

自己代码：

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: '原始密码输入错误！'

}

<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>

<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>请确认输入新密码：</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']" />

</table>

====================================================================================

/**

* 扩展easyui的validator插件rules，支持更多类型验证

minlength : { // 判断最小长度

validator : function(value, param) {

return value.length >= param[0];

message : '最少输入 {0} 个字符'

length : { // 长度

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 : {// 验证手机号码

return /^(13|15|18)\d{9}$/i.test(value);

message : '手机号码格式不正确'

phoneandmobile : {// 电话号码或手机号码

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 : {// 验证身份证

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 : {// 验证整数或小数

return /^\d+(\.\d+)?$/i.test(value);

message : '请输入数字，并确保格式正确'

currency : {// 验证货币

message : '货币格式不正确'

qq : {// 验证qq,从10000开始

return /^[1-9]\d{4,9}$/i.test(value);

message : 'qq号码格式不正确'

integer : {// 验证整数

return /^[+]?[1-9]+\d*$/i.test(value);

message : '请输入整数'

chinese : {// 验证中文

return /^[\u0391-\uffe5]+$/i.test(value);

message : '请输入中文'

chineseandlength : {// 验证中文及长度

if (len >= param[0] && len <= param[1]) {

return /^[\u0391-\uffe5]+$/i.test(value);

english : {// 验证英语

return /^[a-za-z]+$/i.test(value);

message : '请输入英文'

englishandlength : {// 验证英语及长度

return /^[a-za-z]+$/i.test(value);

englishuppercase : {// 验证英语大写

return /^[a-z]+$/.test(value);

message : '请输入大写英文'

unnormal : {// 验证是否包含空格和非法字符

return /.+/i.test(value);

message : '输入值不能为空和包含其他非法字符'

username : {// 验证用户名

return /^[a-za-z][a-za-z0-9_]{5,15}$/i.test(value);

message : '用户名不合法（字母开头，允许6-16字节，允许字母数字下划线）'

faxno : {// 验证传真

message : '传真号码不正确'

zip : {// 验证邮政编码

return /^[1-9]\d{5}$/i.test(value);

message : '邮政编码格式不正确'

ip : {// 验证ip地址

return /d+.d+.d+.d+/i.test(value);

message : 'ip地址格式不正确'

name : {// 验证姓名，可以是中文或英文

return /^[\u0391-\uffe5]+$/i.test(value) | /^\w+[\w\s]+\w+$/i.test(value);

message : '请输入姓名'

engorchinese : {// 可以是中文或英文

engorchineseandlength : {// 可以是中文或英文

return /^[\u0391-\uffe5]+$/i.test(value) | /^\w+[\w\s]+\w+$/i.test(value);

message : '请输入中文或英文'

carno : {

return /^[\u4e00-\u9fa5][\da-za-z]{6}$/.test(value);

message : '车牌号码无效（例：粤b12350）'

carenergin : {

return /^[a-za-z0-9]{16}$/.test(value);

message : '发动机型号无效(例：fg6h012345654584)'

same : {

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) {

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") {

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);

showtip : function(jq) {

var msg = $.data(jq, "validatebox").message

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) {

if (tip) {

tip.remove;

$.data(jq, "validatebox").tip = null;

在使用带 validatebox 的输入框，第一次没输入出现如图验证提示信息

但是点击窗口取消后，再次打开窗口后输入框仍然带有验证信息，查看api也没有找到解决的方法于是分析了一下页面代码，采用下面处理成功，

$(".validatebox-tip").remove();

$(".validatebox-invalid").removeclass("validatebox-invalid");

另外，有一篇文章

easyui验证的删除和恢复地址http://liuna718-163-com.iteye.com/blog/1726145 供参考

引用一下他的代码：

$.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){

var opt = $(this).data().validatebox.options;

$(this).addclass("validatebox-text").validatebox(opt);

}

});

//使用

$('#id').validatebox('remove'); //删除

$('#id').validatebox('reduce'); //恢复

设置datagrid中editor中验证的清除：

$.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){

var $field = $('td[field='+field+']',$panel);

var $input = $("input",$field);

$input.removeclass("validatebox-text validatebox-invalid").unbind('focus').unbind('blur');

return jq;

addrequired: function(jq, field){

$input.addclass("validatebox-text validatebox-invalid").unbind('focus').unbind('blur');

}

使用：

$obj.datagrid('removerequired','startport');

$obj.datagrid('addrequired','startport');

EasyUI表单验证，自定义插件验证，自定义js插件验证，远程验证，常见手机号，中英文，qq等验证规则验证

继续阅读

Java String.format方法的简单使用

/\B(?=(?:\d{3})+$)/g 一条令人费解的正则表达式

neo4j之cypher使用文档

适用于JavaScript的ECMAScript 2020规范向前发展

GitHub连夜封杀！这份阿里 10W 字内部 Java 字面试手册到底有多强？

spark/scala关于【资源文件】加载方法概述外部文件加载方案测试资源文件打包入jar包中小结

mybatis_入门程序Mybatis入门

JS生成uuid的四种方法

AOP编程_Android优雅权限框架(1)概念基础，2021金三银四前言正文大纲正文

Effective Java 8:通用程序设计

OOM三种类型

工厂模式-三种类型

【递归】高效率求2的n次幂

layui多任务上传添加进度条

win10本地scala和spark安装安装scala安装spark

scala (3) Function 和 Method