js input 監聽所有格式是否正確 不使用外掛
阿新 • • 發佈:2018-11-08
本文出自:
直接上程式碼,使用比較簡單,思想稍微複雜一點
/**
* 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整體比較優雅