手机注册

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  7.     <title>Document</title>
  8.     <script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>
  9. </head>
  10. <body>
  11.     <div id="app">
  12.  手机号: <input type="text" v-model="keyword">  <br>
  13.   <span v-if="show">输入正确手机号</span> <br>
  14.   邮箱: <input type="text" v-model="email">
  15.   <button @click="handleClick">注册</button>
  16.     </div>
  17.     <script>
  18.      var vm=new Vue({
  19.          el:"#app",
  20.          data:{
  21.              keyword:"",
  22.              show:false,
  23.              email:""
  24.          },
  25.          methods: {
  26.             handleClick(){
  27.                 // 1[3-9]\d{9}$/
  28.                 // 以1开头，3-9为第二位 9个随机0-9数字
  29.                 var reg = /^1[3-9]\d{9}$/;
  30.                 var emailReg = /[0-9a-z]+@[0-9a-z]+\.com$/;
  32.                 if(!reg.test(this.keyword)){
  33.                     this.show=true;
  34.                 }
  35.                 if(!emailReg.test(this.email)){
  36.                     alert("邮箱不合法")
  37.                 }
  38.                 /* 
  39.                 [0-9a-z]+@[0-9a-z]+\.com$/
  40.                 32656231@qq.com
  41.                 lsidtflfg@163.com
  42.                  */
  43.             }
  44.          },
  45.      })
  46.     </script>
  47. </body>
  48. </html>

身份证

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  8.     <title>Document</title>
  9.     <script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>
  10. </head>
  12. <body>
  13.     <!-- 18位
  14.       ......x
  15.       \d{17}[0-9xX]      
  16.     -->
  17.     <div id="app">
  18.         <input type="text" v-model="kw" @keyup.enter="handleClick">
  19.     </div>
  20.     <script>
  21.         new Vue({
  22.             el: "#app",
  23.             data: {
  24.                 kw: ""
  25.             },
  26.             methods: {
  27.                 handleClick(){
  28.                     var peop = /\d{17}[0-9xX]$/;
  29.                     // console.log(peop.test(this.kw))
  30.                     if(peop.test(this.kw)){
  31.                         console.log(1)
  32.                     }else{
  33.                         console.log(0)
  34.                     }
  35.                 }
  36.             },
  37.         })
  38.     </script>
  39. </body>
  41. </html>