用JavaScrip正则表达式验证form表单的方法

所属分类: 网络编程 / 正则表达式 阅读数: 357
收藏 0 赞 0 分享

document:标签之间

location:url

history:前进后退




<html> 
 <head> 
  <script type="text/javascript"> 
   function show() 
   { 
    //弹出一个提示框 
    window.alert("hh"); 
   } 
   //将show方法绑定到按钮上 
   window.onload=function() 
   { 
    //定位到按钮 
    var buttonElement=document.forms[0].mybtn; 
    //动态绑定show方法 
    buttonElement.onclick=show; 
    //show如果加()则一加载网页就弹出提示框 
   } 
   function validateForm() 
   { 
    var loginform=document.forms[1]; 
    var username=trim(loginform.username.value); 
    var password=trim(loginform.password.value); 
    var email=trim(loginform.email.value); 
//    alert("替代前长度:"+username.length); 
//    username=trim(username); 
 //   alert("替代后长度:"+username.length); 
    //判断用户名必填: 
    if(username.length==0) 
    { 
     alert("用户必填"); 
    } 
    else if(!/^[a-zA-Z0-9]+$/.test(username)) 
    { 
     alert("用户名必须是英文字母"); 
    } 
    else if(password.length==0) 
    { 
     alert("密码必填"); 
    } 
    else if(!/^[0-9]{6}$/.test(password)) 
    { 
     alert("密码必须为6位数字"); 
    } 
    else if(email.length==0) 
    { 
     alert("邮箱必填"); 
    } 
    else if(!/^\w+@\w+(\.\w+)+$/.test(email)) 
    { 
     alert("邮箱格式不正确"); 
    } 
    return false; 
   } 
   //自定义一个去空格的参数 
   function trim(s) 
   { 
    //s.REPLACE(正则表达式,替换的字符) 
    s=s.replace(/^\s*$/,""); 
    return s; 
   } 
  </script> 
  <style type="text/css"> 
   .myclass{ 
    position: absolute; 
    left: 400px; 
    top: 150px; 
   } 
  </style> 
 </head>  
 <body> 
  <div class="myclass"> 
  <form action="#" name="myform" method="post"> 
  <input type="button" value="单机" name="mybtn"/> 
  </form> 
  </div> 
  <!--登录页面的表单--> 
  <form action="#" name="loginform" method="post" onsubmit="return validateForm()"> 
  <table border="1" align="center"> 
   <caption>基于js的验证</caption> 
    <tr> 
     <th>用户名:</th> 
     <td><input type="text" name="username"/></td> 
    </tr> 
    <tr> 
     <th>密码:</th> 
     <td><input type="password" name="password"/></td> 
    </tr> 
    <tr> 
     <th>邮箱:</th> 
     <td><input type="text" name="email"/></td> 
    </tr> 
    <tr> 
     <td align="center" colspan="2"> 
      <input type="submit" value="提交" /> 
     </td> 
    </tr> 
  </table> 
  </form> 
 </body> 
</html> 

以上所述是小编给大家介绍的用JavaScrip正则表达式验证form表单的方法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!

更多精彩内容其他人还在看

正则表达式——匹配规则介绍

这篇文章主要介绍了正则表达式——匹配规则介绍,需要的朋友可以参考下
收藏 0 赞 0 分享

JavaScript 中的正则表达式(推荐)

正则表达式通常用于在文本中查找匹配的字符串,js正则表达式在程序开发中应用非常广泛,本文给大家介绍JavaScript 中的正则表达式(推荐),感兴趣的朋友一起学习吧
收藏 0 赞 0 分享

Java正则表达式入门基础篇(新手必看)

这篇文章给大家介绍java正则表达式入门基础篇, 由于正则表达式是一个很庞杂的体系,所以我仅例举些入门的概念,更多的请参阅相关书籍及自行摸索。感兴趣的朋友一起跟着小编来看看吧
收藏 0 赞 0 分享

linux正则表达式awk详解

这篇文章主要介绍了linux正则表达式awk的相关资料,需要的朋友可以参考下
收藏 0 赞 0 分享

notepad++ 等用正则表达式自动添加sql引号的技巧

本篇文章给大家介绍notepad用正则表达式自动添加sql引号的技巧,,需要的朋友可以参考下
收藏 0 赞 0 分享

常见的正则表达式问题

这篇文章主要介绍了常见的正则表达式问题,需要的朋友可以参考下
收藏 0 赞 0 分享

Linux正则表达式特性详解及BRE与ERE的异同点

本篇文章给大家介绍linux正则表达式特性及BRE与ERE的不同,Linux正则表达式(Regular Expression)主要遵从POSIX BRE或者POSIX ERE标准,对linux正则表达式感兴趣的朋友可以参考下本篇文章
收藏 0 赞 0 分享

Linux下如何使用grep命令查找带有tab(退格)的字符

本文给大家介绍linux下如何使用grep命令查找带有tab(退格)的字符,涉及到linux grep 查找带有tab的字符方面的知识,对linux grep tab感兴趣的朋友可以参考下本篇文章
收藏 0 赞 0 分享

WEB开发时常用的正则表达式(PHP和Javascript)

这篇文章主要介绍了WEB开发中最常用最实用的正则表达式及其用法,需要的朋友可以参考下
收藏 0 赞 0 分享

比较全面的C 、Java、JavaScript中的正则表达式详解

正则表达式(Regular Expression) 就是用某种模式去匹配一类字符串的公式。本篇文章给大家介绍C 、Java、JavaScript中的正则表达式,本文介绍的非常全面,感兴趣的朋友一起看看吧
收藏 0 赞 0 分享
查看更多