使用jQuery插件jRemoteValidate進行遠程ajax驗證，能夠自定義返回的信息

時間 2019-11-25

標籤使用 jquery 插件 jremotevalidate 進行遠程 ajax 驗證能夠自定義返回信息欄目 JQuery 简体版

原文原文鏈接

最近項目中有一個業務是收銀員經過輸入用戶卡號，給用戶充值或者消費，可是爲了不誤操做(如卡號輸錯)，因而編寫了一個遠程驗證的jQuery插件，javascript

當收銀員輸入卡號後，失去焦點，當即ajax請求服務器端，並返回信息，而後能夠經過在success回調函數自定義(html自定義)顯示內容。css

先上幾張演示效果圖：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;
}