1、关于JavaScript表单验证，如果使用双向绑定的前端js框架，会更容易的多。但是博主还是建议大家不要脱离源生js本身。因为源生js才是王道。
注意：
a、代码中的错误提示可能会没有，在代码中找到 “错误.jpg” 图片，自己制作一个
b、验证的判断已经完成，只需要根据自己的验证规则进行表单验证，更换自己的正则表达式。
c、博主将错误提示图片插入本文档中。需要更名为 “错误.jpg”,放到与html根目录下方可使用。
（错误提示图片）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<table border="1">
<form action="正则验证手机号.html" name="form1" method="post" onsubmit="return test()">
<tr>
<td align="right">用户名：</td>
<td><input type="text" name="username"></td>
<td><span id="namemsg">*</span></td>
</tr>
<tr>
<td align="right">密码：</td>
<td><input type="password" name="pwd"></td>
<td><span id="pwdmsg">*</span></td>
</tr>
<tr>
<td align="right">确认密码：</td>
<td><input type="password" name="pwd1"></td>
<td><span id="pwd1msg">*</span></td>
</tr>
<tr>
<td align="right">手机号：</td>
<td><input type="text" name="phone"></td>
<td><span id="iphone1">*</span></td>
</tr>
<tr>
<td align="right">座机号：</td>
<td><input type="text" name="phone1"></td>
<td><span id="iphone2">*</span></td>
</tr>
<tr>
<td align="right">身份证号：</td>
<td><input type="text" name="sfzid"></td>
<td><span id="sfzmsg">*</span></td>
</tr>
<tr>
<td colspan="3">
<input type="submit" name="sub" value="注册">
<input type="reset" name="ret" value="重置" onclick="test1()">
</td>
</tr>
</form>
</table>
<script type="text/javascript">
//用户名验证
document.form1.username.onkeyup=function(){
var reg=/^[a-zA-Z]{1}[A-Z|a-z|0-9]{5,29}/;
if(reg.test(this.value)&&this.value.length>=6&&this.value.length<=30){
document.getElementById("namemsg").innerHTML="输入正确";
}else{
document.getElementById("namemsg").innerHTML="<img src=‘错误.jpg‘ width=‘15‘ height=‘15‘>";
}
}
//密码验证
document.form1.pwd.onkeyup=function(){
var reg1=/[A-Za-z]+[0-9]+/;
if(reg1.test(this.value)&&this.value.length>=6&&this.value.length<=8){
document.getElementById("pwdmsg").innerHTML="输入正确";
}else{
document.getElementById("pwdmsg").innerHTML="<img src=‘错误.jpg‘ width=‘15‘ height=‘15‘>";
}
}
//确认密码
document.form1.pwd1.onkeyup=function(){
if(this.value==document.form1.pwd.value&&this.value!=""){
document.getElementById("pwd1msg").innerHTML="输入正确";
}else{
document.getElementById("pwd1msg").innerHTML="<img src=‘错误.jpg‘ width=‘15‘ height=‘15‘>";
}
}
//手机号验证
document.form1.phone.onkeyup=function(){
var reg2=/^(13|14|15|17|18)[0-9]{9}/;
if(reg2.test(this.value)&&this.value.length==11){
document.getElementById("iphone1").innerHTML="输入正确";
}else{
document.getElementById("iphone1").innerHTML="<img src=‘错误.jpg‘ width=‘15‘ height=‘15‘>";
}
}
//座机号验证
document.form1.phone1.onkeyup=function(){
var reg3=/^[0-9]{3,4}(\-{1})[0-9]{7,8}/;
if(reg3.test(this.value)&&this.value.length==13||this.value.length==12){
document.getElementById("iphone2").innerHTML="输入正确";
}else{
document.getElementById("iphone2").innerHTML="<img src=‘错误.jpg‘ width=‘15‘ height=‘15‘>";
}
}
//身份证号验证
document.form1.sfzid.onkeyup=function(){
var reg4=/^\d{17}[(0-9)|X|x ]{1}/;
if(reg4.test(this.value)&&this.value.length==18){
document.getElementById("sfzmsg").innerHTML="输入正确";
}else{
document.getElementById("sfzmsg").innerHTML="<img src=‘错误.jpg‘ width=‘15‘ height=‘15‘>";
}
}
//注册按钮方法
function test(){
var str="输入正确"
if(document.getElementById("namemsg").innerHTML!==str){
document.getElementById("namemsg").innerHTML="<img src=‘错误.jpg‘ width=‘15‘ height=‘15‘>";
document.form1.username.focus();
document.form1.username.value="";
return false;
}
if(document.getElementById("pwdmsg").innerHTML!==str){
document.getElementById("pwdmsg").innerHTML="<img src=‘错误.jpg‘ width=‘15‘ height=‘15‘>";
document.form1.pwd.focus();
document.form1.pwd.value="";
return false;
}
if(document.getElementById("pwd1msg").innerHTML!==str){
document.getElementById("pwd1msg").innerHTML="<img src=‘错误.jpg‘ width=‘15‘ height=‘15‘>";
document.form1.pwd1.focus();
document.form1.pwd1.value="";
return false;
}
if(document.getElementById("iphone1").innerHTML!==str){
document.getElementById("iphone1").innerHTML="<img src=‘错误.jpg‘ width=‘15‘ height=‘15‘>";
document.form1.phone.focus();
document.form1.phone.value="";
return false;
}
if(document.getElementById("iphone2").innerHTML!==str){
document.getElementById("iphone2").innerHTML="<img src=‘错误.jpg‘ width=‘15‘ height=‘15‘>";
document.form1.phone1.focus();
document.form1.phone.value="";
return false;
}
}
</script>
</body>
</html>
原文地址：https://www.cnblogs.com/wangweizhang/p/8318308.html
时间： 2024-08-24 08:35:59