版权声明：本样板的所有内容，包括文字、图片,均为原创。对未经许可擅自使用者，本人保留追究其法律责任的权利。 https://blog.csdn.net/fx_gcw2018/article/details/84900456
JavaScript实现表单验证：
表单实现效果：
- JavaScript表单框验证
- 表单提交验证
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="description" content="繁星纯JavaScript表单验证" />
<title>表单验证</title>
<style type="text/css">
html{
background-image: url("https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1544291483424&di=7aaa2d903a0f59182c4098599614a6d7&imgtype=0&src=http%3A%2F%2Fbpic.588ku.com%2Fback_pic%2F03%2F73%2F52%2F4457baa6a18c8e8.jpg");
}
.divAll {
width: 800px;
font-family: '楷体';
margin: 50px auto;
}
#titles {
font-weight: bold;
font-size: 18px;
height: 50px;
line-height: 50px;
text-align: center;
background-color: #ceef7a;
border: 1px solid #CCC;
;
}
#contents {
margin-top: 20px;
background-image: url("https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1544291020509&di=186618579f3900af60505f7d8883533a&imgtype=0&src=http%3A%2F%2Fimg2.3lian.com%2F2014%2Ff5%2F101%2Fd%2F61.jpg") ;
background-repeat:no-repeat;
border: 1px solid #CCC;
}
#form-itemGroup {
padding: 10px;
}
#form-itemGroup label {
display: inline-block;
width: 100px;
height: 32px;
line-height: 32px;
color: greenyellow;
text-align: right;
}
#form-itemGroup .userName {
width: 200px;
height: 40px;
line-height: 40px;
border: 1px solid #CCC;
}
#form-itemGroup .default {
width: 200px;
height: 32px;
line-height: 32px;
color: greenyellow
}
#form-itemGroup .error {
height: 32px;
line-height: 32px;
color: #F00;
}
#form-itemGroup .success {
height: 32px;
line-height: 32px;
color: #096;
}
.divBtn {
margin-top: 20px;
margin-left: 200px;
width: 100px;
height: 32px;
line-height: 32px;
background-color: #F93;
margin-bottom: 10px;
color: #ffffff;
font-weight: bold;
border: none;
}
</style>
</head>
<body>
<div class="divAll">
<div id="titles">新用户注册</div>
<div id="contents">
<h3>基本信息</h3>
<hr width="95%" color="#f2f2f2" />
<form action="#" onSubmit="return checkForm()">
<div id="form-itemGroup">
<label for="userName">用户名：</label>
<input type="text" id="userName" class="userName" onBlur="checkUserName()" oninput="checkUserName()">
<span class="default" id="nameErr">请输入至少3位的数字</span>
</div>
<div id="form-itemGroup">
<label for="userPasword">密码：</label>
<input type="password" id="userPasword" class="userName" onBlur="checkPassword()" oninput="checkPassword()">
<span class="default" id="passwordErr">请输入4到8位的密码</span>
</div>
<div id="form-itemGroup">
<label for="userConfirmPasword">确认密码：</label>
<input type="password" id="userConfirmPasword" class="userName" onBlur="ConfirmPassword()" oninput="ConfirmPassword()">
<span class="default" id="conPasswordErr">请再输入一遍密码</span>
</div>
<div id="form-itemGroup">
<label for="userPhone">手机号码：</label>
<input type="text" id="userPhone" class="userName" onBlur="checkPhone()" oninput="checkPhone()">
<span class="default" id="phoneErr">请输入11位手机号码</span>
</div>
<div>
<button type="submit" class="divBtn">注册</button>
</div>
</form>
</div>
</div>
<script type="text/javascript">
//验证用户名
function checkUserName() {
var username = document.getElementById('userName');
var errname = document.getElementById('nameErr');
var pattern = /^\w{3,}$/; //用户名格式正则表达式：用户名要至少三位
if (username.value.length == 0) {
errname.innerHTML = "用户名不能为空"
errname.className = "error"
return false;
}
if (!pattern.test(username.value)) {
errname.innerHTML = "用户名不合规范"
errname.className = "error"
return false;
} else {
errname.innerHTML = "OK"
errname.className = "success";
return true;
}
}
//验证密码
function checkPassword() {
var userpasswd = document.getElementById('userPasword');
var errPasswd = document.getElementById('passwordErr');
var pattern = /^\w{4,8}$/; //密码要在4-8位
if(userpasswd.value.length == 0){
errPasswd.innerHTML = "密码不能为空"
errPasswd.className = "error"
return false;
}
if (!pattern.test(userpasswd.value)) {
errPasswd.innerHTML = "密码不合规范"
errPasswd.className = "error"
return false;
} else {
errPasswd.innerHTML = "OK"
errPasswd.className = "success";
return true;
}
}
//确认密码
function ConfirmPassword() {
var userpasswd = document.getElementById('userPasword');
var userConPassword = document.getElementById('userConfirmPasword');
var errConPasswd = document.getElementById('conPasswordErr');
var pattern = /^\w{3,}$/;
if(userpasswd.value.length == 0){
errConPasswd.innerHTML = "密码不能为空"
errConPasswd.className = "error"
return false;
}
if (!pattern.test(userpasswd.value)) {
errConPasswd.innerHTML = "密码不符合规范"
errConPasswd.className = "error"
return false;
}
if ((userpasswd.value) == (userConPassword.value) || userConPassword.value.length == 0) {
errConPasswd.innerHTML = "OK"
errConPasswd.className = "success";
return true;
}
else {
errConPasswd.innerHTML = "上下密码不一致"
errConPasswd.className = "error"
return false;
}
}
//验证手机号
function checkPhone() {
var userphone = document.getElementById('userPhone');
var phonrErr = document.getElementById('phoneErr');
var pattern = /^1[34578]\d{9}$/; //验证手机号正则表达式
if(userphone.value.length == 0){
phonrErr.innerHTML = "请输入手机号"
phonrErr.className = "error"
return false;
}
if(pattern.test(userphone.value)) {
phonrErr.innerHTML = "OK"
phonrErr.className = "success";
return true;
}else {
phonrErr.innerHTML = "手机号码不合规范"
phonrErr.className = "error"
return false;
}
}
//提交表单信息验证
function checkForm() {
//提交信息输出
var username = document.getElementById('userName');
var name=username.value;
if((checkUserName()==true)&&(checkPassword()==true)&&(ConfirmPassword()==true)&&(checkPhone()==true)){
alert("恭喜您，"+name+" 提交成功！");
}else{
alert("抱歉提交失败！");
}
}
</script>
</body>
</html>
页面效果：
