您的位置: 首页  >  文章  >  js表单验证

js表单验证

分类: 文章 • 2023-03-06 17:50:46

简单的js表单验证

样式结果图如下：


js表单验证



js验证结果图如下：

js表单验证


js表单验证




html代码：

<!DOCTYPE html>

<html lang="en">


<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Study</title>
<link rel="stylesheet" type="text/css" href="../css/2017-07-18.css" />
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.0.js"></script>
<script type="text/javascript" src="../js/2017-07-19.js"></script>
</head>
<body>
<div class="wrapper">
<form action="MAILTO:[email protected]" method="post" enctype="text/plain" onsubmit="return checkForm()">
<h2>读者调查表</h2>
<div>
<span>姓名：</span><input type="text" id="name" placeholder="请输入姓名..." size="20" onfocus="checkNameFocus()" onblur="checkNameBlur()">
<div id="namePrompt" class="js"></div>
</div>
<div>
<span>学号：</span><input type="text" id="num" placeholder="请输入学号..." size="20" onfocus="checkNumFocus()" onblur="checkNumBlur()">
<div id="numPrompt" class="js"></div>
</div>
<span>性别：</span><label><input type="radio" name="sex" value="男" checked>男</label>
<label><input type="radio" name="sex" value="女">女</></label>
</div>
<div>
<span>邮箱：</span><input type="text" id="email" placeholder="请输入邮箱..." size="20" onfocus="checkEmailFocus()" onblur="checkEmailBlur()">
<div id="emailPrompt" class="js"></div>
</div>
<fieldset class="classes" id="course" onchange="checkCourse()">
<legend>获得途径</legend>
<label><input name="Class" type="checkbox" value="" />邮局订阅</label>
<label><input name="Class" type="checkbox" value="" />书刊亭</label>
<label><input name="Class" type="checkbox" value="" />书店</label>
<label><input name="Class" type="checkbox" value="" />杂志订阅</label>
<label><input name="Class" type="checkbox" value="" />其他</label>
</fieldset>
<span>最喜欢的书籍类型是？</span>
<select name="teacher"> 
   <option value="0">玄幻</option> 
   <option value="0">养生</option> 
   <option value="0">穿越</option> 
   <option value="0">都市</option> 
   <option value="0">修仙</option> 
</select>
<p class="else">您对本刊有何建议？</p>
<textarea id="message" name="message" placeholder="请输入对我们的建议..." cols="50" rows="10"></textarea>
<div class="btn">
<button type="submit">提交</button>
<button type="reset">重置</button>
</div>
</form>
</div>
</body>
</html> 
1.当鼠标放在姓名文本框时，提示文本及样式。
2.当鼠标离开姓名文本框时，提示文本及样式       汉字 
3.当鼠标放在学号文本框时，提示文本及样式。
4.当鼠标离开学号文本框时，提示文本及样式      只能是数字
5.邮箱的验证，必须符合邮箱的格式。
6.表单提交时验证表单内容输入的有效性。
其中用到了正则表达式来匹配。
匹配简体中文的正则是^[\u4e00-\u9fa5]+$
匹配邮箱格式的正则是
[\w!#$%&'*+/=?^_`{|}~-]+(?:\.[\w!#$%&'*+/=?^_`{|}~-]+)*@(?:[\w](?:[\w-]*[\w])?\.)+[\w](?:[\w-]*[\w])?

css：代码

body {
height: 100%;
background-color: #f8f8f8;
font-size:16px;
font-weight:500;
}
*{border-radius: 5px;}
.wrapper {
width: 500px;
height:100%;
background-color: #f4f4f4;
margin: 0 auto;
border-radius: 5px;
margin-top:15px;
}
.wrapper .js{color:red;display: inline-block;}
.wrapper form h2 {
text-align: center;
padding-top:25px ;
padding-bottom: 25px;
    background-color:lightgreen;
    border-radius: 10px;
    color: #868686;
}
form span{margin-left: 25px;}
form input[type="text"]{width:150px;height: 30px; line-height: 30px;margin:10px;}
form input[type="radio"]{margin:10px;}
form fieldset{margin: 20px 25px;height:200px;background-color:#F8F8F8;}
form fieldset legend{color:#868686;text-align: center;width: 80px;height: 40px;line-height: 40px;background-color:#90EE90;border-radius:5px;}
form fieldset label{display: block;margin-bottom:15px;}
form select{width:120px;height: 30px;line-height:30px;background-color: #fffff;border-radius:5px;margin-left: -5px;}
form p.else{text-align: center;}
form textarea{margin-left: 25px;background:#F8F8F8;width: 450px;}
form .btn{margin:20px auto;width:170px;}
form .btn button{color:#868686;width:80px; height: 40px;line-height:40px;background-color: #90EE90;border:none;outline:none;border-radius: 5px;}
form .btn button:hover{background-color:lightgray;color: #000000;}
form .btn button:active{background-color: #90EE90;color: #868686;}



js代码     

  // 通过getElementById得到相应元素  
function $(id){  
    return document.getElementById(id);  
}  
// 当鼠标放在姓名文本框时，提示文本及样式。  
function checkNameFocus(){  
    var userNameId=$("name");  
    userNameId.className="import_prompt";  
    var namePrompt=$("namePrompt");  
    namePrompt.innerHTML="*请输入汉字";  
}  
/*当鼠标离开姓名文本框时，提示文本及样式*/   
function checkNameBlur(){  
    var namePrompt=$("namePrompt");  
    namePrompt.innerHTML=null;  
    var reg1=/^[\u4e00-\u9fa5]+$/;//匹配简体中文的正则表达式  
    var name=$("name").value;  
    // 先查看是否为空  
    if(name==""){  
        namePrompt.innerHTML="名字不能为空！"  
        return false;  
    }  
    else if(!reg1.test(name)){  
        var trueimg=document.createElement("img");  
        trueimg.src="../img/fail.png";  
        trueimg.width="15";  
        namePrompt.appendChild(trueimg);  
        return false;  
    }else{  
        var trueimg=document.createElement("img");  
        trueimg.src="../img/sucess.png";  
        trueimg.width="15";  
        namePrompt.appendChild(trueimg);  
        return true;  
    }  
}  
//当鼠标放在学号文本框时，提示文本及样式。  
function checkNumFocus(){  
    var studentNum=$("num");  
    studentNum.className="import_prompt";  
    var numPrompt=$("numPrompt");  
    numPrompt.innerHTML="*必须是0-9的10位数字哦~";  
}  
/*当鼠标离开学号文本框时，提示文本及样式*/  
function checkNumBlur(){  
    var numPrompt=$("numPrompt");  
    numPrompt.innerHTML=null;  
    var reg2=/^\d{10}$/;  
    var xuehao=$("num").value;  
    //先验证是否为空  
    if(xuehao==""){  
        numPrompt.innerHTML="学号不能为空！";  
        return false;  
    }  
    else if(!reg2.test($("num").value)){//好奇怪，使用变量就变成空的了，在外边就有值。  
        var trueimg=document.createElement("img");  
        trueimg.src="../img/fail.png";  
        trueimg.width="15";  
        numPrompt.appendChild(trueimg);  
        return false;  
    }  
    else{  
        var trueimg=document.createElement("img");  
        trueimg.src="../img/sucess.png";  
        trueimg.width="15";  
        numPrompt.appendChild(trueimg);  
        return true;  
    }  
}  
//邮箱的验证，必须符合邮箱的格式。  
function checkEmailFocus(){  
    var email=$("email");  
    email.className="import_prompt";  
    var emailPrompt=$("emailPrompt");  
    emailPrompt.innerHTML="*请输入您常用的电子邮箱";  
}  
function checkEmailBlur(){  
    var emailPro=$("emailPrompt");;  
    emailPrompt.innerHTML=null;  
    var emailValue=$("email").value;  
    var reg3=/[\w!#$%&'*+/=?^_`{|}~-]+(?:\.[\w!#$%&'*+/=?^_`{|}~-]+)*@(?:[\w](?:[\w-]*[\w])?\.)+[\w](?:[\w-]*[\w])?/;  
    //先验证是否为空  
    if(emailValue==""){  
        emailPrompt.innerHTML="邮箱不能为空！";  
        return false;  
    }  
    else if(!reg3.test(emailValue)){  
        var trueimg=document.createElement("img");  
        trueimg.src="../img/fail.png";  
        trueimg.width="15";  
        emailPrompt.appendChild(trueimg);  
        return false;  
    }  
    else{  
        var trueimg=document.createElement("img");  
        trueimg.src="../img/sucess.png";  
        trueimg.width="15";  
        emailPrompt.appendChild(trueimg);  
        return true;  
    }  
}  
//验证复选框  
function checkCourse(){    
    var courses=$("course");  
    var cbs = courses.getElementsByTagName("input");    
    var b = false;    
    for(var i=0;i<cbs.length;i++){    
        if(cbs[i].type == "checkbox" && cbs[i].checked){    
            
            b = true;    
        }    
    }    
    if(!b){    
        alert("请至少选择一个途径！！！");    
        return false;    
    }    
}    
//表单提交时验证表单内容输入的有效性  
function checkForm(){  
      var flagName=checkNameBlur();  
      var flagNum=checkNumBlur();  
      var flagEmail=checkEmailBlur();  
      var flagCourse=checkCourse();  
           
      if(flagName==true &&flagNum==true &&flagEmail==true &&flagCourse==true){  
          return true;  
       }  
       else{  
            return false;  
         }     
    }    


参照网上案列完成   有不对之处，请指出 谢谢！


相关推荐