最近项目中有一个业务是收银员通过输入用户卡号，给用户充值或者消费，但是为了避免误操作(如卡号输错)，于是编写了一个远程验证的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. python .bat

    传值给.bat os.system('%s %s %s %s %s' % ('image_dispose.bat', change_photo,dic['width'], '-resize', cha ...

  2. Android 按钮 弹出对话框

    ackage com.example.helloworld; import android.os.Bundle;import android.app.Activity;import android.a ...

  3. PHP闭包（Closure）初探（转载 http://my.oschina.net/melonol/blog/126694?p=2#comments）

    匿名函数 提到闭包就不得不想起匿名函数,也叫闭包函数(closures),貌似PHP闭包实现主要就是靠它.声明一个匿名函数是这样: ? 1 2 3 $func = function() {       ...

  4. Eclipse下创建Maven项目（转）

    原文出自:http://www.cnblogs.com/hongwz/p/5456616.html 1.新建Maven项目 1.1 File -> New -> Other 1.2 选择M ...

  5. 130. Surrounded Regions(周围区域问题 广度优先)(代码未完成！！)

    Given a 2D board containing 'X' and 'O' (the letter O), capture all regions surrounded by 'X'. A reg ...

  6. [Face++]Face初探——人脸检测

    经过了强烈的思想斗争才把自己拖到图书馆做毕设T^T anyway, 因为毕设里面有人脸识别的部分,所以就想找个现成的api先玩玩,于是就找到最近很火的face++:http://www.faceplu ...

  7. 【c++ primer, 5e】参数传递

    p187~p199: [传值参数] [传引用参数] 使用引用形参返回额外信息:传入一个(或者多个)额外的引用实参,令其保存字符出现的次数. 6.11 #include <iostream> ...

  8. Django学习笔记之Models与ORM操作

    一.ORM增加 from django.db import models class Publisher(models.Model): name = models.CharField(max_leng ...

  9. CSS3 简介

    CSS3 简介 对CSS3已完全向后兼容,所以你就不必改变现有的设计.浏览器将永远支持CSS2. CSS3被拆分为"模块".旧规范已拆分成小块,还增加了新的. 一些最重要CSS3模 ...

  10. 20145322第九周JAVA程序设计基础学习总结

    20145322第九周JAVA程序设计基础学习总结 JDBC简介 JDBC全名Java DataBase Connectivity,是java联机数据库的标准规范.它定义一组标准类与接口,应用程序需要 ...