javascript/jquery 常见功能实现(持续更新...)

1. input 只能输入整数数字和字母

$(document).on('keyup','#no',function(){
    var val = $.trim($(this).val());
    if(val == null || val == '')
        return;
    
    $(this).val(val.replace(/[^0-9a-z]+/ig,''));    // 只能输入整数数字和字母
});

用 baidu 出来的很多其它实现方式的都是有问题的。它们不能够精确的表示“只能输入数字和字母”，因为它们预先输入标点符号，比如允许输入小数点 . 等符号。比如下面一个百度出来的答案：

value=value.replace(/[^w./]/ig,'')
value=value.replace(/[^d|chun]/g,'')
value=value.replace(/[^w./]/ig,'')

上面答案都是有问题的。

$(this).on("keyup", function (event) {
var inputVal = $(this).val();//值
if (isNaN(inputVal)) {
alert("只能输入数字");
$(this).val("");
return;
}

实现只能输入数字，可以是小数。

2. email格式验证

function validate_email(myThis){
    var val = $.trim($(myThis).val());
    if(val == null || val == ""){
        $("#email_error").text("email不能为空");
        $(myThis).focus();
        return;
    }
        
    if(val != null && val != ""){
        if(!/^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(.[a-zA-Z0-9]+)+$/g.test(val)){
            $("#email_error").text("email格式错误");
            $(myThis).focus();
            return;
        }
    }
    $("#email_error").text("");
}

email的正则表达式，还可以更加简单些，可以使用大小写忽略的写法：

if(!/^[a-z0-9_-]+@[a-z0-9_-]+(.[a-z0-9]+)+$/gi.test(val))

i : 表示 insensitive(大小写不敏感), g：表示global.

3. 从字符串中提取整数数字和英文字母

$(function(){
    var a = 'testAbc，。、,./电饭锅123def'; 
    b = a.replace(/[^0-9]+/ig,"");
    alert(b);
    b = a.replace(/[^a-z]+/ig,"");
    alert(b);
});

2,3的正则表达式正好说明了 ^ 的两种用法：1）表示以什么开始；2）表示否定；

4. jquery cookie插件使用

    var isFs = $(this).attr("datas");
    $.cookie("isFs",isFs,{ expires: 7 });

5. 防御性编程：

        $.post("/ems/validateNo",indata, function(data){
            if(data != null && data.result == 'error'){
                $("#no_error").text(data.msg);
                return false;
            }
        },'json');

在使用 data.result 之前，始终判断 data != null

等同于下面的更加简洁和专业的写法：

        $.post("/ems/validateNo",indata, function(data){
            if(data && data.result == 'error'){
                $("#no_error").text(data.msg);
                return false;
            }
        },'json');

也就是将 if(data != null && data.result == 'error') 换成：if(data && data.result == 'error')

6. 单选 radio 的操作：

   学期：<input type="radio" name="which_term" value="1" />上学期
        <input type="radio" name="which_term" value="2" />下学期

1) 获取选中的值：var term = $.trim($("input[name='which_term']:checked").val());

2) 选中特定的选项：$("input[name='which_term']:eq(0)").attr("checked",'checked');

7. 获取 多选 checkbox 的多个值：

　　　　　　　　　　<c:forEach var="priv" items="${list }">
                    <tr class="odd gradeX">
                      <td><input type="checkbox" name="priv_id" value="${priv.id}" /></td>
                      <td><c:out value="${priv.name}"/></td>
                      <td><c:out value="${priv.permission}"/></td>
                    </tr>
                  </c:forEach>

使用jquery获取 <input type="checkbox" name="priv_id" value="${priv.id}" /> 被选中的所有的 priv_id 组成的数组：

            //jquery获取复选框值    
            var priv_ids =[];//定义一个数组    
            $('input[name="priv_id"]:checked').each(function(){    // 遍历每一个name为priv_id的复选框，其中选中的执行函数    
                priv_ids.push($.trim($(this).val()));    // 将选中的值添加到数组priv_ids中    
            });
            console.log(priv_ids);

(注意：定义数组的方式：var arr = []; 定义对象的方式： var obj = {}; )

8. 下拉框 select 值的获取

     学年：<select id="learn_time" name="learn_time">
              <option value="2014">2014</option>
              <option value="2015" selected = "selected">2015</option>
              <option value="2016">2016</option>
              <option value="2017">2017</option>
          </select>

获取select中被选中的项对应的value:

var time = $.trim($("#learn_time").val());

注意 select下拉框选中是用： selected = "selected", 而单选 input type="radio", 多选 input type="checkbox", 选中都是使用 checked="checked"

注意：区分一下 input type="radio", input type="checkbox", 以及 select 下拉框.

select分页时选择：

    //var currentPage = $("#pageNum").val();
    //$("#selectPages").find("option").eq(currentPage-1).attr('selected', 'selected');

9. table 表格获取行数，所在行，所在列

//获取表的总行数 tr

$("table[id='st_table']>tbody").children("tr").length;

或者：

$("#st_table > tr").length;

//获取所在行的行号

$(this).parent().prevAll().length + 1;  //行号

//获取所在列的列号

$(this).prevAll().length + 1;  //列号

 

10. 取页面上table中的数据：

    var data = [];
    var tr_list = $("table[id='sc_table']>tbody").children("tr");

    for(var i=0; i<tr_list.size(); i++){
        var tr = tr_list.eq(i);
        var name = $.trim(tr.children("td").eq(0).text());
        var count = parseInt($.trim(tr.children("td").eq(1).text()));
        data[i] = { label: name, data: count };
    }

上面的代码，取页面上 id='sc_table' 的表格的每一个行的第一列和第二列的数据，组成一个对象，所有对象组成一个数组。

11. 日期选择器 My97DatePicker

<script language="javascript" type="text/javascript" src="${ctx}/js/My97DatePicker/WdatePicker.js"></script>

<input class="Wdate" type="text" onClick="WdatePicker({dateFmt:'yyyy-MM-dd HH:mm:ss'})" name="begintime" id="begintime" />
<input class="Wdate" type="text" onClick="WdatePicker()" name="deadtime" id="deadtime" />

默认的 WdatePicker()等价于：WdatePicker({dateFmt:'yyyy-MM-dd') 没有 时分秒，只有年月日。

12. jqGrid jquery插件，ajax分页，显示表格数据

http://blog.mn886.net/jqGrid/

13. jquery 客户端防止用户快速点击提交

// 所有ajax请求的通用前置filter
var pendingRequests = {};    
$.ajaxPrefilter(function( options, originalOptions, jqXHR ) {
　　if(key.indexOf('.html') ！= -1)
　　　　return;
    var key = options.url;
    if (!pendingRequests[key]) {
        pendingRequests[key] = jqXHR;
    } else {
        jqXHR.abort();    // 放弃后触发的重复提交
        //pendingRequests[key].abort();    // 放弃先触发的提交
    }
    
    var complete = options.complete;
    options.complete = function(jqXHR, textStatus) {
        pendingRequests[key] = null;
        if ($.isFunction(complete)) {
            complete.apply(this, arguments);
        }
    };
});

其实还是要在服务端也实现一遍。

14. 判断是否是数字，包括小数

function isNumeric(s){
    if (s!=null && s!=""){
        return !isNaN(s);
    }
    return false;
}

15. 数组去重

function unique(arr) {
    var result = [], hash = {};
    for (var i = 0, elem; (elem = arr[i]) != null; i++) {
        if (!hash[elem]) {
            result.push(elem);
            hash[elem] = true;
        }
    }
    return result;
}

利用的原理是：对象的属性，其实就相当于一个 map，属性名就是 map的key，属性值就相当于map的value。所以其实是利用map来去重的。我们知道map的key是不可能重复的。对象的属性名也不可能重复。