zoukankan      html  css  js  c++  java
  • 使用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上,需要的可以下载。

    点击下载

  • 相关阅读:
    css 之 input 的提交样式
    JSON 没错又是它!!!
    json 对象解析 function 里面的return 和return false 查找字符串最后的结尾字符
    sql 中update 对字符串进行批量替换
    17 常用模块
    16 模块深入
    15 模块
    14 生成器,生成器表达式,内置函数,面向过程编程
    13 迭代器
    12 递归 三元表达式 列表生成式 字典生成式 匿名函数
  • 原文地址:https://www.cnblogs.com/wangwei123/p/3648481.html
Copyright © 2011-2022 走看看