最近项目中有一个业务是收银员通过输入用户卡号，给用户充值或者消费，但是为了避免误操作(如卡号输错)，于是编写了一个远程验证的jQuery插件，

当收银员输入卡号后，失去焦点，立即ajax请求服务器端，并返回信息，然后可以通过在success回调函数自定义(html自定义)显示内容。

先上几张演示效果图：

html 代码调用方法：
<html>

<head>

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

    <script src="jRemoteValidate.js"></script>

    <style type="text/css">

        .container {width:600px;margin-top:20px;}

    </style>

</head>

<body>

    <div id="cardContainer" class="container">

        <label for="mobile" style="float:left;">test：</label>

        <input type="text" id="mobile" />

    </div>

<body>

</html>

javascript 代码调用方法：
$('#mobile').jRemoteValidate({

    url: 'json1.html',

    field: 'mobile', // send param mobile=$('#mobile').val() to server

    renderTo: '#cardContainer', //container

    loadImgURL: 'loading_small.gif', //loading image path

    success: successHandle

});

// custom you want show's message format

function successHandle(rs) {

    var html = '';

    if(rs.state == 1) {

        html = '<p class="msg">name:<font color=#4682B4>'+rs.data.name+

        '</font>,balance:$<font color=red>'+rs.data.balance+'</font></p>';

    }

    if(rs.state == 2) html = '<p class="msg"><font color=red>card is not exists!</font></p>';

    if(rs.state == 3) html = '<p class="msg"><font color=red>server error! </font></p>';

    return html;

}

代码调用非常简单，源码托管在github上，需要的可以下载。

点击下载

使用jQuery插件jRemoteValidate进行远程ajax验证，可以自定义返回的信息的更多相关文章

  1. easyui 自定义验证规则 验证用户是否已经存在 远程ajax验证

    easyui远程ajax验证 2014年09月30日 22:29:32 clj198606061111 阅读数:6130 标签: easyui 更多 个人分类: jqueryeasyui 版权声明:本 ...

  2. jQuery插件之ajaxFileUpload（ajax文件上传）

    一.ajaxFileUpload是一个异步上传文件的jQuery插件. 传一个不知道什么版本的上来,以后不用到处找了. 语法:$.ajaxFileUpload([options]) options参数 ...

  3. PHP利用jquery生成各种验证码和Ajax验证

    PHP生成验证码图片 PHP生成验证码的原理:使用PHP的GD库,生成一张带验证码的图片,并将验证码保存在Session中.PHP 生成验证码的大致流程有: .产生一张png的图片: .为图片设置背景 ...

  4. jQuery插件AjaxFileUpload可以实现ajax文件上传

    http://blog.sina.com.cn/s/blog_55e42da60100ocvh.html

  5. 使用jQuery异步传递Model到控制器方法,并异步返回错误信息

    需要通过jquery传递到控制器方法的Model为: public class Person { public string Name { get; set; } public int Age { g ...

  6. 推荐60个jQuery插件(转)

    jQuery插件jQuery Spin Button自定义文本框数值自增或自减 jQuery插件JQuery Pager分页器实现javascript分页功能 jQuery插件FontSizer实现J ...

  7. angular2采用自定义指令（Directive）方式加载jquery插件

    由于angular2兴起不久,相关插件还是很少,所以有时候不得不用一些jquery插件来完成项目, 那么如何把jquery插件放到angular2中呢?采用自定义指令! 在上下文之前要引入jquery ...

  8. jquery插件-表单验证插件

    JQuery 插件概述: 插件(plugin)也被成为扩展,是一种遵循一定规范的应用程序编写出来的程序,JQuery有大量 现成的插件. 一句话,JQuery插件就是别人依照Jquery官方规范写好的 ...

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

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

随机推荐

  1. [golang note] 流程控制

    流程控制 • 流程控制语句作用 ▪ 选择:根据条件跳转到不同的执行序列. ▪ 循环:根据条件反复执行某个序列. ▪ 跳转:据条件返回到某执行序列. • 流程控制语句类型 ▪ 条件语句:关键字为if.e ...

  2. 在MFC里面实现线程的实例

    线程是一种从软件到硬件的技术,主要目的是为了提高运行速度,和多任务. ××××××××××××××××××××××××××××××××××××需要储备的资料(他人的)××××××××××××××××× ...

  3. 元类 metaclass

    metaclass 类由Type创建 对象由创建 MetaClass作用 用来指定当前类由谁来创建(默认type创建). MetaClass 会被继承,如果父类指定了元类,那么子类也是由这个元类创建 ...

  4. XE6移动开发环境搭建之IOS篇（2）：安装虚拟机（有图有真相）

    XE6移动开发环境搭建之IOS篇(2):安装虚拟机(有图有真相) 2014-08-15 22:04 网上能找到的关于Delphi XE系列的移动开发环境的相关文章甚少,本文尽量以详细的内容.傻瓜式的表 ...

  5. PKU 3169 Layout(差分约束系统+Bellman Ford)

    题目大意:原题链接 当排队等候喂食时,奶牛喜欢和它们的朋友站得靠近些.FJ有N(2<=N<=1000)头奶牛,编号从1到N,沿一条直线站着等候喂食.奶牛排在队伍中的顺序和它们的编号是相同的 ...

  6. mysql时间戳转换成可读时间格式

    代码: SELECT FROM_UNIXTIME(1234567890, '%Y-%m-%d %H:%i:%S') 附:在mysql中,一个时间字段的存储类型是int(11),怎么转化成字符类型,比方 ...

  7. 滑块控件CCControlSlider

    #include "cocos-ext.h" //包含头文件 using namespace cocos2d::extension;//引用命名空间 /** * 创建CCContr ...

  8. $python用装饰器实现一个计时器

    直接上代码: import time from functools import wraps # 定义装饰器 def fn_timer(function): @wraps(function) def ...

  9. selenium+xpath 文本信息定位

    selenium中根据父子.兄弟.相邻节点定位的方法,很多人在实际应用中会遇到想定位的节点无法直接定位,需要通过附近节点来相对定位的问题,但从父节点定位子节点容易,从子节点定位父节点.定位一个节点的哥 ...

  10. Linux 实时性能测试工具——Cyclictest

    Cyclictest 是 rt-tests 下的一个测试工具,也是rt-tests 下使用最广泛的测试工具,一般主要用来测试使用内核的延迟,从而判断内核的实时性. 1.2 cyclictest 安装 ...