✨ feat(contact): add validate

src/App.vue

@@ -1,14 +1,11 @@
 <template>
   <div id="app">
-
     <router-view />
   </div>
 </template>
 
 <script>
 
-
-
 </script>
 
 <style lang="less">

src/components/headTop.vue

@@ -1,132 +1,132 @@
 <template>
-<div>
+  <div>
     <div class="header">
-
-        <div class="box">
-          <div class="logoImg">
-            <router-link  to="/index"><img src="../assets/Layer_1.png" alt=""></router-link>
-          </div>            
-            <nav>
-                <router-link  to="/Payments">Payments</router-link>
-                <router-link  to="/AboutUs">About Us</router-link>
-                <router-link  to="/FAQ">FAQ</router-link>
-                <router-link  to="/ContactUs">Contact Us</router-link>
-            </nav> 
-             <!-- phone and email -->
-           
+      <div class="box">
+        <div class="logoImg">
+          <router-link to="/index"
+            ><img src="../assets/Layer_1.png" alt=""
+          /></router-link>
         </div>
-        <div class="phoneInfo">
-          <div class="phone">
-            <svg-icon icon-class="tel" class="icon" />
-            <p>1300 67 61 61</p>
-          </div>
-          <div class="email">
-            <svg-icon icon-class="email" class="icon" />
-            <p>sales@trustypay.com.au</p>
-          </div>
+        <nav>
+          <router-link to="/Payments">Payments</router-link>
+          <router-link to="/AboutUs">About Us</router-link>
+          <router-link to="/FAQ">FAQ</router-link>
+          <router-link to="/ContactUs">Contact Us</router-link>
+        </nav>
+        <!-- phone and email -->
+      </div>
+      <div class="phoneInfo">
+        <div class="phone">
+          <svg-icon icon-class="tel" class="icon" />
+          <p>1300 67 61 61</p>
         </div>
-       
-        <router-link to="/ContactUs"><el-button type="primary" class="btnInfo">Sign up</el-button></router-link>
-
-</div>
+        <div class="email">
+          <svg-icon icon-class="email" class="icon" />
+          <p>sales@trustypay.com.au</p>
+        </div>
+      </div>
 
-</div>
+      <router-link to="/ContactUs"
+        ><el-button type="primary" class="btnInfo"
+          >Sign up</el-button
+        ></router-link
+      >
+    </div>
+  </div>
 </template>
 
 <script>
-import svgIcon from '@/components/svgIcon'
+import svgIcon from "@/components/svgIcon";
 export default {
-    name:'headTop',
-    components:{
-      svgIcon
-    },
-    data(){
-        return{
-            searchQuery: '',
-            showSearchInput: false
-    }
-    },
-    methods: {
+  name: "headTop",
+  components: {
+    svgIcon,
+  },
+  data() {
+    return {
+      searchQuery: "",
+      showSearchInput: false,
+    };
+  },
+  methods: {
     toggleSearch() {
-      this.showSearchInput = !this.showSearchInput
+      this.showSearchInput = !this.showSearchInput;
     },
     search() {
       // Perform search logic here
-      console.log('Searching for:', this.searchQuery)
-    }
-  }
-}
+      console.log("Searching for:", this.searchQuery);
+    },
+  },
+};
 </script>
 
 <style lang="less" scoped>
-
-.header{
+.header {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 100px;
+  margin: 0 auto;
+  padding-top: 20px;
+  gap: 100px;
+  .box {
     display: flex;
     align-items: center;
-    justify-content: center;
-    height: 100px;
-    margin: 0 auto;
-    padding-top: 20px;
-    gap: 100px;
-  .box{
-        display: flex;
-        align-items: center;
-        .logoImg{
-          img{
-            width: 295px;
-            height: 60px;
-          }
-        }
-  
-  nav{
-        display: flex;
-        align-items: center;
-        // margin: 0px 60px;
+    .logoImg {
+      width: 295px;
+      height: 60px;
+      img {
+        width: 295px;
+        height: 60px;
+      }
     }
-    nav a{
-        text-decoration: none;
-        margin: 0px 40px;
-        font-size: 16px;
-        color: #000;
+
+    nav {
+      display: flex;
+      align-items: center;
+      // margin: 0px 60px;
     }
+    nav a {
+      text-decoration: none;
+      margin: 0px 40px;
+      font-size: 16px;
+      color: #000;
     }
-  .btnInfo{
+  }
+  .btnInfo {
     width: 121px;
     height: 38px;
     border-radius: 10px;
     background: #00a0e8;
     font-size: 16px;
-
   }
-  input{
+  input {
     height: 26px;
     outline: none;
     border: none;
     border: 1px solid #00a0e8;
   }
-  .phoneInfo{
-   
-    .icon{
+  .phoneInfo {
+    .icon {
       width: 20px;
       height: 20px;
     }
-    .phone{
+    .phone {
       display: flex;
       align-items: center;
-      p{
+      p {
         margin: 0;
         padding: 8px 10px;
-
       }
     }
-    .email{
+    .email {
       display: flex;
       align-items: center;
-      p{
+      p {
         margin: 0;
         padding: 8px 10px;
       }
     }
   }
 }
-</style>
+</style>

src/utils/el-validate.js

@@ -0,0 +1,22 @@
+import { isEmail, isValidPhone } from "./validate"
+
+export function elIsEmail(rule, value, callback) {
+    console.log('value',value);
+    if (!value) {
+        return callback(new Error('Please enter your email'))
+    }
+    if (!isEmail(value)) {
+        return callback(new Error('Please enter a valid email address'))
+    }
+    callback()
+}
+
+export function elIsValidatePhone(rule, value, callback) {
+    if (!value) {
+        return callback(new Error('Please enter your phone number'))
+    }
+    if (!isValidPhone(value)) {
+        return callback(new Error('Please enter a valid phone number'))
+    }
+    callback()
+}

src/utils/validate.js

@@ -1,6 +1,13 @@
-export function isExternal(path){
+export function isExternal(path) {
     return /^(https?:|mailto:|tel:)/.test(path)
 }
 export function validMobile(str) {
     return /^1[3-9][0-9]{9}$/.test(str)
-  }
+}
+export function isEmail(str) {
+    console.log(str);
+    return /^([a-zA-Z0-9]+[-_\.]?)+@[a-zA-Z0-9]+\.[a-z]+$/.test(str)
+}
+export function isValidPhone(str) {
+    return /^((\+\d{1,3}(-| )?\(?\d\)?(-| )?\d{1,5})|(\(?\d{2,6}\)?))(-| )?(\d{3,4})(-| )?(\d{4})(( x| ext)\d{1,5}){0,1}$/.test(str)
+}

src/views/ContactUs.vue

@@ -1,229 +1,266 @@
 <template>
-    <div>
-        <nav>
-            <headTop />
-        </nav>
-        <div class="contactPage">
-            <div class="main">
-                <div class="contactTitle">
-                    <h2>Get in touch with a TrustyPay expert</h2>
-                    <h3> We're eager to help you succeed with our range of
-                    solutions.</h3>
-                </div>
-                <!-- 表单 -->
- 
-    <div class="formPage">
-        <div class="formTitle">
-            <p>Simply fill out the form below and we'll be in touch in the next 24 hours.</p>
+  <div>
+    <nav>
+      <headTop />
+    </nav>
+    <div class="contactPage">
+      <div class="main">
+        <div class="contactTitle">
+          <h2>Get in touch with a TrustyPay expert</h2>
+          <h3>We're eager to help you succeed with our range of solutions.</h3>
         </div>
-  
-        <el-form
-      :model="form"
-      :rules="rules"
-      ref="contactForm"
-      label-position="top"
-    >
-      <el-row :gutter="20">
-        <el-col :span="12">
-          <el-form-item label="Name" prop="name">
-            <el-input v-model="form.name"></el-input>
-          </el-form-item>
-        </el-col>
-        <el-col :span="12">
-          <el-form-item label="Business Name" prop="businessName">
-            <el-input v-model="form.businessName"></el-input>
-          </el-form-item>
-        </el-col>
-      </el-row>
-      <el-row :gutter="20">
-        <el-col :span="12">
-          <el-form-item label="Mobile" prop="mobile">
-            <el-input v-model="form.mobile"></el-input>
-          </el-form-item>
-        </el-col>
-        <el-col :span="12">
-          <el-form-item label="Email" prop="email">
-            <el-input v-model="form.email"></el-input>
-          </el-form-item>
-        </el-col>
-      </el-row>
-      <el-form-item label="Language Preference" >
-        <el-select v-model="form.languagePreference" placeholder="Select Language">
-          <el-option
-            v-for="language in languages"
-            :key="language.value"
-            :label="language.label"
-            :value="language.value"
-          ></el-option>
-        </el-select>
-      </el-form-item>
-      <el-form-item label="Your message" prop="message">
-        <el-input
-          type="textarea"
-          v-model="form.message"
-          :rows="4"
-          placeholder=""
-        ></el-input>
-      </el-form-item>   
+        <!-- 表单 -->
 
-    <div class="formInfo">
-        <div>
-            <p>TrustyPay's Privacy Policy details our procedures for managing personal information. By agreeing to our Privacy Policy, you consent to TrustyPay contacting you about products, services, and other pertinent information.</p>
-        </div>
-        <div>
-            <p>By clicking the 'Submit' button, you confirm that you have reviewed and accepted <router-link to="/Privacy">TrustyPay's Privacy Policy.</router-link> Additionally, you authorize TrustyPay to contact you and send marketing communications.</p>
-        </div>
-    </div>
-    <el-form-item>
-        <el-button type="primary" @click="submitForm('contactForm')" >Submit</el-button>
-      </el-form-item>
-    </el-form>
+        <div class="formPage">
+          <div class="formTitle">
+            <p>
+              Simply fill out the form below and we'll be in touch in the next
+              24 hours.
+            </p>
+          </div>
 
-    </div>
+          <el-form
+            :model="form"
+            :rules="rules"
+            ref="contactForm"
+            label-position="top"
+          >
+            <el-row :gutter="20">
+              <el-col :span="12">
+                <el-form-item label="Name" prop="name">
+                  <el-input v-model="form.name"></el-input>
+                </el-form-item>
+              </el-col>
+              <el-col :span="12">
+                <el-form-item label="Business Name" prop="businessName">
+                  <el-input v-model="form.businessName"></el-input>
+                </el-form-item>
+              </el-col>
+            </el-row>
+            <el-row :gutter="20">
+              <el-col :span="12">
+                <el-form-item label="Mobile" prop="mobile">
+                  <el-input v-model="form.mobile"></el-input>
+                </el-form-item>
+              </el-col>
+              <el-col :span="12">
+                <el-form-item label="Email" prop="email">
+                  <el-input v-model="form.email"></el-input>
+                </el-form-item>
+              </el-col>
+            </el-row>
+            <el-form-item label="Language Preference">
+              <el-select
+                v-model="form.languagePreference"
+                placeholder="Select Language"
+              >
+                <el-option
+                  v-for="language in languages"
+                  :key="language.value"
+                  :label="language.label"
+                  :value="language.value"
+                ></el-option>
+              </el-select>
+            </el-form-item>
+            <el-form-item label="Your message" prop="message">
+              <el-input
+                type="textarea"
+                v-model="form.message"
+                :rows="4"
+                placeholder=""
+              ></el-input>
+            </el-form-item>
 
+            <div class="formInfo">
+              <div>
+                <p>
+                  TrustyPay's Privacy Policy details our procedures for managing
+                  personal information. By agreeing to our Privacy Policy, you
+                  consent to TrustyPay contacting you about products, services,
+                  and other pertinent information.
+                </p>
+              </div>
+              <div>
+                <p>
+                  By clicking the 'Submit' button, you confirm that you have
+                  reviewed and accepted
+                  <router-link to="/Privacy"
+                    >TrustyPay's Privacy Policy.</router-link
+                  >
+                  Additionally, you authorize TrustyPay to contact you and send
+                  marketing communications.
+                </p>
+              </div>
+            </div>
+            <el-form-item>
+              <el-button type="primary" @click="submitForm('contactForm')"
+                >Submit</el-button
+              >
+            </el-form-item>
+          </el-form>
+        </div>
+      </div>
     </div>
-    </div>
-        <footerMenu />
-    </div>
+    <footerMenu />
+  </div>
 </template>
 
 <script>
-
-import headTop from '@/components/headTop.vue'
-import footerMenu from '@/components/footerMenu.vue'
+import headTop from "@/components/headTop.vue";
+import footerMenu from "@/components/footerMenu.vue";
+import { elIsEmail, elIsValidatePhone } from "@/utils/el-validate";
 export default {
-    name: "ContactUs",
-    data() {
-        return {
-          form: {
-        name: '',
-        businessName: '',
-        mobile: '',
-        email: '',
-        languagePreference: '',
-        message: ''
+  name: "ContactUs",
+  data() {
+    return {
+      form: {
+        name: "",
+        businessName: "",
+        mobile: "",
+        email: "",
+        languagePreference: "",
+        message: "",
       },
       languages: [
-        { value: 'en', label: 'English' },
-        { value: 'zh', label: 'Chinese' },
-        { value: 'Ελληνικά', label: 'Ελληνικά' },
-        { value: 'हिंदी', label: 'हिंदी' },
-        { value: '한국', label: '한국' },
+        { value: "en", label: "English" },
+        { value: "zh", label: "Chinese" },
+        { value: "Ελληνικά", label: "Ελληνικά" },
+        { value: "हिंदी", label: "हिंदी" },
+        { value: "한국", label: "한국" },
       ],
       rules: {
-        name: [{ required: true, message: 'Please enter your name', trigger: 'blur' }],
-        businessName: [{ required: true, message: 'Please enter your business name', trigger: 'blur' }],
-        mobile: [{ required: true, message: 'Please enter your mobile number', trigger: 'blur' }],
-        email: [{ required: true, message: 'Please enter your email', trigger: 'blur' },
-          { type: 'email', message: 'Please enter a valid email address', trigger: 'blur' } ],
-        message:[{ required: true, message: 'Please enter'}],
+        name: [
+          {
+            required: true,
+            message: "Please enter your name",
+            trigger: "blur",
+          },
+        ],
+        businessName: [
+          {
+            required: true,
+            message: "Please enter your business name",
+            trigger: "blur",
+          },
+        ],
+        mobile: [
+          {
+            required: true,
+            trigger: ["blur"],
+            validator: elIsValidatePhone
+          },
+        ],
+        email: [
+          {
+            required: true,
+            trigger: ["blur"],
+            validator: elIsEmail
+          }
+        ],
+        message: [{ required: true, message: "Please enter" }],
       },
-    
-    }
-    },
-    methods: {
-        submitForm(formName) {
+    };
+  },
+  methods: {
+    submitForm(formName) {
       this.$refs[formName].validate((valid) => {
         if (valid) {
           // 在这里可以添加表单提交的逻辑,例如发送数据到服务器
-          console.log('Form submitted:', this.form)
+          console.log("Form submitted:", this.form);
         } else {
-          console.log('Error submitting form!')
-          return false
+          console.log("Error submitting form!");
+          return false;
         }
-      })
-    }
-  }, 
-
-    components: {
-        headTop,
-        footerMenu,
-    }
-}
+      });
+    },
+  },
 
+  components: {
+    headTop,
+    footerMenu,
+  },
+};
 </script>
 
 <style lang="less" scoped>
-
 .main {
-    width: 1200px;
-    margin-left: auto;
-    margin-right: auto;
-    position: relative;
-    z-index: 1;
+  width: 1200px;
+  margin-left: auto;
+  margin-right: auto;
+  position: relative;
+  z-index: 1;
 }
 .contactPage {
-    margin-top: 60px;
+  margin-top: 60px;
 
-    .contactTitle {
-        margin-bottom: 100px;
-        h2 {
-            text-align: center;
-            color: #1a5271;
-            font-size: 50px;           
-        }
-        h3{
-            text-align: center;
-            color: #1a5271;
-            font-size: 26px;
-        }
+  .contactTitle {
+    margin-bottom: 100px;
+    h2 {
+      text-align: center;
+      color: #1a5271;
+      font-size: 50px;
+    }
+    h3 {
+      text-align: center;
+      color: #1a5271;
+      font-size: 26px;
     }
+  }
 
-    .formPage{
-        width: 880px;
-        height: auto;
-        margin: 0 auto;
-        margin-bottom: 100px;
-        border-radius: 12px;
-        box-shadow: 0px 6px 21px 0px rgba(0, 0, 0, 0.2);
-        padding: 30px;
-        .formTitle{
-            p{
-                font-size: 20px;
-                padding: 20px 0;
-            }
-        }
+  .formPage {
+    width: 880px;
+    height: auto;
+    margin: 0 auto;
+    margin-bottom: 100px;
+    border-radius: 12px;
+    box-shadow: 0px 6px 21px 0px rgba(0, 0, 0, 0.2);
+    padding: 30px;
+    .formTitle {
+      p {
+        font-size: 20px;
+        padding: 20px 0;
+      }
+    }
 
- /deep/.el-input__inner {
-    background-color: #45c7f6 !important;   
-    &::placeholder{
+    /deep/.el-input__inner {
+      background-color: #45c7f6 !important;
+      &::placeholder {
         color: #1a5271;
-    } 
-}
-// 下拉箭头
-/deep/.el-icon-arrow-up:before{
-    color: #1a5271;
-}
-// 多行输入框背景色
-/deep/.el-textarea__inner{
-    background-color: #45c7f6 !important; 
-
+      }
     }
-// 选择框
-.el-select{
-        display: inline;
+    // 下拉箭头
+    /deep/.el-icon-arrow-up:before {
+      color: #1a5271;
     }
-//    submit居中
-    /deep/.el-form-item__content{
-        text-align: center;
+    // 多行输入框背景色
+    /deep/.el-textarea__inner {
+      background-color: #45c7f6 !important;
     }
- // button背景色
-.el-button{
-    background-color: #45c7f6;
-    border: #45c7f6; 
-    margin-top: 20px;   
-    width: 140px;
-    height: 44px;
-}
-.el-button--primary {
-    font-size: 24px;
-}
-.formInfo{
-    padding: 20px 0;
-    p{
-        text-align: center;
+    // 选择框
+    .el-select {
+      display: inline;
     }
-}
+    //    submit居中
+    /deep/.el-form-item__content {
+      text-align: center;
+    }
+    // button背景色
+    .el-button {
+      background-color: #45c7f6;
+      border: #45c7f6;
+      margin-top: 20px;
+      width: 140px;
+      height: 44px;
+    }
+    .el-button--primary {
+      font-size: 24px;
+    }
+    .formInfo {
+      padding: 20px 0;
+      p {
+        text-align: center;
+      }
     }
+  }
 }
-</style>
+</style>