用原生JS写一个简单的表单验证

首先，是html部分

接着，为其加上CSS样式

.divAll{

width:800px;

font-family:'黑体';

margin:50px auto;

}

#titles{

font-weight:bold;

font-size:18px;

height:50px;

line-height:50px;

background:#FFF9F3;

text-align:center;

border:1px solid #CCC;;

}

#contents{

margin-top:20px;

background:#FFF9F3;

border:1px solid #CCC;;

}

#form-itemGroup{

padding:10px;

}

#form-itemGroup label{

display:inline-block;

width:100px;

height:32px;

line-height:32px;

color:#666;

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:#999;

}

#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;

}

最后是JS部分

function checkForm(){

var nametip = checkUserName();

var passtip = checkPassword();

var conpasstip = ConfirmPassword();

var phonetip = checkPhone();

return nametip && passtip && conpasstip && phonetip;

}

//验证用户名

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(!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');

if((userpasswd.value)!=(userConPassword.value) || userConPassword.value.length == 0){

errConPasswd.innerHTML="上下密码不一致"

errConPasswd.className="error"

return false;

}

else{

errConPasswd.innerHTML="OK"

errConPasswd.className="success";

return true;

}

}

//验证手机号

function checkPhone(){

var userphone = document.getElementById('userPhone');

var phonrErr = document.getElementById('phoneErr');

var pattern = /^1[34578]\d{9}$/; //验证手机号正则表达式

if(!pattern.test(userphone.value)){

phonrErr.innerHTML="手机号码不合规范"

phonrErr.className="error"

return false;

}

else{

phonrErr.innerHTML="OK"

phonrErr.className="success";

return true;

}

}

好了，打开浏览器测试一下吧

填写数据，可以！

以上所述是小编给大家介绍的JavaScript表单验证完美代码，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！