| @@ -21,22 +21,30 @@ | |||||
| <div class="taolIconText"> | <div class="taolIconText"> | ||||
| {{ characters == 1 ? '联系我们' : 'Contact us' }} | {{ characters == 1 ? '联系我们' : 'Contact us' }} | ||||
| </div> | </div> | ||||
| <div class="contentInput"> | |||||
| <!-- <input type="text" :placeholder="characters ==1?'姓名':'Name'" v-model="userName"> --> | |||||
| <!-- <div class="contentInput"> | |||||
| <el-input v-model="userName" :placeholder="characters == 1 ? '姓名' : 'Name'"></el-input> | <el-input v-model="userName" :placeholder="characters == 1 ? '姓名' : 'Name'"></el-input> | ||||
| </div> | </div> | ||||
| <div class="contentInput"> | <div class="contentInput"> | ||||
| <!-- <input type="text" :placeholder="characters ==1?'手机':'Phone Number'" v-model="phone"> --> | |||||
| <el-input v-model="phone" :placeholder="characters == 1 ? '手机' : 'Phone Number'"></el-input> | <el-input v-model="phone" :placeholder="characters == 1 ? '手机' : 'Phone Number'"></el-input> | ||||
| </div> | </div> | ||||
| <div class="contentInput"> | <div class="contentInput"> | ||||
| <!-- <input type="text" :placeholder="characters ==1?'E-mail':'Mail'" v-model="email"> --> | |||||
| <el-input v-model="email" :placeholder="characters == 1 ? 'E-mail' : 'Mail'"></el-input> | <el-input v-model="email" :placeholder="characters == 1 ? 'E-mail' : 'Mail'"></el-input> | ||||
| </div> | </div> | ||||
| <div class="subBtn" @click="submit()"> | <div class="subBtn" @click="submit()"> | ||||
| {{ characters == 1 ? '提交' : 'Submit' }} | {{ characters == 1 ? '提交' : 'Submit' }} | ||||
| </div> | |||||
| </div> --> | |||||
| <el-form ref="form" :rules="characters == 1 ? rules : rulesEnglish" :model="form"> | |||||
| <el-form-item class="width" prop="userName"> | |||||
| <el-input v-model="form.userName" maxlength="10" :placeholder="characters == 1 ? '姓名' : 'Name'"></el-input> | |||||
| </el-form-item> | |||||
| <el-form-item class="width" prop="phone"> | |||||
| <el-input v-model="form.phone" :placeholder="characters == 1 ? '手机' : 'Phone'"></el-input> | |||||
| </el-form-item> | |||||
| <el-form-item class="width" prop="email"> | |||||
| <el-input v-model="form.email" placeholder="Email"></el-input> | |||||
| </el-form-item> | |||||
| <el-button class="subBtn1" type="primary" @click="submit()">{{ characters == 1 ? '提 交' : 'Submit' }}</el-button> | |||||
| </el-form> | |||||
| </div> | </div> | ||||
| <div class="rqCodeBox"> | <div class="rqCodeBox"> | ||||
| @@ -84,44 +92,158 @@ export default { | |||||
| return { | return { | ||||
| userName: '', | userName: '', | ||||
| phone: '', | phone: '', | ||||
| email: '' | |||||
| email: '', | |||||
| form: { | |||||
| userName: '', | |||||
| phone: '', | |||||
| email: '' | |||||
| }, | |||||
| rules: { | |||||
| userName: [ | |||||
| { | |||||
| required: true, | |||||
| min: 1, | |||||
| max: 10, | |||||
| message: '此项必填,内容最大10个字符!', | |||||
| trigger: 'blur' | |||||
| } | |||||
| ], | |||||
| phone: [ | |||||
| { | |||||
| required: true, | |||||
| trigger: 'change', | |||||
| message: '请先输手机号', | |||||
| trigger: 'blur' | |||||
| }, | |||||
| { | |||||
| validator(rule, value, callback, source, options) { | |||||
| var errors = []; | |||||
| // var mobile = /^1[0|1|2|3|4|5|6|7|8|9]\d{9}$/, | |||||
| let phone = /^1[35789]\d{9}$/; | |||||
| if (value && !phone.test(value)) { | |||||
| callback('抱歉,请输入正确的手机号'); | |||||
| } | |||||
| callback(errors); | |||||
| } | |||||
| } | |||||
| ], | |||||
| email: [ | |||||
| { | |||||
| required: true, | |||||
| trigger: 'change', | |||||
| message: '请输入邮箱!', | |||||
| trigger: 'blur' | |||||
| }, | |||||
| { | |||||
| validator(rule, value, callback, source, options) { | |||||
| var errors = []; | |||||
| // var mobile = /^1[0|1|2|3|4|5|6|7|8|9]\d{9}$/, | |||||
| let email = /^[^\s@]+@[^\s@]+\.[^\s@]+$/; | |||||
| if (value && !email.test(value)) { | |||||
| callback('抱歉,请输入正确的邮箱'); | |||||
| } | |||||
| callback(errors); | |||||
| } | |||||
| } | |||||
| ] | |||||
| }, | |||||
| rulesEnglish: { | |||||
| userName: [ | |||||
| { | |||||
| required: true, | |||||
| min: 1, | |||||
| max: 10, | |||||
| message: 'This item is required !', | |||||
| trigger: 'blur' | |||||
| } | |||||
| ], | |||||
| phone: [ | |||||
| { | |||||
| required: true, | |||||
| trigger: 'change', | |||||
| message: 'Please enter your cell phone number', | |||||
| trigger: 'blur' | |||||
| }, | |||||
| { | |||||
| validator(rule, value, callback, source, options) { | |||||
| var errors = []; | |||||
| let phone = /^1[35789]\d{9}$/; | |||||
| if (value && !phone.test(value)) { | |||||
| callback('Sorry, please enter the correct cell phone number'); | |||||
| } | |||||
| callback(errors); | |||||
| } | |||||
| } | |||||
| ], | |||||
| email: [ | |||||
| { | |||||
| required: true, | |||||
| trigger: 'change', | |||||
| message: 'Please enter email!', | |||||
| trigger: 'blur' | |||||
| }, | |||||
| { | |||||
| validator(rule, value, callback, source, options) { | |||||
| var errors = []; | |||||
| let email = /^[^\s@]+@[^\s@]+\.[^\s@]+$/; | |||||
| if (value && !email.test(value)) { | |||||
| callback('Sorry, please enter the correct email address'); | |||||
| } | |||||
| callback(errors); | |||||
| } | |||||
| } | |||||
| ] | |||||
| } | |||||
| }; | }; | ||||
| }, | }, | ||||
| methods: { | methods: { | ||||
| submit() { | submit() { | ||||
| let phone = /^1[35789]\d{9}$/; | |||||
| if (this.userName == '') { | |||||
| this.$message.error(this.characters == 1 ? '请输入姓名' : 'Please enter your name'); | |||||
| return; | |||||
| } else if (!phone.test(this.phone)) { | |||||
| this.$message.error(this.characters == 1 ? '请输入手机号' : 'Please enter your mobile phone number'); | |||||
| return; | |||||
| } else if (this.email == '') { | |||||
| this.$message.error(this.characters == 1 ? '请输入邮箱' : 'Please enter email address'); | |||||
| return; | |||||
| } | |||||
| let params = { | |||||
| mallName: this.email, //邮箱 | |||||
| applicant: this.userName, //姓名 | |||||
| phone: this.phone //电话 | |||||
| }; | |||||
| this.$axios({ | |||||
| method: 'post', | |||||
| url: '/api/callback/wxMallApply/add', | |||||
| headers: { | |||||
| 'Content-Type': 'application/json;charset=UTF-8' | |||||
| }, | |||||
| data: params | |||||
| }) | |||||
| .then(res => { | |||||
| this.email = ''; | |||||
| this.userName = ''; | |||||
| this.phone = ''; | |||||
| this.$message.success(this.characters == 1 ? '提交成功' : 'submit successfully'); | |||||
| }) | |||||
| .catch(err => { | |||||
| this.$message.error(err.message); | |||||
| }); | |||||
| // let phone = /^1[35789]\d{9}$/; | |||||
| // if (this.userName == '') { | |||||
| // this.$message.error(this.characters == 1 ? '请输入姓名' : 'Please enter your name'); | |||||
| // return; | |||||
| // } else if (!phone.test(this.phone)) { | |||||
| // this.$message.error(this.characters == 1 ? '请输入手机号' : 'Please enter your mobile phone number'); | |||||
| // return; | |||||
| // } else if (this.email == '') { | |||||
| // this.$message.error(this.characters == 1 ? '请输入邮箱' : 'Please enter email address'); | |||||
| // return; | |||||
| // } | |||||
| // let params = { | |||||
| // mallName: this.email, //邮箱 | |||||
| // applicant: this.userName, //姓名 | |||||
| // phone: this.phone //电话 | |||||
| // }; | |||||
| this.$refs.form.validate(valid => { | |||||
| console.log(valid); | |||||
| if (valid) { | |||||
| let params = { | |||||
| mallName: this.form.email, //邮箱 | |||||
| applicant: this.form.userName, //姓名 | |||||
| phone: this.form.phone //电话 | |||||
| }; | |||||
| this.$axios({ | |||||
| method: 'post', | |||||
| url: '/api/callback/wxMallApply/add', | |||||
| headers: { | |||||
| 'Content-Type': 'application/json;charset=UTF-8' | |||||
| }, | |||||
| data: params | |||||
| }) | |||||
| .then(res => { | |||||
| this.email = ''; | |||||
| this.userName = ''; | |||||
| this.phone = ''; | |||||
| this.form.email = ''; | |||||
| this.form.userName = ''; | |||||
| this.form.phone = ''; | |||||
| this.$message.success(this.characters == 1 ? '提交成功' : 'submit successfully'); | |||||
| }) | |||||
| .catch(err => { | |||||
| this.$message.error(err.message); | |||||
| }); | |||||
| } | |||||
| }); | |||||
| } | } | ||||
| }, | }, | ||||
| computed: { | computed: { | ||||
| @@ -209,6 +331,28 @@ export default { | |||||
| background-color: #16e9d6; | background-color: #16e9d6; | ||||
| } | } | ||||
| } | } | ||||
| ::v-deep .el-form-item { | |||||
| width: 300px; | |||||
| margin-bottom: 20px; | |||||
| } | |||||
| .subBtn1 { | |||||
| border: none; | |||||
| width: 140px; | |||||
| height: 48px; | |||||
| color: #191919; | |||||
| // margin-top: 15px; | |||||
| background: #ffffff; | |||||
| border-radius: 24px; | |||||
| text-align: center; | |||||
| line-height: 24px; | |||||
| cursor: pointer; | |||||
| font-size: 14px; | |||||
| transition: all 0.3s; | |||||
| &:hover { | |||||
| color: #fff; | |||||
| background-color: #16e9d6; | |||||
| } | |||||
| } | |||||
| } | } | ||||
| .rqCodeBox { | .rqCodeBox { | ||||
| width: 360px; | width: 360px; | ||||
| @@ -293,14 +293,14 @@ | |||||
| </div> | </div> | ||||
| <el-dialog :title="characters == 1 ? '留下您的信息,我们会尽快与您取得联系' : 'Tell us about yourself, we ll be in touch right away.'" :visible.sync="dialogVisible" width="34%"> | <el-dialog :title="characters == 1 ? '留下您的信息,我们会尽快与您取得联系' : 'Tell us about yourself, we ll be in touch right away.'" :visible.sync="dialogVisible" width="34%"> | ||||
| <el-form ref="form" :rules="rules" :model="form"> | |||||
| <el-form ref="form" :rules="characters == 1 ? rules : rulesEnglish" :model="form"> | |||||
| <el-form-item class="width" prop="name"> | <el-form-item class="width" prop="name"> | ||||
| <el-input v-model="form.name" maxlength="10" :placeholder="characters == 1 ? '姓名' : 'Name'"></el-input> | <el-input v-model="form.name" maxlength="10" :placeholder="characters == 1 ? '姓名' : 'Name'"></el-input> | ||||
| </el-form-item> | </el-form-item> | ||||
| <el-form-item class="width" prop="phone"> | <el-form-item class="width" prop="phone"> | ||||
| <el-input v-model="form.phone" :placeholder="characters == 1 ? '手机' : 'Phone'"></el-input> | <el-input v-model="form.phone" :placeholder="characters == 1 ? '手机' : 'Phone'"></el-input> | ||||
| </el-form-item> | </el-form-item> | ||||
| <el-form-item class="width" prop="Pmail"> | |||||
| <el-form-item class="width" prop="email"> | |||||
| <el-input v-model="form.email" placeholder="Email"></el-input> | <el-input v-model="form.email" placeholder="Email"></el-input> | ||||
| </el-form-item> | </el-form-item> | ||||
| </el-form> | </el-form> | ||||
| @@ -336,19 +336,15 @@ export default { | |||||
| url: require('../../assets/img/en.jpg') | url: require('../../assets/img/en.jpg') | ||||
| } | } | ||||
| ], | ], | ||||
| // | // | ||||
| userName: '', | userName: '', | ||||
| phone: '', | phone: '', | ||||
| email: '', | email: '', | ||||
| form: { | form: { | ||||
| name: '', | name: '', | ||||
| phone: '', | phone: '', | ||||
| email: '' | email: '' | ||||
| }, | }, | ||||
| rules: { | rules: { | ||||
| name: [ | name: [ | ||||
| { | { | ||||
| @@ -363,7 +359,8 @@ export default { | |||||
| { | { | ||||
| required: true, | required: true, | ||||
| trigger: 'change', | trigger: 'change', | ||||
| message: '请先输手机号' | |||||
| message: '请先输手机号', | |||||
| trigger: 'blur' | |||||
| }, | }, | ||||
| { | { | ||||
| validator(rule, value, callback, source, options) { | validator(rule, value, callback, source, options) { | ||||
| @@ -381,7 +378,66 @@ export default { | |||||
| { | { | ||||
| required: true, | required: true, | ||||
| trigger: 'change', | trigger: 'change', | ||||
| message: '请先输邮箱' | |||||
| message: '请输入邮箱!', | |||||
| trigger: 'blur' | |||||
| }, | |||||
| { | |||||
| validator(rule, value, callback, source, options) { | |||||
| var errors = []; | |||||
| // var mobile = /^1[0|1|2|3|4|5|6|7|8|9]\d{9}$/, | |||||
| let email = /^[^\s@]+@[^\s@]+\.[^\s@]+$/; | |||||
| if (value && !email.test(value)) { | |||||
| callback('抱歉,请输入正确的邮箱'); | |||||
| } | |||||
| callback(errors); | |||||
| } | |||||
| } | |||||
| ] | |||||
| }, | |||||
| rulesEnglish: { | |||||
| name: [ | |||||
| { | |||||
| required: true, | |||||
| min: 1, | |||||
| max: 10, | |||||
| message: 'This item is required !', | |||||
| trigger: 'blur' | |||||
| } | |||||
| ], | |||||
| phone: [ | |||||
| { | |||||
| required: true, | |||||
| trigger: 'change', | |||||
| message: 'Please enter your cell phone number', | |||||
| trigger: 'blur' | |||||
| }, | |||||
| { | |||||
| validator(rule, value, callback, source, options) { | |||||
| var errors = []; | |||||
| let phone = /^1[35789]\d{9}$/; | |||||
| if (value && !phone.test(value)) { | |||||
| callback('Sorry, please enter the correct cell phone number'); | |||||
| } | |||||
| callback(errors); | |||||
| } | |||||
| } | |||||
| ], | |||||
| email: [ | |||||
| { | |||||
| required: true, | |||||
| trigger: 'change', | |||||
| message: 'Please enter email!', | |||||
| trigger: 'blur' | |||||
| }, | |||||
| { | |||||
| validator(rule, value, callback, source, options) { | |||||
| var errors = []; | |||||
| let email = /^[^\s@]+@[^\s@]+\.[^\s@]+$/; | |||||
| if (value && !email.test(value)) { | |||||
| callback('Sorry, please enter the correct email address'); | |||||
| } | |||||
| callback(errors); | |||||
| } | |||||
| } | } | ||||
| ] | ] | ||||
| }, | }, | ||||
| @@ -680,6 +736,10 @@ export default { | |||||
| }; | }; | ||||
| </script> | </script> | ||||
| <style lang="scss" scoped> | <style lang="scss" scoped> | ||||
| ::v-deep .el-form-item { | |||||
| // width: 300px; | |||||
| margin-bottom: 20px; | |||||
| } | |||||
| .Box { | .Box { | ||||
| width: 100%; | width: 100%; | ||||
| overflow: hidden; | overflow: hidden; | ||||
| @@ -1158,7 +1218,9 @@ export default { | |||||
| } | } | ||||
| } | } | ||||
| .module_6 { | .module_6 { | ||||
| height: 1080px; | |||||
| // margin-top: -100px; | |||||
| height: 880px; | |||||
| // height: 1080px; | |||||
| background-color: #fff; | background-color: #fff; | ||||
| .title { | .title { | ||||
| text-align: center; | text-align: center; | ||||
| @@ -52,14 +52,14 @@ | |||||
| </div> | </div> | ||||
| <el-dialog :title="characters == 1 ? '留下您的信息,我们会尽快与您取得联系' : 'Tell us about yourself, we ll be in touch right away.'" :visible.sync="dialogVisible" width="34%"> | <el-dialog :title="characters == 1 ? '留下您的信息,我们会尽快与您取得联系' : 'Tell us about yourself, we ll be in touch right away.'" :visible.sync="dialogVisible" width="34%"> | ||||
| <el-form ref="form" :rules="rules" :model="form"> | |||||
| <el-form ref="form" :rules="characters == 1 ? rules : rulesEnglish" :model="form"> | |||||
| <el-form-item class="width" prop="name"> | <el-form-item class="width" prop="name"> | ||||
| <el-input v-model="form.name" maxlength="10" :placeholder="characters == 1 ? '姓名' : 'Name'"></el-input> | <el-input v-model="form.name" maxlength="10" :placeholder="characters == 1 ? '姓名' : 'Name'"></el-input> | ||||
| </el-form-item> | </el-form-item> | ||||
| <el-form-item class="width" prop="phone"> | <el-form-item class="width" prop="phone"> | ||||
| <el-input v-model="form.phone" :placeholder="characters == 1 ? '手机' : 'Phone'"></el-input> | <el-input v-model="form.phone" :placeholder="characters == 1 ? '手机' : 'Phone'"></el-input> | ||||
| </el-form-item> | </el-form-item> | ||||
| <el-form-item class="width" prop="Pmail"> | |||||
| <el-form-item class="width" prop="email"> | |||||
| <el-input v-model="form.email" placeholder="Email"></el-input> | <el-input v-model="form.email" placeholder="Email"></el-input> | ||||
| </el-form-item> | </el-form-item> | ||||
| </el-form> | </el-form> | ||||
| @@ -94,9 +94,7 @@ export default { | |||||
| url: require('../../assets/img/en.jpg') | url: require('../../assets/img/en.jpg') | ||||
| } | } | ||||
| ], | ], | ||||
| // | // | ||||
| userName: '', | userName: '', | ||||
| phone: '', | phone: '', | ||||
| email: '', | email: '', | ||||
| @@ -121,7 +119,8 @@ export default { | |||||
| { | { | ||||
| required: true, | required: true, | ||||
| trigger: 'change', | trigger: 'change', | ||||
| message: '请先输手机号' | |||||
| message: '请先输手机号', | |||||
| trigger: 'blur' | |||||
| }, | }, | ||||
| { | { | ||||
| validator(rule, value, callback, source, options) { | validator(rule, value, callback, source, options) { | ||||
| @@ -139,7 +138,66 @@ export default { | |||||
| { | { | ||||
| required: true, | required: true, | ||||
| trigger: 'change', | trigger: 'change', | ||||
| message: '请先输邮箱' | |||||
| message: '请输入邮箱!', | |||||
| trigger: 'blur' | |||||
| }, | |||||
| { | |||||
| validator(rule, value, callback, source, options) { | |||||
| var errors = []; | |||||
| // var mobile = /^1[0|1|2|3|4|5|6|7|8|9]\d{9}$/, | |||||
| let email = /^[^\s@]+@[^\s@]+\.[^\s@]+$/; | |||||
| if (value && !email.test(value)) { | |||||
| callback('抱歉,请输入正确的邮箱'); | |||||
| } | |||||
| callback(errors); | |||||
| } | |||||
| } | |||||
| ] | |||||
| }, | |||||
| rulesEnglish: { | |||||
| name: [ | |||||
| { | |||||
| required: true, | |||||
| min: 1, | |||||
| max: 10, | |||||
| message: 'This item is required !', | |||||
| trigger: 'blur' | |||||
| } | |||||
| ], | |||||
| phone: [ | |||||
| { | |||||
| required: true, | |||||
| trigger: 'change', | |||||
| message: 'Please enter your cell phone number', | |||||
| trigger: 'blur' | |||||
| }, | |||||
| { | |||||
| validator(rule, value, callback, source, options) { | |||||
| var errors = []; | |||||
| let phone = /^1[35789]\d{9}$/; | |||||
| if (value && !phone.test(value)) { | |||||
| callback('Sorry, please enter the correct cell phone number'); | |||||
| } | |||||
| callback(errors); | |||||
| } | |||||
| } | |||||
| ], | |||||
| email: [ | |||||
| { | |||||
| required: true, | |||||
| trigger: 'change', | |||||
| message: 'Please enter email!', | |||||
| trigger: 'blur' | |||||
| }, | |||||
| { | |||||
| validator(rule, value, callback, source, options) { | |||||
| var errors = []; | |||||
| let email = /^[^\s@]+@[^\s@]+\.[^\s@]+$/; | |||||
| if (value && !email.test(value)) { | |||||
| callback('Sorry, please enter the correct email address'); | |||||
| } | |||||
| callback(errors); | |||||
| } | |||||
| } | } | ||||
| ] | ] | ||||
| }, | }, | ||||
| @@ -60,14 +60,14 @@ | |||||
| </div> | </div> | ||||
| <el-dialog :title="characters == 1 ? '留下您的信息,我们会尽快与您取得联系' : 'Tell us about yourself, we ll be in touch right away.'" :visible.sync="dialogVisible" width="34%"> | <el-dialog :title="characters == 1 ? '留下您的信息,我们会尽快与您取得联系' : 'Tell us about yourself, we ll be in touch right away.'" :visible.sync="dialogVisible" width="34%"> | ||||
| <el-form ref="form" :rules="rules" :model="form"> | |||||
| <el-form ref="form" :rules="characters == 1 ? rules : rulesEnglish" :model="form"> | |||||
| <el-form-item class="width" prop="name"> | <el-form-item class="width" prop="name"> | ||||
| <el-input v-model="form.name" maxlength="10" :placeholder="characters == 1 ? '姓名' : 'Name'"></el-input> | <el-input v-model="form.name" maxlength="10" :placeholder="characters == 1 ? '姓名' : 'Name'"></el-input> | ||||
| </el-form-item> | </el-form-item> | ||||
| <el-form-item class="width" prop="phone"> | <el-form-item class="width" prop="phone"> | ||||
| <el-input v-model="form.phone" :placeholder="characters == 1 ? '手机' : 'Phone'"></el-input> | <el-input v-model="form.phone" :placeholder="characters == 1 ? '手机' : 'Phone'"></el-input> | ||||
| </el-form-item> | </el-form-item> | ||||
| <el-form-item class="width" prop="Pmail"> | |||||
| <el-form-item class="width" prop="email"> | |||||
| <el-input v-model="form.email" placeholder="Email"></el-input> | <el-input v-model="form.email" placeholder="Email"></el-input> | ||||
| </el-form-item> | </el-form-item> | ||||
| </el-form> | </el-form> | ||||
| @@ -129,7 +129,8 @@ export default { | |||||
| { | { | ||||
| required: true, | required: true, | ||||
| trigger: 'change', | trigger: 'change', | ||||
| message: '请先输手机号' | |||||
| message: '请先输手机号', | |||||
| trigger: 'blur' | |||||
| }, | }, | ||||
| { | { | ||||
| validator(rule, value, callback, source, options) { | validator(rule, value, callback, source, options) { | ||||
| @@ -147,7 +148,66 @@ export default { | |||||
| { | { | ||||
| required: true, | required: true, | ||||
| trigger: 'change', | trigger: 'change', | ||||
| message: '请先输邮箱' | |||||
| message: '请输入邮箱!', | |||||
| trigger: 'blur' | |||||
| }, | |||||
| { | |||||
| validator(rule, value, callback, source, options) { | |||||
| var errors = []; | |||||
| // var mobile = /^1[0|1|2|3|4|5|6|7|8|9]\d{9}$/, | |||||
| let email = /^[^\s@]+@[^\s@]+\.[^\s@]+$/; | |||||
| if (value && !email.test(value)) { | |||||
| callback('抱歉,请输入正确的邮箱'); | |||||
| } | |||||
| callback(errors); | |||||
| } | |||||
| } | |||||
| ] | |||||
| }, | |||||
| rulesEnglish: { | |||||
| name: [ | |||||
| { | |||||
| required: true, | |||||
| min: 1, | |||||
| max: 10, | |||||
| message: 'This item is required !', | |||||
| trigger: 'blur' | |||||
| } | |||||
| ], | |||||
| phone: [ | |||||
| { | |||||
| required: true, | |||||
| trigger: 'change', | |||||
| message: 'Please enter your cell phone number', | |||||
| trigger: 'blur' | |||||
| }, | |||||
| { | |||||
| validator(rule, value, callback, source, options) { | |||||
| var errors = []; | |||||
| let phone = /^1[35789]\d{9}$/; | |||||
| if (value && !phone.test(value)) { | |||||
| callback('Sorry, please enter the correct cell phone number'); | |||||
| } | |||||
| callback(errors); | |||||
| } | |||||
| } | |||||
| ], | |||||
| email: [ | |||||
| { | |||||
| required: true, | |||||
| trigger: 'change', | |||||
| message: 'Please enter email!', | |||||
| trigger: 'blur' | |||||
| }, | |||||
| { | |||||
| validator(rule, value, callback, source, options) { | |||||
| var errors = []; | |||||
| let email = /^[^\s@]+@[^\s@]+\.[^\s@]+$/; | |||||
| if (value && !email.test(value)) { | |||||
| callback('Sorry, please enter the correct email address'); | |||||
| } | |||||
| callback(errors); | |||||
| } | |||||
| } | } | ||||
| ] | ] | ||||
| }, | }, | ||||
| @@ -55,14 +55,14 @@ | |||||
| </div> | </div> | ||||
| <el-dialog :title="characters == 1 ? '留下您的信息,我们会尽快与您取得联系' : 'Tell us about yourself, we ll be in touch right away.'" :visible.sync="dialogVisible" width="34%"> | <el-dialog :title="characters == 1 ? '留下您的信息,我们会尽快与您取得联系' : 'Tell us about yourself, we ll be in touch right away.'" :visible.sync="dialogVisible" width="34%"> | ||||
| <el-form ref="form" :rules="rules" :model="form"> | |||||
| <el-form ref="form" :rules="characters == 1 ? rules : rulesEnglish" :model="form"> | |||||
| <el-form-item class="width" prop="name"> | <el-form-item class="width" prop="name"> | ||||
| <el-input v-model="form.name" maxlength="10" :placeholder="characters == 1 ? '姓名' : 'Name'"></el-input> | <el-input v-model="form.name" maxlength="10" :placeholder="characters == 1 ? '姓名' : 'Name'"></el-input> | ||||
| </el-form-item> | </el-form-item> | ||||
| <el-form-item class="width" prop="phone"> | <el-form-item class="width" prop="phone"> | ||||
| <el-input v-model="form.phone" :placeholder="characters == 1 ? '手机' : 'Phone'"></el-input> | <el-input v-model="form.phone" :placeholder="characters == 1 ? '手机' : 'Phone'"></el-input> | ||||
| </el-form-item> | </el-form-item> | ||||
| <el-form-item class="width" prop="Pmail"> | |||||
| <el-form-item class="width" prop="email"> | |||||
| <el-input v-model="form.email" placeholder="Email"></el-input> | <el-input v-model="form.email" placeholder="Email"></el-input> | ||||
| </el-form-item> | </el-form-item> | ||||
| </el-form> | </el-form> | ||||
| @@ -124,7 +124,8 @@ export default { | |||||
| { | { | ||||
| required: true, | required: true, | ||||
| trigger: 'change', | trigger: 'change', | ||||
| message: '请先输手机号' | |||||
| message: '请先输手机号', | |||||
| trigger: 'blur' | |||||
| }, | }, | ||||
| { | { | ||||
| validator(rule, value, callback, source, options) { | validator(rule, value, callback, source, options) { | ||||
| @@ -142,7 +143,66 @@ export default { | |||||
| { | { | ||||
| required: true, | required: true, | ||||
| trigger: 'change', | trigger: 'change', | ||||
| message: '请先输邮箱' | |||||
| message: '请输入邮箱!', | |||||
| trigger: 'blur' | |||||
| }, | |||||
| { | |||||
| validator(rule, value, callback, source, options) { | |||||
| var errors = []; | |||||
| // var mobile = /^1[0|1|2|3|4|5|6|7|8|9]\d{9}$/, | |||||
| let email = /^[^\s@]+@[^\s@]+\.[^\s@]+$/; | |||||
| if (value && !email.test(value)) { | |||||
| callback('抱歉,请输入正确的邮箱'); | |||||
| } | |||||
| callback(errors); | |||||
| } | |||||
| } | |||||
| ] | |||||
| }, | |||||
| rulesEnglish: { | |||||
| name: [ | |||||
| { | |||||
| required: true, | |||||
| min: 1, | |||||
| max: 10, | |||||
| message: 'This item is required !', | |||||
| trigger: 'blur' | |||||
| } | |||||
| ], | |||||
| phone: [ | |||||
| { | |||||
| required: true, | |||||
| trigger: 'change', | |||||
| message: 'Please enter your cell phone number', | |||||
| trigger: 'blur' | |||||
| }, | |||||
| { | |||||
| validator(rule, value, callback, source, options) { | |||||
| var errors = []; | |||||
| let phone = /^1[35789]\d{9}$/; | |||||
| if (value && !phone.test(value)) { | |||||
| callback('Sorry, please enter the correct cell phone number'); | |||||
| } | |||||
| callback(errors); | |||||
| } | |||||
| } | |||||
| ], | |||||
| email: [ | |||||
| { | |||||
| required: true, | |||||
| trigger: 'change', | |||||
| message: 'Please enter email!', | |||||
| trigger: 'blur' | |||||
| }, | |||||
| { | |||||
| validator(rule, value, callback, source, options) { | |||||
| var errors = []; | |||||
| let email = /^[^\s@]+@[^\s@]+\.[^\s@]+$/; | |||||
| if (value && !email.test(value)) { | |||||
| callback('Sorry, please enter the correct email address'); | |||||
| } | |||||
| callback(errors); | |||||
| } | |||||
| } | } | ||||
| ] | ] | ||||
| }, | }, | ||||