开通有货分期

@@ -8,18 +8,17 @@
     <div class="field">
       <label for="userName">姓名：</label>
 
-      <input id="userName" name="userName" type="text" placeholder="姓名" maxlength="20"/>
+      <input id="userName" name="userName" type="text" placeholder="真实姓名" maxlength="20"/>
       <div class="clearfix"></div>
     </div>
 
     <div class="field">
       <label for="identityCardNo">身份证号：</label>
 
-      <input id="identityCardNo" name="identityCardNo" type="text" placeholder="身份证号" maxlength="18"/>
+      <input id="identityCardNo" name="identityCardNo" type="text" placeholder="请填写身份证号" maxlength="18"/>
       <div class="clearfix"></div>
     </div>
 
-
     <div class="field">
       <label for="name">卡号：</label>
 
@@ -27,10 +26,17 @@
       <div class="clearfix"></div>
     </div>
 
+    <div class="field">
+      <div>
+        <img src="" alt="">
+        <span>中国工商银行</span>
+      </div>
+    </div>
+
 
     <div class="field">
       <label for="name">手机号：</label>
-      <input id="name" name="mobilePhone" type="text" placeholder="银行预留手机号码"/>
+      <input id="name" name="mobilePhone" type="text" placeholder="银行预留手机号码" maxlength="11"/>
       <div class="clearfix"></div>
     </div>
 
@@ -49,10 +55,15 @@
       <div class="clearfix"></div>
     </div>
 
-    <div class="data-encryption">
-      数据智能加密，保障您的用卡安全
-    </div>
+    <div class="bottom-block">
+      <div class="data-encryption">
+        数据智能加密，保障您的用卡安全
+      </div>
 
-    <button id="apply-button" class="apply-button" type="submit">下一步</button>
+      <button id="apply-button" class="apply-button" type="submit">下一步</button>
+      <div class="provider-mark">
+        Yoho!Buy信而富联合提供
+      </div>
+    </div>
   </form>
 </div>

@@ -6,6 +6,14 @@ const Timer = function() {
 };
 
 const FormModel = function() {
+    Object.assign(this, {
+        userName: '',
+        identityCardNo: '',
+        cardNo: '',
+        mobilePhone: '',
+        verifyCode: '',
+        agreements: ''
+    });
 };
 
 const formModel = new FormModel();
@@ -116,6 +124,11 @@ $('input').on('change', function() {
     validateForm();
 });
 
+validateForm();
+
+setInterval(()=> {
+    validateForm();
+}, 500);
 
 /**
  * 表单提交

@@ -34,7 +34,7 @@
     }
 
     .field {
-        padding: 30px;
+        padding: 25px;
         border-bottom: 1px solid #e0e0e0;
         min-height: 90px;
     }
@@ -60,7 +60,7 @@
 
         label {
             font-size: 27px;
-            color: #c6c6c6;
+            color: #444;
         }
 
         a {
@@ -84,27 +84,36 @@
 
     .data-encryption {
         color: #b0b0b0;
-        margin: 128px auto 20px;
+        margin: 0 auto 20px;
         text-align: center;
     }
 
     label {
-        font-size: 40px;
+        font-size: 32px;
         color: #444;
         float: left;
     }
 
     input[type=text] {
-        font-size: 30px;
+        font-size: 27px;
         height: 40px;
         color: #444;
         float: left;
-        margin-top: 5px;
+        margin-top: 2px;
     }
 
     .provider-mark {
         text-align: center;
         font-size: 27px;
         color: #444;
+        margin-top: 64px;
+        margin-bottom: 24px;
+    }
+
+    .bottom-block {
+        width: 100%;
+        text-align: center;
+        position: fixed;
+        bottom: 0;
     }
 }