适用于大部分正则判断输入
开发工具与关键技术:Visual Studio html css javascript
作者:华境聪
撰写时间:2019/1/18
包含个人对正则判断及使用。适用大多数正则判断,可供大家参考学习。
关键点:对正则判断式的了解;“maxlength”限制最大长度;改变提示信息并返回””;
@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>zheze</title>
<script src="~/Content/jquery-2.0.3.min.js"></script>
<style>
.first{
margin-top:10px;
}
</style>
</head>
<body>
<div>
<div class="first">身份证号: <input id="identity" maxlength="19"/></div>
<div class="first">电话号码: <input id="phone" maxlength="13"/></div>
<div class="first">日期: <input id="date" placeholder="yyyy-mm-dd" maxlength="12"/></div>
<div class="first">汉字: <input id="hanzi" /></div>
<div class="first">数字: <input id="figure" /></div>
<div class="first">所有字母: <input id="letter" /></div>
<div class="first">大写字母: <input id="bigletter" /></div>
<div class="first">小写字母: <input id="xiaoletter" /></div>
<div class="first">不能由特殊字符只能由数字、大小写字母组成: <input id="kong" /></div>
</div>
<script>
$('#identity').blur(function () {
var identity = document.getElementById("identity").value;
if (/^[1-9]\d{5}[1-9]\d{3}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{4}$/.test(identity)) {
}else{
document.getElementById("identity").value = '';
document.getElementById("identity").setAttribute("placeholder", "身份证号不正确请重新输入");
};
})
$('#phone').blur(function () {
var phone = document.getElementById("phone").value;
if (/^(13[0-9]|14[5|7]|15[0|1|2|3|5|6|7|8|9]|18[0|1|2|3|5|6|7|8|9])\d{8}$/.test(phone)) {
} else {
document.getElementById("phone").value = '';
document.getElementById("phone").setAttribute("placeholder", "电话号码不正确请重新输入");
};
})
$('#date').blur(function () {
var date = document.getElementById("date").value;
if (/^(?:(?!0000)[0-9]{4}-(?:(?:0[1-9]|1[0-2])-(?:0[1-9]|1[0-9]|2[0-8])|(?:0[13-9]|1[0-2])-(?:29|30)|(?:0[13578]|1[02])-31)|(?:[0-9]{2}(?:0[48]|[2468][048]|[13579][26])|(?:0[48]|[2468][048]|[13579][26])00)-02-29)$/.test(date)) {
} else {
document.getElementById("date").value = '';
document.getElementById("date").setAttribute("placeholder", "日期格式不正确请重新输入");
};
})
$('#hanzi').blur(function () {
var hanzi = document.getElementById("hanzi").value;
if (/^[\u4e00-\u9fa5]$/.test(hanzi)) {
} else {
document.getElementById("hanzi").value = '';
document.getElementById("hanzi").setAttribute("placeholder", "格式不正确请重新输入");
};
})
$('#figure').blur(function () {
var figure = document.getElementById("figure").value;
if (/^[0-9]$/g.test(figure)) {
} else {
document.getElementById("figure").value = '';
document.getElementById("figure").setAttribute("placeholder", "格式不正确请重新输入");
};
})
$('#letter').blur(function () {
var letter = document.getElementById("letter").value;
if (/[A-Za-z]$/g.test(letter)) {
} else {
document.getElementById("letter").value = '';
document.getElementById("letter").setAttribute("placeholder", "格式不正确请重新输入");
};
})
$('#bigletter').blur(function () {
var bigletter = document.getElementById("bigletter").value;
if (/^[A-Z]$/.test(bigletter)) {
} else {
document.getElementById("bigletter").value = '';
document.getElementById("bigletter").setAttribute("placeholder", "格式不正确请重新输入");
};
})
$('#xiaoletter').blur(function () {
var xiaoletter = document.getElementById("xiaoletter").value;
if (/^[a-z]$/.test(xiaoletter)) {
} else {
document.getElementById("xiaoletter").value = '';
document.getElementById("xiaoletter").setAttribute("placeholder", "格式不正确请重新输入");
};
})
$('#kong').blur(function () {
var kong = document.getElementById("kong").value;
if (/[A-Za-z0-9]$/.test(kong)) {
} else {
document.getElementById("kong").value = '';
document.getElementById("kong").setAttribute("placeholder", "格式不正确请重新输入");
};
})
</script>
</body>
</html>
以及输出的截图:
在这里就不一一演示了,需要的话自己测试下,最主要还是理解。