Easyui validatebox的验证提示十分好用,可是在实际项目的运用中,经常会遇到需要服务器验证后并返回验证结果信息,比如验证用户名、手机号、邮箱是否已存在。于是就想着怎么拓展Easyui的验证策略,使其支持服务端验证。具体实现代码如下:

文件名称:jquery.easyui.extend.validate.js

/**
* 功能:拓展easyui 自定义验证框规则
* 用法: 与easyui自带的验证框使用方法一致
*/
$.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 /^(11|12|13|14|15|16|17|18|19)\d{9}$/i.test(value);
},
message:'手机号码格式不正确,请使用如下格式:13118957545'
},
idcard:{// 验证身份证
validator:function(value) {
return /^\d{15}(\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:'请输入大于0的整数'
},
number:{// 验证数字
validator:function(value) {
return /^[+]?[0-9]+\d*$/i.test(value);
},
message:'请输入正整数'
},
chinese:{// 验证中文
validator:function(value) {
return /^[\u0391-\uFFE5]+$/i.test(value);
},
message:'请输入中文'
},
english:{// 验证英语
validator:function(value) {
return /^[A-Za-z]+$/i.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 /^[+]{0,1}(\d){1,3}[ ]?([-]?((\d)|[ ]){1,12})+$/i.test(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:'请输入姓名'
},
carNo:{ //验证车牌号码
validator:function(value){
return /^[\u4E00-\u9FA5][\da-zA-Z]{6}$/.test(value);
},
message:'车牌号码无效(例:粤J12350)'
},
carenergin:{
validator:function(value){
return /^[a-zA-Z0-9]{16}$/.test(value);
},
message:'发动机型号无效(例:FG6H012345654584)'
},
email:{ //验证邮箱
validator:function(value){
return /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/.test(value);
},
message:'请输入有效的电子邮件账号(例:abc@126.com)'
},
msn:{ //验证msn
validator:function(value){
return /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/.test(value);
},
message:'请输入有效的msn账号(例:abc@hotnail(msn/live).com)'
},
same:{ //确认两次密码是否一致
validator:function(value,param){
if($("#"+param[0]).val() !=""&&value!=""){
return $("#"+param[0]).val() ==value;
}else{
return true;
}
},
message:'两次输入的密码不一致!'
},
// 验证编码是否重复【后端服务器验证返回】
productBasisVerify: {
validator: function(value, param) {
if (value != "") {
var result = false;
$.ajax({
type: 'POST',
url: ProductBase.urls['verifyData'],
data: {verify: param, value: value},
dataType: 'json',
async: false, // 关闭异步
success: function(rec) {
if (rec.success){
result = true;
} else {
result = false;
}
}
});
return result;
}
},
message: '该编码已被使用,请换个试试!'
},
license:{//验证营业执照
validator:function(value){
return/^\d{15}$/.test(value);
},
message:'营业执照格式输入错误'
},
texture:{//验证组织机构代码
validator:function(value){
return/^[a-zA-Z0-9]\S(([0-9]){7}\S)?[a-zA-Z0-9]+$/.test(value);
},
message:'组织机构代码格式输入错误'
},
taxation_number:{//验证税务登记证
validator:function(value){
return/(^\d\S{14}|^\d\S{17})$/.test(value);
},
message:'税务登记证格式输入错误'
},
bank_account:{//验证银行卡号
validator:function(value){
return/^[0-9]*$/.test(value);
},
message:'银行卡号格式输入错误'
},
});

Easyui本身的验证机制是设置一个计时器,然后按照计时器触发验证规则进行验证,但是对应长的文本输入框,就会导致还未完全输入就已经验证了好几次了。有人说把Easyui的计时器修改短一点不就行了嘛,但是对于编码、手机号码这些短的字段要进行校验呢?校验效果又不理想了,所以最终的解决办法如下:

<script type="text/javascript">
$(function(){
     // 元素失去焦点进行验证
$('#base_part_edit_form .easyui-validatebox-blur').bind('blur', function(){
$(this).validatebox('enableValidation');
});
     // 元素获得焦点关闭验证
$('#base_part_edit_form .easyui-validatebox-blur').bind('focus', function(){
$(this).validatebox('disableValidation');
});
})
</script>

Easyui validatebox后台服务端验证的更多相关文章

  1. ASP.NET的服务端验证(干货)

    最近有项目需要使用.net的web,啥也不说,直接开始学习.net的mvc框架.感觉微软的web项目其实还是很好用的,今天和大家分享一下服务端验证的事情.其实原理就是用到了c#的特性,特性不用多说,大 ...

  2. .net使用FluentValidation进行服务端验证。

          背景 最近使用asp.mvc 做一个在线口语系统项目,在服务端验证问题遇到了一些小问题. 自己根据数据库表user定义一个数据库表实体对象UserDbEntity [Table(" ...

  3. ASP.NET MVC如何实现自定义验证(服务端验证+客户端验证)

    ASP.NET MVC通过Model验证帮助我们很容易的实现对数据的验证,在默认的情况下,基于ValidationAttribute的声明是验证被使用,我们只需 要将相应的ValidationAttr ...

  4. JSR-303 Bean Validation 介绍及 Spring MVC 服务端验证最佳实践

    任何时候,当要处理一个应用程序的业务逻辑,数据校验是你必须要考虑和面对的事情. 应用程序必须通过某种手段来确保输入参数在上下文来说是正确的. 分层的应用在很多时候,同样的数据验证逻辑会出现在不同的层, ...

  5. C#在服务端验证客户端证书(Certificate)

    使用https协议进行通讯的时候可以设置双向证书认证,客户端验证服务端证书的方法前面已经介绍过了,现在说一下在服务端验证客户端证书的方案. 这里给出的方案比较简单,只需要在Service端的配置文件中 ...

  6. Asp.net MVC 服务端验证多语言错误

    服务端验证用户提交信息时为了实现多语言使用了资源文件,如: using System.ComponentModel.DataAnnotations; public class UserModel { ...

  7. MIME类型-服务端验证上传文件的类型

    MIME的作用 : 使客户端软件,区分不同种类的数据,例如web浏览器就是通过MIME类型来判断文件是GIF图片,还是可打印的PostScript文件. web服务器使用MIME来说明发送数据的种类, ...

  8. Angular4 后台管理系统搭建(9) - 用自定义angular指令,实现在服务端验证

    最近这段时间发现,北京这用angular4 或 angular2的公司很少.几乎是没有.很担心自己是不是把精力放到了不应该的地方.白耽误了时间.但是随着我对新版angular框架理解的加深.个人感觉a ...

  9. 微信小程序支付源码,后台服务端代码

    作者:尹华南,来自原文地址 微信小程序支付绕坑指南 步骤 A:小程序向服务端发送商品详情.金额.openid B:服务端向微信统一下单 C:服务器收到返回信息二次签名发回给小程序 D:小程序发起支付 ...

随机推荐

  1. Camera Vision - video surveillance on C#

    转自:http://blog.csdn.net/xyz_lmn/article/details/6072897 http://www.codeproject.com/KB/audio-video/ca ...

  2. 自动清除firefox缓存

    1.在firefox的地址栏上输入about:config回车 2.找到browser.cache.check_doc_frequency选项,双击将3改成1保存即可.  选项每个值都是什么含义的.请 ...

  3. C# 测试代码#if DEBUG使用

    代码示例: #if DEBUG      Console.WriteLine("DEBUG:11111111111"); #else       Console.WriteLine ...

  4. Oracle SQL调优之分区表

    目录 一.分区表简介 二.分区表优势 三.分区表分类 3.1 范围分区 3.2 列表分区 3.3 散列分区 3.4 组合分区 四.分区相关操作 五.分区相关查询 附录:分区表索引失效的操作 一.分区表 ...

  5. MYSQL limit,offset 区别(转)

    SELECT keyword FROM keyword_rank WHERE advertiserid='59' order by keyword LIMIT 2 OFFSET 1; 比如这个SQL ...

  6. 【JOI Camp 2015】IOIO卡片占卜——最短路

    题目 [题目描述]K 理事长是占卜好手,他精通各种形式的占卜.今天,他要用正面写着 `I` ,背面写着 `O` 的卡片占卜一下日本 IOI 国家队的选手选择情况.占卜的方法如下:1. 首先,选取五个正 ...

  7. Jenkins+Maven+Jmeter接口自动化持续集成测试

    在上一篇<利用xsltproc转换jtl报告到html报告>中,解决了html报告的问题.本篇主要还是利用Jenkins来做持续集成测试. Jenkins需要安装的插件 Maven Int ...

  8. CC20:高度最小的BST

    题目 对于一个元素各不相同且按升序排列的有序序列,请编写一个算法,创建一棵高度最小的二叉查找树. 给定一个有序序列int[] vals,请返回创建的二叉查找树的高度. 解法 这道题感觉如果没有创建树的 ...

  9. NETCOREAPI 跨域处理

    ASPNETCOREAPI 跨域处理 AspNetCoreApi 跨域处理 如果咱们有处理过MV5 跨域问题这个问题也不大. (1)为什么会出现跨域问题: 浏览器安全限制了前端脚本跨站点的访问资源,所 ...

  10. Linux上安装Docker,并成功部署NET Core 2.0

    概述 容器,顾名思义是用来存放并容纳东西的器皿: 而容器技术伴着Docker的兴起也渐渐的映入大家的眼帘,它是一个抽象的概念,同时也是默默存在世上多年的技术,不仅能使应用程序间完全的隔离,而且还能在共 ...