@@ -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); | |||||
} | |||||
} | } | ||||
] | ] | ||||
}, | }, | ||||