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

所属分类: 网络编程 / 正则表达式 阅读数: 365
收藏 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表单的方法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!

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

正则表达式验证IPV4地址功能实例分析

这篇文章主要介绍了正则表达式验证IPV4地址功能,结合实例形式分析了IPV4地址验证的原理及具体实现技巧,需要的朋友可以参考下
收藏 0 赞 0 分享

正则表达式教程之前后查找lookaround详解

这篇文章主要介绍了正则表达式教程之前后查找lookaround,结合具体问题分析了向前查找及向后查找功能的实现技巧与注意事项,需要的朋友可以参考下
收藏 0 赞 0 分享

正则匹配密码只能是数字和字母组合字符串功能【php与js实现】

这篇文章主要介绍了正则匹配密码只能是数字和字母组合字符串功能,涉及针对字符、数字等正则操作相关技巧,并给出了php与js实现示例,需要的朋友可以参考下
收藏 0 赞 0 分享

正则验证不能含有中文的实现方法【jQuery与java实现】

这篇文章主要介绍了正则验证不能含有中文的实现方法,结合jQuery与java两种实现方法分析了针对中文的正则验证操作技巧,需要的朋友可以参考下
收藏 0 赞 0 分享

JS 密码强度校验的正则表达式(简单且好用)

最近在做一个通行证的项目,在项目中有这样的需求,注册模块中输入密码需要显示密码强度,今天小编给大家分享JS 密码强度校验的正则表达式,简单好用,需要的朋友参考下
收藏 0 赞 0 分享

iOS 正则表达式判断纯数字及匹配11位手机号码的方法

这篇文章主要介绍了iOS 正则表达式判断纯数字及匹配11位手机号码的方法,判断手机号码是否正确的方法很多,我是用正则表达式来完成匹配的,具体方法,大家参考下本文
收藏 0 赞 0 分享

正则表达式(简单易懂篇)

正则表达式是一种可以用于模式匹配和替换的强大工具。这篇文章主要介绍了正则表达式(简单易懂篇),需要的朋友参考下
收藏 0 赞 0 分享

正则表达式实现匹配连续数字的方法

我这两天刚刚学正则表达式。我觉的正则对连续的字符匹配很简单,但是对连续的一段数字匹配就不是很好。正好最近有朋友问了匹配连续数字的正则,就帮忙写了一下,算是当作温习一下吧。下面这篇文章就主要介绍了正则表达式实现匹配连续数字的方法。
收藏 0 赞 0 分享

正则表达式简介及在C++11中的简单使用教程

正则表达式(regular expression)是计算机科学中的一个概念,又称规则表达式,通常简写为regex、regexp、RE、regexps、regexes、regexen。接下来通过本文给大家介绍正则表达式简介及在C++11中的简单使用教程,一起通过本文学习吧
收藏 0 赞 0 分享

正则表达式实现最小匹配功能的方法

这篇文章主要介绍了正则表达式实现最小匹配功能的方法,结合具体实例形式分析了正则表达式最小匹配功能的原理与实现技巧,需要的朋友可以参考下
收藏 0 赞 0 分享
查看更多