1. 程式人生 > >js input 監聽所有格式是否正確 不使用外掛

js input 監聽所有格式是否正確 不使用外掛

本文出自:

http://blog.csdn.net/wyk304443164

直接上程式碼,使用比較簡單,思想稍微複雜一點

/**
 * Created by wuyakun on 2017/7/7.
 */

var cooperation = {};

cooperation.isCanSubmit = function () {
    var allInputValue = common.getAllInputValue(cooperation.getAllInputId());
    if (allInputValue === false) {
        //設定按鈕點選不了
$("#cooperation-submit").addClass("button-disabled"); } else { //設定按鈕可以點選 $("#cooperation-submit").removeClass("button-disabled"); } }; cooperation.getAllInputId = function () { return [{ name: 'company_name', isMust: true }, { name: 'name'
, isMust: true }, { name: 'tel_phone', isMust: true, judge: function (value) { return common.isMobilePhone(value); } }, { name: 'email', isMust: false, judge: function (value) { return value === '' || common.isEmail(value); } }]; }; $(document).ready(function
() {
/** * 開始監聽所有的input框 */ function startInputListener() { var list = cooperation.getAllInputId(); for (var i = 0; i < list.length; i++) { var idName = '#' + list[i].name; $(idName).bind('input propertychange', function () { cooperation.isCanSubmit(); }); } } startInputListener(); //給我們親愛的submit新增一個事件 $("#cooperation-submit").click(function () { var listValue = common.getAllInputValue(cooperation.getAllInputId()); if (listValue) { var postData = { name: listValue[1], phone: listValue[2], companyName: listValue[0], email: listValue[3] }; if(listValue[0].length>20){ alert('單位名稱長度不可超於20'); return; } if(listValue[1].length>20){ alert('聯絡人長度不可超於20'); return; } $.ajax({ url: 'http://xxx.com.cn/agent/save', data: postData, // contentType: 'text/plain', contentType: 'application/x-www-form-urlencoded', type: 'POST', dataType: 'json' }).done(function (result) { if (!common.isEmpty(result) && result.success === true) { alert('提交申請成功,我們將在一個工作日內與您取得聯絡'); document.location.reload(); } }); } }); });
/**
 * 根據input id獲取值
 * @param id
 */

common.getInputValueById = function (id) {
    var idn = '#' + id;
    return $(idn)[0].value;
};

/**
 * 獲取所有的input框 成立就返回 list 不成立就返回false
 */

common.getAllInputValue = function (list) {
    var listValue = [];
    for (var i = 0; i < list.length; i++) {
        var inputValue = common.getInputValueById(list[i].name);
        if (list[i].isMust && common.isEmpty(inputValue) || list[i].judge && !list[i].judge(inputValue)) {
            return false;
        } else {
            listValue[i] = inputValue;
        }
    }
    return listValue;
};
/**
 * 判斷是不是手機號
 * @param s
 * @returns {boolean}
 */

common.isMobilePhone = function (s) {
    var re = /^1[0-9]{10}$/;
    return re.test(s);
};


/**
 * 判斷郵箱的格式
 * @param y
 * @returns {boolean}
 */
common.isEmail = function (y) {
    var filter  = /^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/;
    return filter.test(y);
};

/**
 * 判斷是不是空的或者undefined
 * @param obj
 * @returns {boolean}
 */

common.isNull = function (obj) {
    return obj === null || typeof obj === 'undefined';
};

/**
 * 判斷是不是空的字串
 * @param obj
 * @returns {boolean}
 */

common.isEmpty = function (obj) {
    return this.isNull(obj) || obj === '';
};

ok整體比較優雅