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

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)

相关推荐

  • 使用Ajax方法实现Form表单的提交及注意事项

    写在前面的话 在使用form表单的时候,一旦点击提交触发submit事件,一般会使得页面跳转,页面间的跳转等行为的控制权往往在后端,后端会控制页面的跳转及数据传递,但是在某些时候不希望页面跳转,或者说想要将控制权放在前端,通过js来操作页面的跳转或者数据变化. 一般这种异步的操作,我们都会想到ajax方式,因此在实现了功能后就整理了这篇文章,通过ajax方法实现form表单的提交并进行后续的异步操作. 常见的form表单提交方式 <!DOCTYPE HTML PUBLIC "-//W3C/

  • 利用JavaScript阻止表单提交的两种方法

    在JavaScript中,阻止表单默认提交行为的方法有两种,分别是: (1) return false 示例代码 <form name="loginForm" action="login.aspx" method="post"> <button type="submit" value="Submit" id="submit">Submit</button&g

  • javascript下阻止表单重复提交、防刷新、防后退

    1 服务器端的解决方法.这是我最为推荐的方法.优点是判断准确,兼容性最大. 做法:a页面显示表单,然后提交b页面处理,处理完后重定向到c页面显示结果. 1.0 在访问a页面时在session里生成一个标志ID,例如 //伪代码  session("submitID")=random()  然后把这个值写到表单的一个hidden的input里 //伪代码  <%response.write("<input name=submitID2 type=hidden val

  • JS去掉字符串前后空格、阻止表单提交的实现代码

    $.trim(str) jQuery内部实现为: function trim(str){ return str.replace(/^(\s|\u00A0)+/,'').replace(/(\s|\u00A0)+$/,''); } 使用JS和JQuery 阻止表单提交的两种方法 <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gbk">

  • 阻止表单提交按钮多次提交的完美解决方法

    如果表单是通过onsubmit进行Ajax提交,注意将表单提交按钮input type属性设为button,尽量不要设置为submit类型. 另外,在提交事件发出后,最好将提交按钮设置为disabled,防止由于网络延时问题,让用户有机会进行多次点击重复提交. onclick事件里面执行 $(this).attr('disabled','disabled'); 在点击一次后立马将按钮设置为不可使用. 或者向如下方法另行定义一个jQuery函数来进行控制: $("form").submi

  • onsubmit阻止form表单提交与onclick的相关操作

    1. return 的返回值问题,函数中return一旦有返回值,就不在执行下面的语句,直接跳到函数调用的地方.如下PHP函数代码,第一个if条件符合则函数值返回布尔型false,可以返回一个函数的值,并且跳出这个函数:只要遇到return语句,程序就在那一行代码停止执行,执行控制将立刻返回到调用该程序的代码处.function 复制代码 代码如下: function chkinput(form) { if(form.title.value=="") { alert("请输入

  • JavaScript阻止表单提交方法（附代码）

    <body> <form action="clock.html" method="post" onsubmit="return checkLength()"> <p>name:<input type="text" name="user" id="user"></p> <input type="submit&quo

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

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

    document:标签之间 location:url history:前进后退 <html> <head> <script type="text/javascript"> function show() { //弹出一个提示框 window.alert("hh"); } //将show方法绑定到按钮上 window.onload=function() { //定位到按钮 var buttonElement=document.for

  • 解决antd Form 表单校验方法无响应的问题

    antd 的 表单校验方法包括 validateFields 和 validateFieldsAndScroll 里面可以接收校验字段数组, options, 和一个回调函数 from.validateFields([name, age], {}, (err, val)=> {}) 校验全部表单数据 from.validateFields((err, val)=> {}) // 无响应 发现无响应, 无报错, 完全蒙逼了, 排查良久, 添加校验字段后发现可以成功校验, 于是想着大不了我全部手动

  • js实现a标签超链接提交form表单的方法

    本文实例讲述了js实现a标签超链接提交form表单的方法.分享给大家供大家参考.具体实现方法如下: <form action="/home/search" method="get" id="search_form"> <div class="searchBox png" id="searchBox"> <input type="text" id="

  • php实现跨域提交form表单的方法【2种方法】

    本文实例讲述了php实现跨域提交form表单的方法.分享给大家供大家参考,具体如下: 有时我们为了网站安全考虑,我们不允许直接跨域提交form表单数据,如果我们自己有这个需求呢?下面我们来介绍两种跨域的方法解决直接跨域问题. 下面我们来看看两种php跨域提交form的方法 一.通过php curl function curlPost($url,$params) { $postData = ''; foreach($params as $k => $v) { $postData .= $k . '

  • HTML form表单提交方法案例详解

    form表单提交方式总结一下: 一.利用submit按钮实现提交,当点击submit按钮时,触发onclick事件,由JavaScript里函数判断输入内容是否为空,如果为空,返回false, 不提交,如果不为空,提交到由action指定的地址. <script type="text/javascript"> function check(form) { if(form.userId.value=='') { alert("请输入用户帐号!"); for

  • SpringSecurity自定义Form表单使用方法讲解

    目录 背景 实验-HttpBasic 实验-自定义登录页面 实验-自定义登录接口 实验-自定义登录数据参数 实验-自定义登录失败.成功处理器 实验-自定义登录成功跳转页面 实验-自定义退出接口 背景 本系列教程,是作为团队内部的培训资料准备的.主要以实验的方式来体验SpringSecurity的各项Feature. 新建一个SpringBoot项目,起名springboot-security-form,核心依赖为Web,SpringSecurity与Thymeleaf. <dependencie

  • 对于Form表单reset方法的新认识

    HTML中Form表单的reset方法被用来清空用户所输入的内容,以前一直误以为其是单纯的将input等输入项中的值清空. 但实际上不是这样的,reset方法的本质是将input等输入项中的内容还原为属性value中的值,而不是""空值. w3c上是这样说的: 在 HTML 表单中 <input type="reset"> 标签每出现一次,一个 Reset 对象就会被创建. 当重置按钮被点击,包含它的表单中所有输入元素的值都重置为它们的默认值.默认值由

  • jquery实现ajax提交form表单的方法总结

    方法一: 复制代码 代码如下: function AddHandlingFeeToRefund() {            var AjaxURL= "../OrderManagement/AjaxModifyOrderService.aspx";                   alert($('#formAddHandlingFee').serialize());                $.ajax({                    type: "P

  • JSON生成Form表单的方法示例

    JSON表单描述 JSON表单是一个基于React的抽象组件,它可以把JSON数据格式描述的表单转换成项目中的表单,它可以用简短的几行代码,快速的生成Form表单. JSON表单的优点是: 可以快速构建出一个表单 表单的数据.逻辑.视图分离,方便抽离和进一步抽象 提供校验.自动缓存等额外功能,提升录入体验 可以跨项目的共用复杂的表单组件 原始表单的缺点 1:代码量庞大,开发效率低 每次开发一个表单页的时候,都需要重复编写表单组件及其交互事件的代码,这块代码重复编写且与主线业务逻辑无关,除此之外,

  • jQuery ajax提交Form表单实例(附demo源码)

    本文实例讲述了jQuery ajax提交Form表单的方法.分享给大家供大家参考,具体如下: Jquery的$.ajax方法可以实现ajax调用,要设置url,post,参数等. 如果要提交现有Form需要写很多代码,何不直接将Form的提交直接转移到ajax中呢. 以前的处理方法 如Form代码如下: <form id="Form1" action="action.aspx" method="post" > 名称:<input

随机推荐