使用jQuery插件jRemoteValidate进行远程ajax验证,可以自定义返回的信息
最近项目中有一个业务是收银员通过输入用户卡号,给用户充值或者消费,但是为了避免误操作(如卡号输错),于是编写了一个远程验证的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验证,可以自定义返回的信息的更多相关文章
- easyui 自定义验证规则 验证用户是否已经存在 远程ajax验证
easyui远程ajax验证 2014年09月30日 22:29:32 clj198606061111 阅读数:6130 标签: easyui 更多 个人分类: jqueryeasyui 版权声明:本 ...
- jQuery插件之ajaxFileUpload(ajax文件上传)
一.ajaxFileUpload是一个异步上传文件的jQuery插件. 传一个不知道什么版本的上来,以后不用到处找了. 语法:$.ajaxFileUpload([options]) options参数 ...
- PHP利用jquery生成各种验证码和Ajax验证
PHP生成验证码图片 PHP生成验证码的原理:使用PHP的GD库,生成一张带验证码的图片,并将验证码保存在Session中.PHP 生成验证码的大致流程有: .产生一张png的图片: .为图片设置背景 ...
- jQuery插件AjaxFileUpload可以实现ajax文件上传
http://blog.sina.com.cn/s/blog_55e42da60100ocvh.html
- 使用jQuery异步传递Model到控制器方法,并异步返回错误信息
需要通过jquery传递到控制器方法的Model为: public class Person { public string Name { get; set; } public int Age { g ...
- 推荐60个jQuery插件(转)
jQuery插件jQuery Spin Button自定义文本框数值自增或自减 jQuery插件JQuery Pager分页器实现javascript分页功能 jQuery插件FontSizer实现J ...
- angular2采用自定义指令(Directive)方式加载jquery插件
由于angular2兴起不久,相关插件还是很少,所以有时候不得不用一些jquery插件来完成项目, 那么如何把jquery插件放到angular2中呢?采用自定义指令! 在上下文之前要引入jquery ...
- jquery插件-表单验证插件
JQuery 插件概述: 插件(plugin)也被成为扩展,是一种遵循一定规范的应用程序编写出来的程序,JQuery有大量 现成的插件. 一句话,JQuery插件就是别人依照Jquery官方规范写好的 ...
- EasyUI表单验证,自定义插件验证,自定义js插件验证,远程验证,常见手机号,中英文,qq等验证规则验证
{ field : 'startPort', title : "起始端口", editor: "text", width : 50, editor: { ...
随机推荐
- JS:parseInt("08")或parseInt("09")转换返回0的原因
一.parseInt用法 parseInt(s); parseInt(s,radix) 二.第一个方式不再多说,第二个方式,radix是s所基于的进制.范围为2-36(不在此范围函数将返回NaN). ...
- 【转】Winform Socket通信
Socket相关概念[端口] 在Internet上有很多这样的主机,这些主机一般运行了多个服务软件,同时提供几种服务.每种服务都打开一个Socket,并绑定到一个端口上,不同的端口对应于不同的服务(应 ...
- Java 为什么要使用反射(通俗易懂的举例)
Java反射最大的好处就是能在运行期间,获得某个类的结构.成员变量,用来实例化. 下列是具体使用场景:假如我们有两个程序员,一个程序员在写程序的时候,需要使用第二个程序员所写的类,但第二个程序员并没完 ...
- Java 创建数组的方式, 以及各种类型数组元素的默认值
①创建数组的方式3种 ①第1种方法 public class MyTest { public static void main(String[] args){ //method 1 int[] arr ...
- mysql中sql语句中常见的group_concat()函数意思以及用法,oracle中与其一样的功能函数是wmsys.wm_concat()
1.group_concat(),手册上说明:该函数返回带有来自一个组的连接的非NULL值的字符串结果.比较抽象,难以理解. 通俗点理解,其实是这样的:group_concat()会计算哪些行属于同一 ...
- LINUX SHELL 笔记 01: 脚本
root@iZwz:~/labs# vim myfirst root@iZwz:~/labs# cat myfirst #!/bin/bash clear echo "this is my ...
- Python3.x:获取代理ip以及使用
Python3.x:获取代理ip以及使用 python爬虫浏览器伪装 #导入urllib.request模块 import urllib.request #设置请求头 headers=("U ...
- presto + slider 提交计算至yarn
10.112.28.240 prestocli 10.183.225.158 perstoser hive-site.xml useUnicode=true&characterEncoding ...
- 源码编译nginx
[root@localhost local]# yum -y install pcre pcre-devel#解压nginx源码包[root@localhost local]# tar -zxvf / ...
- Linux禁止普通用户使用crontab命令
cron计划任务默认root用户与非root用户都可以执行,当然如果在安全方面想禁用这部分用户,则可以通过两个文件来解决: cron.allow cron.deny cron.allow:定义允许使用 ...