1.重写easyui中的

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

2.长度重写的方式

 1             $.extend($.fn.validatebox.defaults.rules, {
minLength: {
validator: function(value, param){ //value 为需要校验的输入框的值 , param为使用此规则时存入的参数
return value.length >= param[0];
},
message: '请输入最小{0}位字符.'
}
}); $.extend($.fn.validatebox.defaults.rules, {
maxLength: {
validator: function(value, param){
return param[0] >= value.length;
},
message: '请输入最大{0}位字符.'
}
}); $.extend($.fn.validatebox.defaults.rules, {
length: {
validator: function(value, param){
return value.length >= param[0] && param[1] >= value.length;
},
message: '请输入{0}-{1}位字符.'
}
});

引用方式

<input class="easyui-validatebox" validType="minLength[5]">
<input class="easyui-validatebox" validType="maxLength[5]">
<input data-options="required:true,validType:'length[0,10]'" class="easyui-textbox"/>

3.特殊验证

             $.extend($.fn.validatebox.defaults.rules, {
equals: {
validator: function(value,param){
return value == $(param[0]).val();
},
message: '字段不相同.'
}
}); $.extend($.fn.validatebox.defaults.rules, {
web : {
validator: function(value){
return /^(http[s]{0,1}|ftp):\/\//i.test($.trim(value));
},
message: '网址格式错误.'
}
}); $.extend($.fn.validatebox.defaults.rules, {
mobile : {
validator: function(value){
return /^1[0-9]{10}$/i.test($.trim(value));
},
message: '手机号码格式错误.'
}
}); $.extend($.fn.validatebox.defaults.rules, {
date : {
validator: function(value){
return /^[0-9]{4}[-][0-9]{2}[-][0-9]{2}$/i.test($.trim(value));
},
message: '曰期格式错误,如2012-09-11.'
}
}); $.extend($.fn.validatebox.defaults.rules, {
email : {
validator: function(value){
return /^[a-zA-Z0-9_+.-]+\@([a-zA-Z0-9-]+\.)+[a-zA-Z0-9]{2,4}$/i.test($.trim(value));
},
message: '电子邮箱格式错误.'
}
});
 $.extend($.fn.validatebox.defaults.rules, {
ip: {// ip地址验证
validator: function (value) {
return /^(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])$/i.test(value);
},
message: 'ip格式不正确'
}
}

4.ajax介入验证

          $.extend($.fn.validatebox.defaults.rules, {
captcha : {
validator: function(value){
var data0 = false;
$.ajax({
type: "POST",async:false,
url:contextPath + "/json/valSimulation.action",
dataType:"json",
data:{"simulation":value},
async:false,
success: function(data){
data0=data;
}
}); return data0;
// return /^[a-zA-Z0-9]{4}$/i.test($.trim(value));
},
message: '验证码错误.'
}
}); $.extend($.fn.validatebox.defaults.rules, {
txtName : {
validator: function(value,param){
var data0 = false;
if(value.length >= param[0] && param[1] >= value.length)
{
$.ajax({
type: "POST",async:false,
url:contextPath + "/json/valName.action",
dataType:"json",
data:{"txtName":value},
async:false,
success: function(data){
data0=!data;
}
});
}else{
param[2] = "请输入"+param[0]+"-"+param[1]+"位字符.";
return false;
} param[2] = "用户名称已存在.";
return data0;
},
message: "{2}"
}
}); });

引用方式

<input class="easyui-validatebox" data-options="required:'true',validType:'引用项'">

5.例子

 //扩展easyui表单的验证
$.extend($.fn.validatebox.defaults.rules, {
//验证汉字
CHS: {
validator: function (value) {
return /^[\u0391-\uFFE5]+$/.test(value);
},
message: 'The input Chinese characters only.'
},
//移动手机号码验证
Mobile: {//value值为文本框中的值
validator: function (value) {
var reg = /^1[3|4|5|8|9]\d{9}$/;
return reg.test(value);
},
message: 'Please enter your mobile phone number correct.'
},
//国内邮编验证
ZipCode: {
validator: function (value) {
var reg = /^[0-9]\d{5}$/;
return reg.test(value);
},
message: 'The zip code must be 6 digits and 0 began.'
},
//数字
Number: {
validator: function (value) {
var reg =/^[0-9]*$/;
return reg.test(value);
},
message: 'Please input number.'
},
})

HTML

 <!DOCTYPE html>
<html>
<head>
<meta charset="gb2312">
<title>Basic ValidateBox - jQuery EasyUI Demo</title>
<link rel="stylesheet" type="text/css" href="../../themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="../../themes/icon.css">
<link rel="stylesheet" type="text/css" href="../demo.css">
<script type="text/javascript" src="../../jquery.min.js"></script>
<script type="text/javascript" src="../../jquery.easyui.min.js"></script> <script src="validatebox.js" type="text/javascript"></script> <!--引入将创建的js文件--> </head>
<body> <h2>常用验证格式</h2>
<div style="margin:20px 0;"></div>
<div class="easyui-panel" title="Register" style="width:400px;padding:10px 60px 20px 60px">
<table cellpadding="10">
<tr>
<td>User Name:</td>
<td><input class="easyui-validatebox textbox" data-options="required:true,validType:'length[3,10]'"></td>
</tr>
<tr>
<td>Email:</td>
<td><input class="easyui-validatebox textbox" data-options="required:true,validType:'email'"></td>
</tr>
<tr>
<td>Birthday:</td>
<td><input class="easyui-datebox textbox"></td>
</tr>
<tr>
<td>URL:</td>
<td><input class="easyui-validatebox textbox" data-options="required:true,validType:'url'"></td>
</tr>
<tr>
<td>Mobile:</td>
<td><input class="easyui-validatebox textbox" data-options="required:true,validType:'Mobile'"></td>
</tr>
<tr>
<td>Length:</td>
<td><input class="easyui-validatebox" data-options="required:true,validType:'length[0,2]'"></td>
</tr>
<tr>
<td>Chinese:</td>
<td><input name="txtName" class="easyui-validatebox" data-options="required:'true',validType:'CHS'"></td> </tr> <tr>
<td>ZipCode:</td>
<td><input name="txtName" class="easyui-validatebox" data-options="required:'true',validType:'ZipCode'"></td> </tr>
<tr>
<td>Number:</td>
<td><input name="txtName" class="easyui-validatebox" data-options="required:'true',validType:'Number'"></td> </tr> </table>
</div>
<style scoped="scoped">
.textbox{
height:20px;
margin:0;
padding:0 2px;
box-sizing:content-box;
}
</style>

easyUI表单验证的更多相关文章

  1. easyui 表单验证validatetype——支持自定义验证

    easyui 的validatebox()提供了自定义验证的方法,为此我把一些常用的数据验证汇总了一下,代码如下: 代码 Code highlighting produced by Actipro C ...

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

     { field : 'startPort', title : "起始端口", editor: "text", width : 50, editor: { ...

  3. 修改 jquery easyui 表单验证默认的样式

    目前对于不符合要求的输入域会在右侧显示一个带箭头的提示,可是如果我的输入框比较靠右的话就显示不全了(虽然会出滚动条,但是由于鼠标移开就消失了,所以还是看不到提示内容)! 能不能把这个提示的位置改变一下 ...

  4. Jquery插件easyUi表单验证提交

    <form id="myForm" method="post"> <table align="center" style= ...

  5. Easyui表单验证扩展

    简介: 使用Easyui,我们省了好多事情,不用为UI费心,只需要关注业务层面即可,下面是一些常用的验证方面的扩展,收藏下自己用 //重载$.fn.validatebox.defaults.rules ...

  6. EasyUI表单验证插件扩展

    $.extend($.fn.validatebox.defaults.rules, { regex: { validator: function (value, param) { var regex ...

  7. atittit.表单验证的实现方式以及原理本质以及选型以及自定义兼容easyui dsl规则的表单验证

    atittit.表单验证的实现方式以及原理本质以及选型以及自定义兼容easyui dsl规则的表单验证 1. 需求,表单验证需要弹框式,但目前easyui ms绑定死了tooltip式样 1 2. 表 ...

  8. atittit.表单验证性质的原则和实施,以及选择和定义自己的兼容easyui dsl窗体身份验证规则

    atittit.表单验证性质的原则和实施,以及选择和定义自己的兼容easyui dsl规则的表单验证 1. 需求,表单验证须要弹框式,但眼下easyui ms绑定死了tooltip式样 1 2. 表单 ...

  9. vue elementui form表单验证

    最近我们公司将前端框架由easyui 改为 vue+elementui .自学vue两周 就开始了爬坑之路.业余时间给大家分享一下心得,技术新手加上第一次分享(小激动),有什么不足的地方欢迎大家指正, ...

随机推荐

  1. 题解 洛谷 P3376 【【模板】网络最大流】

    本人很弱,只会Dinic.EK与Ford-Fulkerson...(正在学习ISAP...) 这里讲Dinic... Dinic:与Ford-Fulkerson和的思路相似(话说好像最大流求解都差不多 ...

  2. C#之改变窗体icon图标、新建类文件、调用dll库

    一.改变窗体的图标 没有修改之前为: 修改之后为自己想要的图标: 需要在窗体Form1.cs属性里边添加icon图片文件: 二.新建cs类文件 如下图所示,新建一个类文件,我用于来调用库文件也可以来定 ...

  3. C#-反射知识点(转载)

    反射的用途:    (1)使用Assembly定义和加载程序集,加载在程序集清单中列出模块,以及从此程序集中查找类型并创建该类型的实例.     (2)使用Module了解包含模块的程序集以及模块中的 ...

  4. ASP.NET-缓存基本知识点

    asp.net cache是一种缓存技术,然而,我们在asp.net程序中还可以使用其他的缓存技术,这些不同的缓存也各有所长.由于asp.net cache不能提供对外访问能力,因此,它不可能取代以m ...

  5. systemverilog中堵塞和非堵塞事件以及同步

    一.SV中非堵塞事件 module test; event ev1, ev2; //belong to logic function part always@(ev1) $display(" ...

  6. server问题排查经常使用命令

    1.top 查看系统负载情况,load average CPU使用情况,按1查看每一个CPU的使用情况 shift+h  查看每一个线程的情况 2.free -m   按兆为单位输出内存的已用,未用. ...

  7. m_Orchestrate learning system---二十三、如何搜索概念图插件

    m_Orchestrate learning system---二十三.如何搜索概念图插件 一.总结 一句话总结:要在百度你们搜索前端组件,前端组件  概念图工具,js概念图工具等等这些 用的话用go ...

  8. vijos--P1211--生日日数(纯模拟)

    P1211生日日数 未递交 标签:[显示标签] 描述 CCC老师的生日是YY年MM月DD日,他想知道自己出生后第一万天纪念日的日期(出生日算第0天). 格式 输入格式 从文件的第一行分别读入YY,MM ...

  9. 32.智能指针auto_ptr

    #include <iostream> #include <memory> #include <string> #include <vector> us ...

  10. Scala基础简述

    * Scala基础简述 本文章作为Scala快速学习的教程,前提环境是:我假设在此之前,你已经学会了Java编程语言,并且我们以随学随用为目标(在此不会深度挖掘探讨Scala更高级层次的知识).其中语 ...