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. NancyFX 第二章 Rest框架

    正如你看到的,Nancy有两个主要用途. 其中第一项是作为一种通用的基于 REST 框架,可替代 ASP.NET Web API 或其他Rest工具包. 默认情况下,Nancy提供一流的路由和内容协商 ...

  2. 优酷电视剧爬虫代码实现一:下载解析视频网站页面(4)补充: Java正则表达式Matcher.group(int group)相关类解析

    在Java正则表达式的相关类Matcher中,有如下几个方法: - int groupCount() - String group(int group) - int start(int group)  ...

  3. Software - (转)Winform 程序捕获全局异常

    static class Program { /// <summary> /// 应用程序的主入口点. /// </summary> [STAThread] static vo ...

  4. JS实现页面刷新方法

    下面介绍全页面刷新方法:有时候可能会用到 window.location.reload()刷新当前页面. parent.location.reload()刷新父亲对象(用于框架) opener.loc ...

  5. Selenium IDE + Firefox

    又掉进了同一个坑了,最新firefox版本和selenium ide不兼容,工具栏愣是找不到selenium ide的button,换成firefox5.0就好了  selenium用的版本是2.5. ...

  6. 洛谷P2188 小Z的 k 紧凑数

    P2188 小Z的 k 紧凑数 题目描述 小 Z 在草稿纸上列出了很多数,他觉得相邻两位数字差的绝对值不超过 k 的整数特别奇特,称其为 k 紧凑数. 现在小 Z 想知道 [l,r] 内有多少个 k ...

  7. uva11584 Partitioning by Palindromes

    题目大意: 给出一个字符串,把他划分成尽量少的回文串,问最少的回文串个数 /* 先预处理所有回文子串 dp[i]表示字符1~i划分成的最小回文串的个数 */ #include<iostream& ...

  8. CSS揭秘—打字动效(四)

    前言:     所有实例均来自<CSS揭秘>,该书以平时遇到的疑难杂症为引,提供解决方法,只能说秒极了,再一次刷新了我对CSS的认知 该书只提供了关键CSS代码,虽然有在线示例代码链接,但 ...

  9. java编写jmeter压测脚本

    目前项目中接触的比较多的是接口测试,功能测个差不多后会对部分接口进行压测,采用的是java编写脚本,导入jmeter进行压测. 使用到的jmeter的相关包 写一个测试类,继承AbstractJava ...

  10. bash快捷键光标移动到行首行尾等

    ctrl键组合ctrl+a:光标移到行首.ctrl+b:光标左移一个字母ctrl+c:杀死当前进程.ctrl+d:退出当前 Shell.ctrl+e:光标移到行尾.ctrl+h:删除光标前一个字符,同 ...