JS输入框验证系列，验证输入的是不是仅：数字,字母,小数,汉字,邮箱,URL，域名,邮编,车牌,身份证号,快递单号,等等
若验证失败，可清空输入框并重新聚焦到输入框，且仅大小写字母时会自动互转！
<input type="text" placeholder="请输入数字" oninput="handleInput(this, 'number')" onblur="validateOnBlur(this, 'number')" /> 使用实例：验证是不是仅数字
<script>//输入框验证系列
class InputValidator {
constructor() {
this.patterns = {
number: /^[0-9]+$/, // 仅数字
letter: /^[a-zA-Z]+$/, // 仅字母
decimal: /^\d+(\.\d+)?$/, // 仅小数
chinese: /^[\u4e00-\u9fa5]+$/, // 仅汉字
email: /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/, // 邮箱
url: /^(https?:\/\/[^\s$.?#].[^\s]*\.[a-zA-Z]{2,})(\/[^\s]*)?$/, // URL
domain: /^(?!:\/\/)([a-zA-Z0-9-]+\.)+[a-zA-Z]{2,}$/, // 域名
alphanumeric: /^[a-zA-Z0-9]+$/, // 仅字母或数字
phone: /^(1[3-9]\d{9})$/, // 中国手机号
postcode: /^(\d{6}|[0-9]{5}(-[0-9]{4})?)$/, // 中国（6位）和美国（5位或9位）邮政编码
idCard: /^(?:\d{15}|\d{17}[\dXx])$/, // 中国身份证号码（15位或18位）
licensePlate: /^[\u4E00-\u9FA5]{1}[A-Z]{1}[A-Z0-9]{5,6}$/, // 中国车牌号（普通车牌）
express: /^[A-Za-z0-9]{10,20}$/, // 快递单号（10到20位字母或数字）
uppercase: /^[A-Z]*$/, // 仅支持大写字母
lowercase: /^[a-z]*$/ // 仅支持小写字母
};
}
validate(input, type) {const value = input.value;
// 检查输入内容
if (this.patterns[type].test(value)) { layer.msg("输入有效"); delete $.input_error;
} else { layer.msg("输入无效，请重新输入",{anim: 6,closeBtn:2});
$.input_error = "记录输入错误，可做判断"; //可用全局window.input_error，delete window.input_error;
input.value = ''; // 清空输入框
input.focus(); // 将焦点重新放回输入框
}}}
const validator = new InputValidator();
function handleInput(input, type) {
// 根据输入类型进行转换
if (type === 'uppercase') {
input.value = input.value.toUpperCase(); // 转换为大写
} else if (type === 'lowercase') {
input.value = input.value.toLowerCase(); // 转换为小写
} else if (type === 'licensePlate') {
input.value = input.value.toUpperCase(); // 车牌号输入时转换为大写
}
}
function validateOnBlur(input, type) { // 进行相应类型的验证
validator.validate(input, type); }
</script>
<script src="//lib.baomitu.com/jquery/3.1.1/jquery.min.js"></script>
<script src="//lib.baomitu.com/jquery/2.1.4/jquery.min.js"></script>
<script src="//lib.baomitu.com/layer/3.1.1/layer.js"></script>HTML所有输入框演示实例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>输入验证与字母支持</title>
<script src="//lib.baomitu.com/jquery/3.1.1/jquery.min.js"></script>
<script src="//lib.baomitu.com/layer/3.1.1/layer.js"></script>
<style>
input {
display: block;
margin: 10px 0;
padding: 8px;
width: 300px;
}
</style>
</head>
<body>
<input type="text" id="numberInput" placeholder="请输入数字" oninput="handleInput(this, 'number')" onblur="validateOnBlur(this, 'number')" />
<input type="text" id="urlInput" placeholder="请输入URL" oninput="handleInput(this, 'url')" onblur="validateOnBlur(this, 'url')" />
<input type="text" id="domainInput" placeholder="请输入域名" oninput="handleInput(this, 'domain')" onblur="validateOnBlur(this, 'domain')" />
<input type="text" id="expressInput" placeholder="请输入快递单号" oninput="handleInput(this, 'express')" onblur="validateOnBlur(this, 'express')" />
<input type="text" id="upperInput" placeholder="请输入大写字母" oninput="handleInput(this, 'uppercase')" onblur="validateOnBlur(this, 'uppercase')" />
<input type="text" id="lowerInput" placeholder="请输入小写字母" oninput="handleInput(this, 'lowercase')" onblur="validateOnBlur(this, 'lowercase')" />
<input type="text" id="chineseInput" placeholder="请输入汉字" oninput="handleInput(this, 'chinese')" onblur="validateOnBlur(this, 'chinese')" />
<input type="text" id="emailInput" placeholder="请输入邮箱" oninput="handleInput(this, 'email')" onblur="validateOnBlur(this, 'email')" />
<input type="text" id="phoneInput" placeholder="请输入手机号" oninput="handleInput(this, 'phone')" onblur="validateOnBlur(this, 'phone')" />
<input type="text" id="postcodeInput" placeholder="请输入邮政编码" oninput="handleInput(this, 'postcode')" onblur="validateOnBlur(this, 'postcode')" />
<input type="text" id="idCardInput" placeholder="请输入身份证号码" oninput="handleInput(this, 'idCard')" onblur="validateOnBlur(this, 'idCard')" />
<input type="text" id="licensePlateInput" placeholder="请输入车牌号" oninput="handleInput(this, 'licensePlate')" onblur="validateOnBlur(this, 'licensePlate')" />
<script>
class InputValidator {
constructor() {
this.patterns = {
number: /^[0-9]+$/, // 仅数字
letter: /^[a-zA-Z]+$/, // 仅字母
decimal: /^\d+(\.\d+)?$/, // 仅小数
chinese: /^[\u4e00-\u9fa5]+$/, // 仅汉字
email: /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/, // 邮箱
url: /^(https?:\/\/[^\s$.?#].[^\s]*\.[a-zA-Z]{2,})(\/[^\s]*)?$/, // URL
domain: /^(?!:\/\/)([a-zA-Z0-9-]+\.)+[a-zA-Z]{2,}$/, // 域名
alphanumeric: /^[a-zA-Z0-9]+$/, // 仅字母或数字
phone: /^(1[3-9]\d{9})$/, // 中国手机号
postcode: /^(\d{6}|[0-9]{5}(-[0-9]{4})?)$/, // 中国（6位）和美国（5位或9位）邮政编码
idCard: /^(?:\d{15}|\d{17}[\dXx])$/, // 中国身份证号码（15位或18位）
licensePlate: /^[\u4E00-\u9FA5]{1}[A-Z]{1}[A-Z0-9]{5,6}$/, // 中国车牌号（普通车牌）
express: /^[A-Za-z0-9]{10,20}$/, // 快递单号（10到20位字母或数字）
uppercase: /^[A-Z]*$/, // 仅支持大写字母
lowercase: /^[a-z]*$/ // 仅支持小写字母
};
}
validate(input, type) {const value = input.value;
// 检查输入内容
if (this.patterns[type].test(value)) { layer.msg("输入有效"); delete $.input_error;
} else { layer.msg("输入无效，请重新输入",{anim: 6,closeBtn:2});
$.input_error = "记录输入错误，可做判断";//可用全局window.input_error，delete window.input_error;
input.value = ''; // 清空输入框
input.focus(); // 将焦点重新放回输入框
}}}
const validator = new InputValidator();
function handleInput(input, type) {
// 根据输入类型进行转换
if (type === 'uppercase') {
input.value = input.value.toUpperCase(); // 转换为大写
} else if (type === 'lowercase') {
input.value = input.value.toLowerCase(); // 转换为小写
} else if (type === 'licensePlate') {
input.value = input.value.toUpperCase(); // 车牌号输入时转换为大写
}
}
function validateOnBlur(input, type) { // 进行相应类型的验证
validator.validate(input, type); }
</script>
</body>
</html>
评论
发表评论: