Js表单 form 正则表达式

长沙xtt

已于 2022-05-25 17:46:32 修改

阅读量380

点赞数

分类专栏： JS 文章标签： javascript css html

于 2022-05-25 17:44:30 首次发布

本文链接：https://blog.csdn.net/weixin_40746230/article/details/124968639

版权

JS 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="style.css" type="text/css" />
    <title>弹窗</title>
    <style>
      body{
        background-color: #eee;
      }
      form{
        max-width: 200px;
        margin: 40px auto;
        background: white;
        padding: 10px;
      }
      input{
        display: block;
        margin: 10px auto;
        padding: 4px;
      }


    </style>
  </head>
  <body>
    <form>
      <input type="text" id="username" placeholder="姓名"/>
      <input type="submit" value="提交"/>
    </form>
    <script src="sandbox.js"></script>
  </body>
</html>

//表单提交事件
//事件添加在form表单上
const form =document.querySelector('.signup-form');
const username=document.querySelector('#username');

form.addEventListener('submit',(e)=>{
  e.preventDefault();
  // console.log(username.value);
  console.log(form.username.value);
  
});

正则表达式 / /g


//正则表达式  /  正文 /g  
// ^  以什么开头
//$   以什么结尾
// 匹配字母  [a-z]
// ^[a-z]$ 以字母开头 字母结尾
// ^[a-zA-Z]$ 以字母开头 字母结尾 可以使大写 也可以是小写
//{4,6}   匹配4到6个字符  至少4个 至多6个
//^[a-zA-Z0-9]{4,6}$   匹配可以包含 字母 大小写 数字0-9 的4个到6个字符的 
//^.{4,6}$  通配符.  字母数字都可以

//表单提交事件
//事件添加在form表单上
const form =document.querySelector('.signup-form');
const username=document.querySelector('#username');

form.addEventListener('submit',(e)=>{
  e.preventDefault();
  // console.log(username.value);
  console.log(form.username.value);
  
});

//正则表达式  /  正文 /g  
// ^  以什么开头
//$   以什么结尾
// 匹配字母  [a-z]
// ^[a-z]$ 以字母开头 字母结尾
// ^[a-zA-Z]$ 以字母开头 字母结尾 可以使大写 也可以是小写
//{4,6}   匹配4到6个字符  至少4个 至多6个
//^[a-zA-Z0-9]{4,6}$   匹配可以包含 字母 大小写 数字0-9 的4个到6个字符的 
//^.{4,6}$  通配符.  字母数字都可以 

//search() 方法用于检索字符串中指定的子字符串，或检索与正则表达式相匹配的子字符串。
//实际开发中用于检验正则 test居多

// const usernames='summer';
// const pattern =/^[a-z]{6,}$/;
// let result=pattern.test(usernames);

// console.log(result) // true
// if(result){
//    console.log('长度符合要求') ;
// }else{
//   console.log('匹配不通过') ;
// }

 const usernames='summer';
 const pattern =/^[a-z]{6,}$/;
let result=usernames.search(pattern);  // 0  -1 

console.log(result);

表单验证

//表单验证
const form =document.querySelector('.signup-form');
const feedback=document.querySelector('.feedback');

form.addEventListener('submit',(e)=>{
  e.preventDefault();
const username=form.username.value;
const usernamePattern=/^[a-z]{6,12}$/;
if(usernamePattern.test(username)){
  feedback.textContent='用户验证通过';
}else{
  feedback.textContent='用户名必须由小写字母构成,长度在6到12之间';
}
  
});

//键盘事件

//表单验证
const form = document.querySelector('.signup-form');
const feedback = document.querySelector('.feedback');
const usernamePattern = /^[a-z]{6,12}$/;
form.addEventListener('submit',(e)=>{
  e.preventDefault();
  const username = form.username.value;

  
if(usernamePattern.test(username)){
  feedback.textContent='用户验证通过';
}else{
  feedback.textContent='用户名必须由小写字母构成,长度在6到12之间';
}
  
});

//键盘事件 keyup
//1.键盘按下事件：keydown() 是在键盘按下就会触发
//2.键盘弹起事件：keyup() 是在键盘松手就会触发
form.username.addEventListener('keyup',(e)=>{
 if(usernamePattern.test(e.target.value)){
     console.log('验证通过');
     form.username.setAttribute('class', 'success');
 } else{
   console.log('验证不通过');
   form.username.setAttribute('class', 'error');
 }
});