日期:2014-05-16  浏览次数:20689 次

使用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上,需要的可以下载。

? ?点击下载

?