表单验证与正则表达式

问题：一个注册界面，包括用户名、密码、确认密码、邮箱，对其进行表单验证，要求：
各项都不能为空，
用户名由字母数字下划线组成，不能使用数字开头，
密码长度必须大于6位，但不能超过15位，
密码和确认密码内容需要相同，
邮箱必须符合邮箱的规则

<html>
   <body>
       <form>
           <div>
               用户名：<input type="text" name="username" id="username" />
           </div>
           <div>
               密码：<input type="password" name="password" id="password" onClick="ckpassword()"/>
           </div>
           <div>
               确认密码：<input type="password" name="secondpwd" id="secondpwd" onClick="cksecondpwd()"/>
           </div>
           <div>
               邮箱：<input type="text" name="email" id="email" onClick="ckemail()"/>
           </div>
           <div>
               <input type="button" value="提交" onClick="mysubmit()"/>
           </div>
       </form>
   </body>
   <script type="text/javascript">
       function ckpassword(){
           var username=document.getElementById("username").value;
           if(username==""){
               alert("用户名不能为空！");
               return false;
           }else{
               var reg=/\d/;
               var reg2=/[a-zA-Z0-9_]/;
               if(reg.test(username.substring(0))){
                   alert("用户名不能以数字开头！");
                   return false;
               }else{
                   if(!reg2.test(username)){
                       alert("用户名应该由字母数字下划线组成");
                       return false;
                   }
               }
           }

       };
       function cksecondpwd(){
           var username=document.getElementById("username").value;
           var password=document.getElementById("password").value;
           if(username==""){
               alert("用户名不能为空！");
               return false;
           }else if(password==""){
               alert("密码不能为空！");
               return false;
           }else{
               if(!(password.length>6)){
                   alert("密码长度必须大于6位!");
                   false;
               }else if(!(password.length<=15)){
                   alert("密码长度不能超过15位!");
                   false;
               }
           }
       };
       function ckemail(){
           var username=document.getElementById("username").value;
           var password=document.getElementById("password").value;
           var secondpwd=document.getElementById("secondpwd").value;
           if(username==""){
               alert("用户名不能为空！");
               return false;
           }else if(password==""){
               alert("密码不能为空！");
               return false;
           }else if(secondpwd==""){
               alert("确认密码不能为空！");
               return false;
           }else{
               if(!(password==secondpwd)){
                   alert("密码和确认密码内容需要相同！");
                   return false;
               }
           }
       };
       function mysubmit(){
           var username=document.getElementById("username").value;
           var password=document.getElementById("password").value;
           var secondpwd=document.getElementById("secondpwd").value;
           var email=document.getElementById("email").value;
           if(username==""){
               alert("用户名不能为空！");
               return false;
           }else if(password==""){
               alert("密码不能为空！");
               return false;
           }else if(secondpwd==""){
               alert("确认密码不能为空！");
               return false;
           }else if(email==""){
               alert("邮箱不能为空!");
               return false;
           }else{
               var reg=new RegExp(/([a-zA-Z0-9._-])+@([a-zA-Z0-9_-])+(\.[a-zA-Z0-9_-])+/);
               if(!reg.test(email)){
                   alert("邮箱必须符合邮箱的规则!");
                   return false;
               }
               alert("提交成功");
           }
       }

   </script>
</html>

表单验证与正则表达式相关推荐

JavaScript中的表单验证、正则表达式、数组的使用
表单验证.正则表达式.数组字符串的使用为什么要使用表单验证表单验证的常用步骤提交表单的2种方式文本框对象为什么要使用正则表达式正则表达式的两种创建方法正则表达式的模式正则表达式常用的 ...
HTML(六)——表单验证、正则表达式、事件
1.表单验证<form></form> (1).非空验证(去空格) (2).对比验证(跟一个值对比) (3).范围验证(根据一个范围进行判断) (4).固定格式验证:电话号码, ...
最常用的15个前端表单验证JS正则表达式
2019独角兽企业重金招聘Python工程师标准>>> 在表单验证中,使用正则表达式来验证正确与否是一个很频繁的操作,本文收集整理了15个常用的JavaScript正则表达式,其中包 ...
html表单验证用正则表达式,JavaScript 使用正则表达式进行表单验证的示例代码
搜索热词 JavaScript 表单验证正则表达式大全利用正则表达式判断是否是0-9的阿拉伯数字 function regIsDigit(fData) { var reg = new RegExp(& ...
javascript表单验证及正则表达式
1.表单验证的场景与意义 1.1.降低服务器压力拦截不合格数据,避免直接提交到服务器,可以显著降低服务器开销 1.2.提升用户体验早期的互联网,表单项非常多,注册账号需要填写20+字段.而其中有一 ...
表单验证和正则表达式(一)
首先我们要明白为什么要表单验证? 他的目的就是为了减轻服务器的压力及保证输入的数据符合要求来看下我们常用的表单验证,举例让你有个浅浅的了解日期格式例如:年月日不能为空,月必须在1到12之间,日 ...
html正则表达式表单验证,js正则表达式验证表单【完整版】
效果图: 图(1)初始图图(2)填入信息校验代码如下: 完整验证表单 *{margin: 0;padding: 0;list-style:none;} body{background:#ccc;} ...
js表单验证（常用的正则表达式）
js表单验证的正则表达式,test() 方法用于检测一个字符串是否匹配某个模式,如果字符串中含有匹配的文本,则返回 true,否则返回 false. 语法:let reg=/正则表达式主体/修饰符(可 ...
javascript:正则表达式、一个表单验证的例子
阅读目录本文内容: 正则表达式: 利用正则表达式进行表单验证的例子: 回到顶部本文内容: 正则表达式正则表达式的使用方法正则表达式的特殊匹配字符正则表达式修饰符利用正则表达式进行表单验证的 ...

表单验证与正则表达式

表单验证与正则表达式相关推荐

最新文章

热门文章