JavaScript表单验证及正则表达式

最新推荐文章于 2022-03-29 19:03:35 发布

尝胆

最新推荐文章于 2022-03-29 19:03:35 发布

阅读量442

点赞数

分类专栏：前端文章标签： javascript

本文链接：https://blog.csdn.net/qq_38809741/article/details/88267018

版权

前端专栏收录该内容

23 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>用户注册</title>
    <link rel="stylesheet" href="register.css" />
	   <!--
        1.概念
  		  正则表达式，又称规则表达式。
                       通常被用来检索、替换那些符合某个模式(规则)的文本。
                     数据

        2.用法:
        var reg = /正则表达式/;
        reg.test(str);

        3.案例:
        var pattern  = /规则/;
        if(pattern.test(验证字符串)==true){
               alert("符合要求！");
               return true;
        }else{
               alert("格式非法！");
               return false;
        }
         -->
     <!--js校验表单后提交表单的三种方法总结
        1.<input type=submit name="submit1" value="注册" onclick="return check(this.form)">
        2.<form action="login" method="post" onsubmit="return check(this)">
        3.input type=button name="submit1" value="登陆" onclick="check(this.form)">
        -->
        
	<!-- var pattern = /^[a-zA-Z]{1}[a-zA-Z0-9]{5,19}$/; //验证用户名
		 var pattern_pwd = /^[a-zA-Z0-9]{6,20}$/; //验证密码
		 var pattern_email= /\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*/; //验证邮箱
		 var pattern_phone=/^[1-9]\d{10}$/; //验证手机号
	-->
        <script>
        	function checkAll(){
        		
        		//定义正则表达式
        		var pattern_userName=/^[a-zA-Z][a-zA-Z0-9_]{4,15}$/;
        		var pattern_pwd=/^[a-zA-Z]\w{5,17}$/;
        		var pattern_email= /\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*/; //验证邮箱
		        var pattern_phone=/^[1-9]\d{10}$/; //验证手机号
		        
		        //获取输入框的值
		        var userName=document.getElementById("userName").value;
		        var userPwd=document.getElementById("userPwd").value;
		        var email=document.getElementById("email").value;
        		var phone=document.getElementById("phone").value;
        		//清空提示信息
        		var error=document.getElementsByClassName("error");
        		   for(var i=0;i<error.length;i++){
        		   	error[i].innerText="";
        		   	
        		   }
        		//判断用户名、密码、邮箱、手机号是否符合规范
        		if(!pattern_userName.test(userName.trim())){
        			document.getElementById("errorName").innerText="字母开头，允许5-16字节，允许字母数字下划线";
        			return false;
        		}else if(!pattern_pwd.test(userPwd.trim())){
        			document.getElementById("errorPwd").innerText="以字母开头，长度在6~18之间，只能包含字母、数字和下划线";
        			return false;
        		}else if(!pattern_email.test(email.trim())){
        			document.getElementById("errorEmail").innerText="邮箱格式不正确";
        			return false;
        		}else if(!pattern_phone.test(phone.trim())){
        			document.getElementById("errorPhone").innerText="电话格式不正确";
        			return false;
        	}else{
        		 
        		    //表示验证通过
        		    return true;
        	}
        	}
        </script>
</head>
<body>
    <div class="container">
    	<!--onsubmit事件：当表单提交以后，执行表单验证方法-->
        <form name="form1" action="success.html" method="post" onsubmit="return checkAll();">
            <fieldset>
                <legend><strong>用户注册</strong></legend>
                <div class="field">
                    <label for="userName">账号:</label>
                    <input type="text" name="username" id="userName" size="25" placeholder="字母开头数字或下划线，6-20位" maxlength="20" />
                    <span class="error" id="errorName"></span>
                </div>
                <div class="field">
                    <label for="userPwd">密码:</label>
                    <input type="password" name="userpwd" id="userPwd" size="25" value="" placeholder="请输入密码"
                           maxlength="20" />
                    <span class="error" id="errorPwd"></span>
                </div>
               
                <div class="field">
                    <label>性别:</label>
                    <span style="display:inline-block;width:200px; text-align:left;">
                        <input type="radio" checked="checked" name="gender" id="male" value="" />男
                        <input type="radio" name="gender" id="female" value="" />女
                    </span>
                </div>
              
                <div class="field">
                    <label for="email">常用邮箱:</label>
                    <input type="email" name="email" size="25" id="email" placeholder="example@163.com"/>
                    <span class="error" id="errorEmail"></span>
                </div>
                <div class="field">
                    <label for="phone">手机号:</label>
                    <input type="text" name="phone" id="phone" size="25" value="" placeholder="请输入11位手机号"/>
                    <span class="error" id="errorPhone"></span>
                </div>
              
                <div class="contorl">
                    <input type="submit" name="submit" id="btnSubmit" value="注册" />
                    &nbsp;&nbsp;&nbsp;&nbsp;
                    <input type="reset" name="reset" id="btnReset" value="重置" />
                </div>
            </fieldset>
        </form>

    </div>
</body>
</html>