JavaScript autoPopulate 0.1 - 使用书签自动填充表单字段
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了JavaScript autoPopulate 0.1 - 使用书签自动填充表单字段相关的知识，希望对你有一定的参考价值。
(function() {
var data = {
// personal details
'forename': {
'expression': /^(delivery|billing|card)?_?(fore|first)_?name$/i,
'value': [
'Bob',
'Alice'
]
},
'surname': {
'expression': /^(delivery|billing|card)?_?(sur|family|last)_?name$/i,
'value': [
'Tester',
'O\'Test' // test for quote acceptance
]
},
'company': {
'expression': /^(delivery|billing|card)?_?(company|business|organisation)_?(name)?$/i,
'value': [
'Test Ltd.',
'Test O\'Sites Ltd.',
'Test "Testing" Ltd.'
]
},
'email': {
'expression': /^(confirm)?_?email_?(address|confirm)?$/i,
'value': 'test.user@testdomain.co.uk'
},
// address details
'house_number': {
'expression': /^(delivery|billing|card)?_?(house|street|building)_?(num(ber)?|no)?$/i,
'value': '45'
},
'address1': {
'expression': /^(delivery|billing|card)?_?address_?1$/i,
'value': [
'45 Test Road',
'"Test House", 45 Test Road',
'\'Test House\', 45 Test Road'
]
},
'address2': {
'expression': /^(delivery|billing|card)?_?address_?2$/i,
'value': 'Teston'
},
'town': {
'expression': /^(delivery|billing|card)?_?(town|city|address_?3)$/i,
'value': 'Testville'
},
'county': {
'expression': /^(delivery|billing|card)?_?(county|state|address_?4)$/i,
'value': 'Testshire'
},
'postcode': {
'expression': /^(delivery|billing|card)?_?(post(al)?|zip)_?code$/i,
'value': [
'WR2 6NJ' // postcode anywhere test postcode - no charge for testing!
]
},
'country': {
'expression': /^(delivery|billing|card)?_?country$/i,
'value': [
'United Kingdom',
'Great Britain',
'England',
'UK'
]
},
// contact details
'phone': {
'expression': /^(delivery|billing|card)?_?((tele?)?phone|tel)_?(num(ber)?|no)?$/i,
'value': '01234 567 890'
},
'mobile': {
'expression': /^mob(ile)?_?(num(ber)?|no)?$/i,
'value': '07777 123 456'
},
'fax': {
'expression': /^(fax|facsimile)_?(num(ber)?|no)?$/i,
'value': '01234 567 891'
},
// date of birth
'dob_day': {
'expression': /^d(a?te)?_?of?_?b(irth)?_?d(a?y)?$/i,
'value': 1
},
'dob_month': {
'expression': /^d(a?te)?_?of?_?b(irth)?_?m((on)?th)?$/i,
'value': 1
},
'dob_year': {
'expression': /^d(a?te)?_?of?_?b(irth)?_?y(ear|r)?$/i,
'value': 1980
},
// card details
'card_number': {
'expression': /^(credit|debit)?_?card_?(num(ber)?|no)?$/i,
'value': '4929 0000 0000 6'
},
'card_valid_month': {
'expression': /^(credit|debit)?_?(card)?_?(start|valid_?(from)?)_?month$/i,
'value': '01'
},
'card_valid_year': {
'expression': /^(credit|debit)?_?(card)?_?(start|valid_?(from)?)_?year$/i,
'value': '2010'
},
'card_expiry_month': {
'expression': /^(credit|debit)?_?(card)?_?expiry_?month$/i,
'value': '12'
},
'card_expiry_year': {
'expression': /^(credit|debit)?_?(card)?_?expiry_?year$/i,
'value': '2015'
},
'security_code': {
'expression': /^(credit|debit)?_?(card)?_?(verification|cv2|security)?_?code$/i,
'value': '123'
},
// message/notes
'message': {
'expression': /^(message|(delivery|billing|card)?_?notes?|info(rmation)?|comments?)$/i,
'value': 'This is a test.'
},
// concatenation
'name': {
'expression': /^(full|delivery|billing|card)?_?(name(_?on_?card)?|cardholder)$/i,
'combine': [
'forename',
'surname'
],
'separator': ' '
},
'address': {
'expression': /^(delivery|billing|card)?_?address$/i,
'combine': [
'address1',
'address2',
'town'
],
'separator': ', '
},
'dob': {
'expression': /^d(ate)?_?of?_?b(irth)?$/i,
'combine': [
'dob_day',
'dob_month',
'dob_year'
],
'separator': '/'
},
'card_valid': {
'expression': /^(credit|debit)?_?(card)?_?(start|valid_?(from)?)y_?(da?te)?$/i,
'combine': [
'card_valid_month',
'card_valid_year'
],
'separator': ''
},
'card_expiry': {
'expression': /^(credit|debit)?_?(card)?_?expiry_?(da?te)?$/i,
'combine': [
'card_expiry_month',
'card_expiry_year'
],
'separator': ''
}
};
var concatFields = function(values, separator, data) {
var r = [];
for (var i = 0; i < values.length; i++) {
if (values[i] in data) {
var field = data[values[i]];
if ('value' in field) {
var value = field.value;
if (typeof(value) == 'string') {
if (value.length > 0) {
r.push(value);
}
} else if (value.length) {
var key = Math.floor(Math.random() * value.length);
if (value[key].length > 0) {
r.push(value[key]);
}
}
} else if ('combine' in field && 'separator' in field) {
r.push(concatFields(field.combine, field.separator, data));
}
}
}
return r.join(separator);
}
if (document.querySelectorAll) {
var elements = document.querySelectorAll('input, textarea, select');
} else {
var elements = [];
elements = elements.concat(document.getElementsByTagName('input'), document.getElementsByTagName('textarea'), document.getElementsByTagName('select'));
}
for (var i = 0; i < elements.length; i++) {
var name = (elements[i].name ? elements[i].name : elements[i].id);
for (var key in data) {
var field = data[key];
if (name.match(field.expression)) {
var value = (('combine' in field && 'separator' in field) ? concatFields(field.combine, field.separator, data) : (('value' in field) ? field.value : false));
if (value !== false) {
if (elements[i].tagName.toLowerCase() == 'select') {
for (var j = 0; j < elements[i].options.length; j++) {
if (typeof(value) == 'string' || typeof(value) == 'number') {
if (elements[i].options[j].value == value || elements[i].options[j].text == value) {
elements[i].selectedIndex = j;
break;
}
} else if (value.length) {
if (value.indexOf(elements[i].options[j].value) > -1 || value.indexOf(elements[i].options[j].text) > -1) {
elements[i].selectedIndex = j;
break;
}
}
}
} else if (elements[i].tagName.toLowerCase() == 'input' && (elements[i].type == 'checkbox' || elements[i].type == 'radio')) {
if (elements[i].value == value) {
elements[i].checked = true;
} else {
elements[i].checked = false;
}
} else {
if (typeof(value) == 'string' || typeof(value) == 'number') {
elements[i].value = value;
} else if (value.length) {
elements[i].value = value[Math.floor(Math.random() * value.length)];
}
}
elements[i].blur();
}
continue;
}
}
}
})();以上是关于JavaScript autoPopulate 0.1 - 使用书签自动填充表单字段的主要内容，如果未能解决你的问题，请参考以下文章
JavaScript 图形JavaScript框架，版本0.0.1