版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
JavaScript 可用来在数据被送往服务器前对 HTML 表单中的这些输入数据进行验证。
表单数据经常需要使用 JavaScript 来验证其正确性。
表单验证包括对用户名、密码 、密码强度、QQ号、手机号以及邮箱等的验证
话不多说直接上代码,下面有效果图
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<style type="text/css">
body {
background: #ccc;
}
label {
width: 40px;
display: inline-block;
}
.container {
margin: 100px auto;
width: 400px;
padding: 50px;
line-height: 40px;
border: 1px solid #999;
background: #efefef;
}
span {
margin-left: 30px;
font-size: 12px;
padding:2px 20px 0;
color: #ccc;
}
.wrong {
color: red;
background: url(images/error.png) no-repeat;
}
.right {
color: green;
background: url(images/right.png) no-repeat;
}
.pwd {
width: 220px;
height: 20px;
background: url("images/strong.jpg") no-repeat;
}
.str1{
background-position: 0 -20px;/*密码强度弱*/
}
.str2{
background-position: 0 -40px;/*密码强度一般*/
}
.str3{
background-position: 0 -60px;/*密码强度很好*/
}
.str4{
background-position: 0 -80px;/*密码强度极佳*/
}
</style>
<script>
window.onload = function () {
var password = document.getElementById("password");
//qq号
addEvent("inp1", function () {
if(/^[1-9][0-9]{4,}$/.test(this.value)){//满足正则表达式
setClassName(this,"right");
setInnerHTML(this,"恭喜您,输入正确!");
}else{ //不满足正则表达式
setClassName(this,"wrong");
setInnerHTML(this,"格式错误!");
}
});
//手机号
addEvent("inp2", function () {
if(/^((13[0-9])|(15[^4,\D])|(18[0-9]))\d{8}$/.test(this.value)){
setClassName(this,"right");
setInnerHTML(this,"恭喜您,输入正确!");
}else{
setClassName(this,"wrong");
setInnerHTML(this,"格式错误!");
}
});
//邮箱
addEvent("inp3", function () {
if(/^[\w\-\.]{5,}\@[\w]+\.[\w]{2,4}$/.test(this.value)){
setClassName(this,"right");
setInnerHTML(this,"恭喜您,输入正确!");
}else{
setClassName(this,"wrong");
setInnerHTML(this,"格式错误!");
}
});
//座机
addEvent("inp4", function () {
if(/^[1-9][0-9]{4,}$/.test(this.value)){
setClassName(this,"right");
setInnerHTML(this,"恭喜您,输入正确!");
}else{
setClassName(this,"wrong");
setInnerHTML(this,"格式错误!");
}
});
//用户名
addEvent("inp5", function () {
if(/^[a-zA-Z0-9_-]{3,16}$/.test(this.value)){
setClassName(this,"right");
setInnerHTML(this,"恭喜您,输入正确!");
}else{
setClassName(this,"wrong");
setInnerHTML(this,"格式错误!");
}
});
//密码
addEvent("inp6", function () {
if(/^[a-zA-Z0-9_\-$]{6,18}$/.test(this.value)){
setClassName(this,"right");
setInnerHTML(this,"恭喜您,输入正确!");
password.className = "pwd str1";
if(/^[A-Za-z0-9]+[_$][A-Za-z0-9]*$/.test(this.value)){
password.className = "pwd str4";
}else if(/^([a-z].*[0-9])|([A-Z].*[0-9])|[0-9].*[a-zA-Z]$/.test(this.value)){
password.className = "pwd str3";
}else if(/^([a-z].*[A-Z])|([A-Z].*[a-z])$/.test(this.value)){
password.className = "pwd str2";
}
}else{
setClassName(this,"wrong");
setInnerHTML(this,"格式错误!");
}
});
//因为每次都要这样调用,所以很繁琐,我们通过封装实现代码
function addEvent(str,fn){
document.getElementById(str).onblur = fn;
}
function setClassName(aaa,txt){
var span = aaa.nextElementSibling || this.nextSibling;
span.className = txt;
}
function setInnerHTML(aaa,txt){
var span = aaa.nextElementSibling || this.nextSibling;
span.innerHTML = txt;
}
}
</script>
<body>
<div class="container">
<!--点击文字跳转到文本框-->
<label for="inp1">QQ</label><input type="text" id="inp1"><span>输入正确的QQ号码</span><br>
<label for="inp2">手机</label><input type="text" id="inp2"><span>输入13位手机号码</span><br>
<label for="inp3">邮箱</label><input type="text" id="inp3"><span>输入正确邮箱</span><br>
<label for="inp4">座机</label><input type="text" id="inp4"><span>输入您的座机</span><br>
<label for="inp5">账号</label><input type="text" id="inp5"><span>亲输入您的账号</span><br>
<label for="inp6">密码</label><input type="text" id="inp6"><span>请输入您的密码</span><br>
<div id="password" class="pwd"></div>
</div>
</body>
</html>
效果图如下:
如果你有不同的需求,可以根据自己的需求对代码进行相应的修改