前言
实际开发中,往往要注重效率和代码的复用率。以下的Demo就通过html5的自定义属性来使用Jquery实现常用的数字格式自动验证。以后的开发中需要考虑更多的、更便捷的使用技巧,这样才能做到事半功倍。
用法
在需要验证格式的Input元素中新增自定义属性 data-hook 为 number 或 id-card 就可以分别验证输入内容是否为手机号码或身份证号码。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Demo</title>
</head>
<body>
<input type="number" data-hook="number">
<br>
<input type="number" data-hook="id-card">
</body>
<script src="jquery-1.9.0.min.js"></script>
<script>
$(function() {
//验证手机号码
$('[data-hook="number"]').on('focus', function() {
$(this).val('');
$('.number-input-notice').remove();
});
$('[data-hook="number"]').on('blur', function() {
var val = $(this).val();
if(val) {
if(!val.match(/^(13[0-9]|15[012356789]|17[678]|18[0-9]|14[57])[0-9]{8}$/)) {
$(this).after('<span class="number-input-notice">请填写正确的手机号码</span>');
}
}
});
//验证身份证
$('[data-hook="id-card"]').on('focus', function() {
$(this).val('');
$('.id-card-input-notice').remove();
});
$('[data-hook="id-card"]').on('blur', function() {
var val = $(this).val();
if(val) {
if(!val.match(/^([0-9]{17})[X|x|0-9]{1}$/)) {
$(this).after('<span class="id-card-input-notice">请填写正确的身份证号码</span>');
}
}
});
});
</script>
</html>