Front-end data input verification is a technical task, and there are often many ways to verify data. This approach feels repetitive and complicated, so I wrote a JavaScript plug-in, just need to import, add 2 pieces of code, add the required The verification text box is enough, which is convenient and quick.
renderings
js file
Click to open the link https://download.csdn.net/download/qq_28254093/10393740
specific usage
(1): Import files:
<script type="text/javascript" src="../../Publics/js/DataVerification/VerifyValue.js"></script>
(2): Bind the scope that needs to be verified in the window.onLoad method
Among them, data is the Id of the element, and its purpose is to specify that the input file for verification is all input sub-elements of the element Id='data'
formLoad("data");
(3): Called when saving data or getting
var flg = saveClick("data", false); //flg==false; indicates that there is a failed verification, flg==true; indicates that the verification is passed
(4) Add the rule data_val that needs to be verified to the existing Input control, in the form of
<input type="text" id="Names" data_val="{isNotNull:'Item name cannot be empty'}"
<input type="text" id="PRICE" data_val="{isNotNull:'Amount cannot be empty',isDouble:'Amount must be a number'}" />
Among them, data_val supports types: numbers, decimals, ID numbers, phone numbers, mailboxes, Chinese characters, English letters, digital letters, "_" and "-", Chinese letters and '_', Chinese letters and numbers and '_ ',
Other types you need, just add them in
var vaildata = {.....}
Verifiable Type Snippets in Validation Plugins
//Define validation rules, just add them here later
can wait = {
isNull: function (val) {
return val.trim() == "";
},
isNotNull: function (val) {
return util.isNotBlank(val);
},
usname: function (val) {
regex = / ^ [a-zA-Z] \ w {3,} $ /;
return regex.test(val);
},
uspass: function (val) {
regex = /\w{6,12}$/;
return regex.test(val);
},
phone: function (val) {
var partten = / ^ 1 [3,5,8] \ d {9} $ /;
let partten1 = /^0(([1,2]\d)|([3-9]\d{2}))\d{7,8}$/;
return partten.test(val) || partten1.test(val) || val.length == 0;
},
email: function (val) {
regex = /\w+[@]\w+(\.\w+){1,2}/;
return regex.test(val);
},
isNumber: function (val) {
regex = /^\d{0,}$/;
return regex.test(val);
},
isDouble: function (val) {
regex = /^\d{0,}[.]{0,1}\d+$/;
return regex.test(val);
},
isCardId: function (num) {
if (num.length == 0)
return true;
num = num.toUpperCase(); //The ID number is 15 or 18 digits, all 15 digits are digits, the first 17 digits of the 18 digits are digits, and the last digit is the check digit, which may be a number or the character X.
if (!(/(^\d{15}$)|(^\d{17}([0-9]|X)$)/.test(num))) {
//alert('The length of the ID number entered is wrong, or the number does not meet the regulations!\nThe 15-digit number should be all numbers, and the last digit of the 18-digit number can be a number or X.');
return false;
}
//Verify the top 2, the city matches
var aCity = { 11: "Beijing", 12: "Tianjin", 13: "Hebei", 14: "Shanxi", 15: "Inner Mongolia", 21: "Liaoning", 22: "Jilin", 23: "Heilongjiang ", 31: "Shanghai", 32: "Jiangsu", 33: "Zhejiang", 34: "Anhui", 35: "Fujian", 36: "Jiangxi", 37: "Shandong", 41: "Henan", 42: "Hubei", 43: "Hunan", 44: "Guangdong", 45: "Guangxi", 46: "Hainan", 50: "Chongqing", 51: "Sichuan", 52: "Guizhou", 53: "Yunnan", 54: "Tibet", 61: "Shaanxi", 62: "Gansu", 63: "Qinghai", 64: "Ningxia", 65: "Xinjiang", 71: "Taiwan", 81: "Hong Kong" ", 82: "Macau", 91: "Foreign" };
if (aCity[parseInt(num.substr(0, 2))] == null) {
return false;
}
//alert('City:'+aCity[parseInt(num.substr(0,2))]);
//The following analyzes the date of birth and the check digit respectively
var len, re; len = num.length;
if (len == 15) {
re = new RegExp(/^(\d{6})(\d{2})(\d{2})(\d{2})(\d{3})$/);
var arrSplit = num.match(re); //check if the birthday date is correct
var dtmBirth = new Date ('19 '+ arrSplit [2] +' / '+ arrSplit [3] +' / '+ arrSplit [4]);
var bGoodDay;
bGoodDay = (dtmBirth.getYear() == Number(arrSplit[2])) && ((dtmBirth.getMonth() + 1) == Number(arrSplit[3])) && (dtmBirth.getDate() == Number(arrSplit[4]));
if (!bGoodDay) {
return false;
} else { //Convert the 15-bit ID card into 18-bit //The check digit is generated according to the provisions of ISO 7064:1983.MOD 11-2, and X can be considered as the number 10.
var myDate = new Date();
var nowdate = Date.parse(myDate.toLocaleDateString());
var birthday = Date.parse(dtmBirth);
if (birthday > nowdate)
return false;
var arrInt = new Array (7, 9, 10, 5, 8, 4, 2, 1, 6, 3, 7, 9, 10, 5, 8, 4, 2);
var arrCh = new Array('1', '0', 'X', '9', '8', '7', '6', '5', '4', '3', '2');
var nTemp = 0, i;
num = num.substr(0, 6) + '19' + num.substr(6, num.length - 6);
for (i = 0; i < 17; i++) {
nTemp += num.substr(i, 1) * arrInt[i];
}
num + = arrCh [nTemp% 11];
return true;
}
}
if (len == 18) {
re = new RegExp(/^(\d{6})(\d{4})(\d{2})(\d{2})(\d{3})([0-9]|X)$/);
var arrSplit = num.match(re); //check if the birthday date is correct
var dtmBirth = new Date(arrSplit[2] + "/" + arrSplit[3] + "/" + arrSplit[4]);
var bGoodDay;
bGoodDay = (dtmBirth.getFullYear() == Number(arrSplit[2])) && ((dtmBirth.getMonth() + 1) == Number(arrSplit[3])) && (dtmBirth.getDate() == Number(arrSplit[4]));
if (!bGoodDay) {
//alert(dtmBirth.getYear());
//alert(arrSplit[2]);
return false;
}
else { //Check whether the check code of the 18-digit ID card is correct. //The check digit is generated according to ISO 7064:1983.MOD 11-2, and X can be considered as the number 10.
var myDate = new Date();
var nowdate = Date.parse(myDate.toLocaleDateString());
var birthday = Date.parse(dtmBirth);
if (birthday > nowdate)
return false;
was chosen;
var arrInt = new Array (7, 9, 10, 5, 8, 4, 2, 1, 6, 3, 7, 9, 10, 5, 8, 4, 2);
var arrCh = new Array('1', '0', 'X', '9', '8', '7', '6', '5', '4', '3', '2');
var nTemp = 0, i;
for (i = 0; i < 17; i++) {
nTemp += num.substr(i, 1) * arrInt[i];
}
valnum = arrCh [nTemp% 11];
if (valnum! = num.substr (17, 1)) {
//alert('The check code of the 18-digit ID card is incorrect! It should be: ' + valnum);
return false;
}
return true;
}
} return false;
},
isChinese: function (val) {
regex = /^[\u0391-\uFFE5]+$/;
return regex.test(val);
},
isEnglish: function(val) {
regex = / [A-Za-z _] {0,} /;
return regex.test(val);
},
isNumberAndEnglish: function (val) {
regex = / [0-9A-Za-z _ \ -] /;
return regex.test(val);
},
isChineseAndEnglish: function(val) {
regex = / ([\ u0391- \ uFFE5] {0,} [A-Za-z _] {0,}) | ([A-Za-z _] {0,} [\ u0391- \ uFFE5] {0, }) /;
return regex.test(val);
},
isNumberAndChineseAndEnglish: function (val) {
regex = / [[\ u0391- \ uFFE5] {0,} (0-9A-Za-z _ \ -] {0,}) | [[0-9A-Za-z _ \ -] {0,} [\ u0391- \ uFFE5] [0,}) /;
return regex.test(val);
}
};
Brothers who are interested can, refer to