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. jvm学习五: 方法执行过程

    方法执行过程:Java各个大版本更新提供的新特性(需要简单了解)

  2. DataWindow.Net V2.5原始文件下载

    DW2.5 原始安装程序下载 http://download.sybase.com/eval/datawindowNET_25_eval/CD50090-55-0250-01.zip

  3. 反射-Class

    package classes; public class ClassDemo1 { public static void main(String[] args){ Foo foo1 = new Fo ...

  4. RequestsLibrary库入门介绍

    Robot framework也可以进行接口测试,只需要导入相应的RequestsLibrary库即可. 一.准备工作: 首先需要安装好Robot framework基础环境,前面已做说明,本文就不做 ...

  5. TripAdvisor architecture 2011/06

    http://highscalability.com/blog/2011/6/27/tripadvisor-architecture-40m-visitors-200m-dynamic-page-vi ...

  6. Java正则表达式之Matcher介绍

    Matcher方法如下: Matcher方法如下: Matcher appendReplacement(StringBuffer sb, String replacement) 将当前匹配子串替换为指 ...

  7. 利用JS函数制作时钟运行程序

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  8. Microsoft EBooks

    Go pick up what you are interested J http://blogs.msdn.com/b/mssmallbiz/archive/2014/07/07/largest-c ...

  9. 2018年第九届蓝桥杯国赛试题(JavaA组)

    1.结果填空 (满分13分)2.结果填空 (满分39分)3.代码填空 (满分27分)4.程序设计(满分45分)5.程序设计(满分71分)6.程序设计(满分105分) 1.标题:三角形面积 已知三角形三 ...

  10. JS Guid生成

    function numToGuid(uid) { var str = "aaaaaaaa-aaaa-aaaa-aaaa-aaaaaaaaaaaa"; var l = uid.to ...