您的位置：首页 > Web前端 > JQuery

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

2014-04-06 14:15 597 查看
最近项目中有一个业务是收银员通过输入用户卡号，给用户充值或者消费，但是为了避免误操作(如卡号输错)，于是编写了一个远程验证的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上，需要的可以下载。

点击下载
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航