使用JavaScript的正则表达式和前端跑秒

最新推荐文章于 2022-01-26 16:55:27 发布

叱咤少帅（少帅）

最新推荐文章于 2022-01-26 16:55:27 发布

阅读量226

点赞数

分类专栏： # Node.js & TypeScript

本文链接：https://blog.csdn.net/knight_zhou/article/details/114175118

版权

Node.js & TypeScript 专栏收录该内容

16 篇文章 0 订阅

订阅专栏

前言

任何语言都有正则表达式，JS的正则表达式一般用于输入处理、表单验证等场景。有时候为了简化代码，我们可以使用jQuery的插件处理，那样就不需要用原生的JS写很多代码去实现了。

简单举例

<script>
    str = "hello";
    document.write(str.search("l"));

</script>

前端跑秒

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>前端跑秒</title>
 
</head>
<body>
    <button onclick="jishi()"> 前端计时</button>
    <span id="test"></span>

</body>
<script>
    let time = 0
    function beginRun(){
        this.runTime = setInterval(() => {
            time++
            document.getElementById('test').innerText = time
        }, 1000)
    }
    function endRun(){
        clearInterval(this.runTime)
    }
    function jishi(){  
        beginRun()
        setTimeout(() => {
            endRun()
        }, 10000)
       
    }

    // 请求成功就停止endrun
    


</script>

</html>

表单验证

（1）思路

当输入的表单数据不符合要求时，如何编写脚本来进行提示？

获得表单元素值
使用JavaScript的一些方法对数据进行判断
当表单提交时，触发 onsubmit 事件，对获取的数据进行验证

<script>
	// 1. 获取表单标签
	var form = document.getElementById('loginForm')
	
	// 2. 动态绑定表单事件，onsubmit 事件可以由 submit 按钮触发
	form.onsubmit = function(){
	  // 3. 开始表单验证
	  var txtUserName = document.getElementById('userName').value  // 获取用户名
	  var txtUserPassword = document.getElementById('userPassword').value  // 获取密码
	
	  if(txtUserName == ''){
	    alert('用户名不能为空!')
	    return false
	  }
	  else if(txtUserPassword == ''){
	    alert('密码不能为空!')
	    return false
	  } else {
	    alert('表单提交')
	  }
	}
</script>
<body>
	<form class="" action="" id="loginForm">
	  用户名: <input type="text" name="userName" id="userName"><br/>
	  密码: <input type="password" name="userPassword" id="userPassword"><br/>
	  <input type="submit" name="" value="提交登陆">
	  <input type="button" name="" value="普通登陆" id="btnLogin">
	</form>
</body>

（2）表单验证案例

验证 Email
- Email 不能为空
- Email 格式不正确，必须包含@和.

<script type="text/javascript">
  window.onload = function(){
    // 1. 获取表单标签
    var form = document.getElementById('loginForm')

    // 2. 动态绑定表单事件，onsubmit 事件可以由 submit 按钮触发
    form.onsubmit = function(){
      // 3. 开始表单验证
      var UserEmail = document.getElementById('userEmail').value  // 获取用户名
      var apos = UserEmail.indexOf('@');
      var dotpos = UserEmail.lastIndexOf('.');

      if(UserEmail == ''){
        alert('邮箱不能为空!')
        return false
      }
      else if(apos<1||dotpos-apos<2){
        // 输入的邮箱必须包含“@”符号和点号“.”同时“@”不可以是邮件地址的首字符，并且“@”之后需有至少一个“.”号
        alert('格式不对')
        return false
      } else {
        alert('表单提交')
      }
    }
  }
</script>
<body>
  <form class="" action="" id="loginForm">
    邮箱: <input type="text" name="userEmail" id="userEmail"><br/>
    <input type="submit" name="" value="提交登陆">
  </form>
</body>