From 77d56e7d2b74eccb0f2dfc07c9307ffa6e2e4645 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=99=88=E5=BB=BA=E8=8D=A3?= <1127253677@qq.com>
Date: Thu, 7 Apr 2022 14:41:41 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BD=9C=E4=B8=9A?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../20220407/login.html"                      | 143 ++++++++++++++++++
 1 file changed, 143 insertions(+)
 create mode 100644 "\351\231\210\345\273\272\350\215\243/20220407/login.html"
diff --git "a/\351\231\210\345\273\272\350\215\243/20220407/login.html" "b/\351\231\210\345\273\272\350\215\243/20220407/login.html"
new file mode 100644
index 0000000..9c3f1dd
--- /dev/null
+++ "b/\351\231\210\345\273\272\350\215\243/20220407/login.html"
@@ -0,0 +1,143 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
+ 
+   <style type="text/css">
+        .form-item {
+            margin: 50px 0;
+            width: 300px;
+            height: 35px;
+        }
+
+        .form-item::after {
+            content: attr(data-msg);
+            color: red;
+            font-size: 12px;
+            display: none;
+        }
+
+        .form-item.err::after {
+            display: block;
+        }
+
+        .form-item input {
+            outline: none;
+            width: 100%;
+            height: 100%;
+            font-size: 18px;
+        }
+
+        .form-item.err input {
+            border-color: red;
+        } .form-item1 {
+            margin: 50px 0;
+            width: 300px;
+            height: 35px;
+        }
+
+        .form-item1::after {
+            content: attr(data-msg1);
+            color: red;
+            font-size: 12px;
+            display: none;
+        }
+
+        .form-item1.error1::after {
+            display: block;
+        }
+
+        .form-item1 input {
+            outline: none;
+            width: 100%;
+            height: 100%;
+            font-size: 18px;
+        }
+
+        .form-item1.error1 input {
+            border-color: red;
+        }
+    </style>
+</head>
+<body>
+    <div id="main" >
+   
+        <section :class="['form-item', {'err':err}]" data-msg="输入3个以上字母、数字、下划线，">
+           
+                <input type="text" placeholder="请输入用户名" name="username" v-model="user">{{user}}
+           
+            </section>   <section  :class="['form-item', {'err':err}]" data-msg="请输入大小写加数字">
+                <input type="password" placeholder="请输入密码" name="password" v-model="pass">
+                    {{pass}}
+           </section>
+          
+                <select name="word" id="" v-model="study">
+                    <option value="ruanjian" >软件工程</option>
+                    <option value="huanjing">环境工程</option>
+                    <option value="jisuanji">计算机工程</option>
+                </select>
+   
+            
+   
+       <div style="margin-top:120px;">
+    
+        <input type="radio" name="sex" v-model="choice">男 <input type="radio" name="sex" v-model="choice">女
+   
+<div>
+    <section  :class="['form-item1', {'error1':error1}]" data-msg1="验证码不能为空">
+        验证码:<input type="number" name="reuse" v-model.number="reuser">
+    </section>
+</div>
+    </div>
+    </div>
+</body>
+<script>
+    let vue = new Vue({
+        el:'#main',
+        data:{
+            user:'',
+            pass:'',
+            err:false,
+            error1:false,
+            choice:null,
+            study:'ruanjian',
+            reuser:'',
+            form:{
+                name:'',
+                password:'',
+                reuser:''
+            }
+        },
+        mounted:function(){
+                this.checkWath();
+        },
+        methods:{
+            checkWath: function () {
+                let that = this;
+                setInterval(function () {
+                    // let num = Math.round(Math.random() * 10);
+                    // that.username = randomString(num);//把username赋值 随机字符串，username是不是一直在变化
+                }, 1)
+            }
+        },
+        watch:{
+            user(val) {//监听器的名称，如何取名?名称要跟属性的名称一致，跟 change类似
+                // console.log('...........wathing...........');
+                this.err = !/^\w{3,16}$/.test(val);
+            },
+            pass(val){
+                this.err = !/^(?=.*[a-zA-Z])(?=.*[1-9])(?=.*[\w]).{6,16}/.test(val);
+
+            },
+          
+            reuser(val){
+                this.error1 =!/^[0-9]{1,}/.test(val);
+            }
+        }
+
+    })
+</script>
+</html>
\ No newline at end of file
-- 
Gitee

