正则表达式-用户注册-用户登录-页面 2022-7-27

QSJZSDLZ

已于 2022-07-27 08:38:10 修改

阅读量323

点赞数

文章标签：前端

于 2022-07-27 08:37:50 首次发布

本文链接：https://blog.csdn.net/ZSDLZ37/article/details/125987133

版权

本文介绍了正则表达式在用户注册和登录时的应用，讲解了如何使用规则字符串进行内容匹配，如/s匹配空格，/d匹配数字，/w匹配字母和数字，以及点号"."匹配任意符号、数字和字母。同时，探讨了匹配字符长度的规则，如*、+、？、{n}和{n，m}等，这些规则对于确保输入的正确性和安全性至关重要。

摘要由CSDN通过智能技术生成

正则表达式

规则字符串

匹配内容

/s 匹配空格

/d 匹配任意数字 0-9

/w 匹配任意字母/数字 A-Z a-z 0-9

. 匹配任意符号/数字/字母 A-Z a-z 0-9 任意符号

匹配字符长度

* 任意长度

+ 至少1个

？ 0或1个

{n} 必须n个

{n，m} 必须n-m个

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>正则表达式</title>
  <script src="jquery/jquery-3.6.0.js"></script>
</head>
<body>
<input type="text" id="code" placeholder="正则表达式">
<button id="btn-valid">正则校验</button>
</body>
<script>
  // var reg = /^\d{3}\s+\d{3,8}$/ //123 12345678
  // var reg = /^\d{3}\-\d{3,8}$/  //123-12345678
  // var reg = /^[0-9a-zA-Z\_]$/  //a _ 1
  // var reg = /^[0-9a-zA-Z\_\$][0-9a-zA-Z\_\$]{0,19}$/ //0-20个任意0-9a-zA-Z字符
  // var reg =/^1(3[0-9]|5[0-9]|7[0-9]|8[0-9]|9[0-9])\d{8}$/ //手机号校验
  // var reg = /^[1-9]\d{5}(18|19|20(3\d))\d{2}((0[1-9])|(1[0-2]))(([0-2][1-9])10|20|30|31)\d{3}[0-9Xx]$/
  $('#btn-valid').click(function (){
    var code = $('#code').val()
    if(reg.test(code)){
      console.log('字符串合法')
    }else {
      console.log('字符串不合法')
    }
  })
</script>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>用户注册</title>
  <script src="jquery/jquery-3.6.0.js"></script>
  <script src="bootstrap-3.4.1/bootstrap-3.4.1/dist/js/bootstrap.js"></script>
  <link rel="stylesheet" href="bootstrap-3.4.1/bootstrap-3.4.1/dist/css/bootstrap.css">

  <script>
    // js 或 jq 代码写在html 上面 是百分之百 不安全的
    // 写在 html 下面 有可能不安全
    // 写在$(function (){})这个回调函数里面百分之百安全
    // $(document).ready(function (){}) 和 $(function(){})  两种写法
    $(function (){
      function hasError($node,msg){
        $node.parent().addClass("has-error")
        $node.next().addClass("glyphicon-remove")
        $node.next().next().text(msg)
      }
      function hasWarning($node,msg){
        $node.parent().addClass("has-warning")
        $node.next().addClass("glyphicon-warning-sign")
        $node.next().next().text(msg)
      }
      function hasSuccess($node,msg){
        $node.parent().addClass("has-success")
        $node.next().addClass("glyphicon-ok")
        $node.next().next().text(msg)
      }
      function clear($node){
        $node.parent().removeClass("has-error")
        $node.parent().removeClass("has-success")
        $node.parent().removeClass("has-warning")
        $node.next().removeClass("glyphicon-remove")
        $node.next().removeClass("glyphicon-ok")
        $node.next().removeClass("glyphicon-warning-sign")
        $node.next().next().text("")
        // $node.select()
        $node.val('')
      }

      $('#username').blur(function (){
        var username = $('#username').val();
        // if (username == null || username ==''){ //等于  if (!username){
        if (!username){
          hasError($(this),'不能为空')//$node =$(this)
        }else {
          hasSuccess($(this),'success')
        }
      }).focus(function (){
        clear($(this))
      })
      $('#password,#confirmPassword').blur(function (){
        var reg =/^.*(?=.{6,})(?=.*\d)(?=.*[A-Z])(?=.*[a-z])(?=.*[!@#$%^&*? ]).*$/
        var currentPassword = $(this).val()
        if (currentPassword.length<6){
          hasError($(this),'密码不能少于6位')
          return;
        }
        if (!reg.test(currentPassword)){
          hasWarning($(this),'密码强度：弱！')
        }else{
          hasSuccess($(this),'Success!')
        }
        var password =$('#password').val()
        var confirmPassword = $('#confirmPassword').val()
        if (password.length >= 6 && confirmPassword.length>=6 ){
          if (password === confirmPassword){
            if (reg.test(password) && reg.test(confirmPassword)) {
              if (!$('#password').hasClass('has-success')) {
                hasSuccess($('#password'), 'Success!')
              }
              if (!$('#confirmPassword').hasClass('has-success')) {
                hasSuccess($('#confirmPassword'), 'Success!')
                }
            }else{
              if (!$('#password').hasClass('has-warning')) {
                hasWarning($('#password'), '密码强度：弱！')
              }
              if (!$('#confirmPassword').ha