diff --git "a/\350\222\213\345\256\207\350\266\205/20220331_vue_\346\263\250\345\206\214\351\241\265\351\235\242/css/register.css" "b/\350\222\213\345\256\207\350\266\205/20220331_vue_\346\263\250\345\206\214\351\241\265\351\235\242/css/register.css" new file mode 100644 index 0000000000000000000000000000000000000000..200509c14b3ed74bfdbd50e16e4cc9329e9008a7 --- /dev/null +++ "b/\350\222\213\345\256\207\350\266\205/20220331_vue_\346\263\250\345\206\214\351\241\265\351\235\242/css/register.css" @@ -0,0 +1,50 @@ +*{ + margin: 0; + padding: 0; +} + +body { + background-color: #F3F3F3; +} + +#container { + width: 450px; + height: 300px; + margin: 100px auto; + padding:20px 0 ; + background-color:#fff; + border-radius: 10px; + text-align: center; + line-height: 30px; +} + +#container h2 { + text-align: center; + color: sandybrown; +} + +label { + width: 80px; + text-align: left; + display: inline-block; + padding:5px; +} + +input { + width: 200px; + height: 30px; +} + +span { + text-align: right; +} + +button { + width: 150px; + height: 30px; + margin: 15px 0 0 50px; + background-color:#79C4EC; + border-radius: 5px; + border: none; + border-color:lightgray; +} \ No newline at end of file diff --git "a/\350\222\213\345\256\207\350\266\205/20220331_vue_\346\263\250\345\206\214\351\241\265\351\235\242/html/register.html" "b/\350\222\213\345\256\207\350\266\205/20220331_vue_\346\263\250\345\206\214\351\241\265\351\235\242/html/register.html" new file mode 100644 index 0000000000000000000000000000000000000000..7b45b664b8a145a6d1c7a68dee1a1a7c9dd83c74 --- /dev/null +++ "b/\350\222\213\345\256\207\350\266\205/20220331_vue_\346\263\250\345\206\214\351\241\265\351\235\242/html/register.html" @@ -0,0 +1,102 @@ + + + + + + + + + 注册页面 + + + +
+
+
+

注册页面

+
+ +
+ "手机号格式正确" + "手机号格式错误" +
+
+ + +
+ "密码格式正确" + "密码格式错误" +
+
+ + +
+ "两次密码一致" + "两次密码不一致" +
+
+ +
+
+
+ + + + + \ No newline at end of file diff --git "a/\350\222\213\345\256\207\350\266\205/20220331_vue_\346\263\250\345\206\214\351\241\265\351\235\242/js/register.js" "b/\350\222\213\345\256\207\350\266\205/20220331_vue_\346\263\250\345\206\214\351\241\265\351\235\242/js/register.js" new file mode 100644 index 0000000000000000000000000000000000000000..e75e4c99aaf72908345707cfaf0aeb51ab7862ef --- /dev/null +++ "b/\350\222\213\345\256\207\350\266\205/20220331_vue_\346\263\250\345\206\214\351\241\265\351\235\242/js/register.js" @@ -0,0 +1,52 @@ +let app = new Vue({ + el: "#app", + data: { + phoneNumber: "", + checkPhoneOK: false, + checkPhoneNotOK: false, + password: "", + checkPasswordOK: false, + checkPasswordNotOK: false, + confirmPassword: "", + PasswordOK:false, + PasswordNotOK:false, + }, + methods: { + checkPhone: function () { + // if(this.phoneNumber = /^(((13[0-9]{1})|(15[0-9]{1})|(18[0-9]{1}))+\d{8})$/) this.checkPhoneOK = true; + // else this.checkPhoneOK = false; + const reg = /^(((13[0-9]{1})|(15[0-9]{1})|(18[0-9]{1}))+\d{8})$/; + if (reg.test(this.phoneNumber)) this.checkPhoneOK = true, this.checkPhoneNotOK = false; + else this.checkPhoneOK = false, this.checkPhoneNotOK = true; + }, + checkPassword: function () { + let reg2 = /^[a-zA-Z]{1}/; + // if(reg2.test(this.password) && this.password.length >8) this.checkPasswordOK = true; + // else this.checkPasswordNotOK = true; + if (this.password.length > 8 && reg2.test(this.password)) { + this.checkPasswordNotOK = false; + this.checkPasswordOK = true; + } else { + this.checkPasswordOK = false; + this.checkPasswordNotOK = true; + } + }, + checkPasswords: function () { + if (this.confirmPassword == this.password) { + this.PasswordOK = true; + this.PasswordNotOK = false; + } else { + this.PasswordOK = false; + this.PasswordNotOK = true; + } + }, + alert:function() { + if(this.checkPhoneOK == true && this.checkPasswordOK == true && this.PasswordOK == true) { + window.alert('注册成功！'); + } + else { + window.alert('注册失败！请检查手机号和密码格式！'); + } + } + } +}) \ No newline at end of file diff --git "a/\350\222\213\345\256\207\350\266\205/20220401_vue_\345\225\206\345\223\201\345\210\227\350\241\250\351\241\265\351\235\242/css/commodity.css" "b/\350\222\213\345\256\207\350\266\205/20220401_vue_\345\225\206\345\223\201\345\210\227\350\241\250\351\241\265\351\235\242/css/commodity.css" new file mode 100644 index 0000000000000000000000000000000000000000..26c16a707b9a6e1990c55a2dbce90d404711f4c2 --- /dev/null +++ "b/\350\222\213\345\256\207\350\266\205/20220401_vue_\345\225\206\345\223\201\345\210\227\350\241\250\351\241\265\351\235\242/css/commodity.css" @@ -0,0 +1,50 @@ +* { + margin: 0; + padding: 0; +} + +body { + background-color: #E1E7EA; +} + +#app { + width: 580px; + height: 100%; + margin: 0 auto; + /* border: 1px solid black; */ +} + +h2 { + text-align: center; + color:tomato; +} + + +ul li { + list-style: none; + float: left; + display: block; + background-color: #fff; + width: 280px; + margin: 5px; +} + +ul #price { + margin-left:80px; + color: red; + font-family: arial; + line-height: 1; + font-size: 24px; +} + +ul #title { + /*居中*/ + display:block; + text-align: center; + font-size: 17px; +} + +a { + text-decoration: none; + color: #333; +} \ No newline at end of file diff --git "a/\350\222\213\345\256\207\350\266\205/20220401_vue_\345\225\206\345\223\201\345\210\227\350\241\250\351\241\265\351\235\242/html/commodity.html" "b/\350\222\213\345\256\207\350\266\205/20220401_vue_\345\225\206\345\223\201\345\210\227\350\241\250\351\241\265\351\235\242/html/commodity.html" new file mode 100644 index 0000000000000000000000000000000000000000..9a97fee464fb489fb15f8ad5001d5955ec7ef092 --- /dev/null +++ "b/\350\222\213\345\256\207\350\266\205/20220401_vue_\345\225\206\345\223\201\345\210\227\350\241\250\351\241\265\351\235\242/html/commodity.html" @@ -0,0 +1,71 @@ + + + + + + + + + 商品列表页 + + + + +
+

商品列表

+ +
+ + + + \ No newline at end of file