JavaScript表单验证

绝地灬酷狼 2022-07-11 15:26 231阅读 0赞

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

首先，是html部分

<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()" οninput="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()" οninput="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()" οninput="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()" οninput="checkPhone()">
               <span class="default" id="phoneErr">请输入11位手机号码</span>
           </div>
           
           <div>
             <button type="submit" class="divBtn">注册</button>
           </div>
         </form>
         </div>
      </div>

接着，为其加上CSS样式

<style type="text/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;
    	   }
    </style>

最后是JS部分

<script type="text/javascript">
       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;
    			 }
    	   }
     </script>

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

![20170203140304852][]

填写数据，可以！

![20170203140346868][]

[20170203140304852]: /images/20220711/ac60cc56f35241af8de0cbfe7d62df34.png
[20170203140346868]: /images/20220711/eeabbfd9b48940038c055e0d76200c1f.png

发表评论取消回复

表情：

评论列表（有 0 条评论，231人围观）

还没有评论，来说两句吧...

相关阅读

相关 JavaScript正则表达表单验证

箱提交、身份证、手机号 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> ...

淡淡的烟草味﹌/ 2024年04月18日 22:42/ 0 赞/ 64 阅读

相关使用异步 JavaScript 进行表单验证

使用异步 JavaScript 进行表单验证是现代 Web 应用程序中的一项常见任务。使用异步 JavaScript 进行表单验证涉及使用客户端 JavaScript 来验

阳光穿透心脏的1/2处/ 2024年03月16日 13:08/ 0 赞/ 51 阅读

相关 html5 表单验证 api,JavaScript 验证 API

实例如果输入字段中的数字大于 100(input 元素的 max 属性)，则显示一条消息： rangeOverflow 属性 OK function myFuncti

小鱼儿/ 2022年10月09日 02:34/ 0 赞/ 3 阅读

相关 JavaScript表单验证示例

JavaScript表单验证示例 HTML表单（form）通常用于收集用户信息，例如姓名，电子邮件地址，位置，年龄等。但是很可能某些用户可能不会输入您期望的数据。HT

淡淡的烟草味﹌/ 2022年09月13日 14:23/ 0 赞/ 154 阅读

相关 javaScript表单验证大全

这不是我原创的转载自http://www.iteye.com/topic/1113704 1. 长度限制 <script> function test()

比眉伴天荒/ 2022年08月14日 00:00/ 0 赞/ 179 阅读

相关 JavaScript表单验证

用原生JS写一个简单的表单验证首先，是html部分 <div class="divAll"> <div id="titles">新用户注册<

绝地灬酷狼/ 2022年07月11日 15:26/ 0 赞/ 232 阅读

相关表单验证

java script验证表单时常用： "^-\[0-9\]\\[1-9\]\[0-9\]\＄"　　//负整数 "^-?//d+＄"　　　　//整

ゝ一纸荒年。/ 2022年06月13日 07:54/ 0 赞/ 273 阅读

相关 Javascript（五）javascript实现表单验证

表单验证为了保证用户提交的信息都是正确的，保证系统的安全性，验证是必不可少的，验证一般分为两种方式。客户端验证：直接在客户端执行JS进行验证，验证的过程中和服

Myth丶恋晨/ 2022年05月17日 03:00/ 0 赞/ 247 阅读

相关【JavaScript】------- JavaScript form表单验证实用函数详解

> javascript 验证表单工具 function obj$(id) //根据id得到对象 functio

迈不过友情╰/ 2022年02月14日 10:23/ 0 赞/ 207 阅读

相关 javascript表单验证

js代码 <script type="text/javascript"> var userFlag = false;//true时表示用户名验证

谁借莪１个温暖的怀抱￠/ 2021年12月08日 16:41/ 0 赞/ 540 阅读