Browse Source

表单验证

ctt_ywq
congzc 2 years ago
parent
commit
d34fbdec30
6 changed files with 970 additions and 558 deletions
  1. +184
    -40
      src/components/common/tail.vue
  2. +71
    -9
      src/components/home/home.vue
  3. +64
    -6
      src/components/views/generate.vue
  4. +64
    -4
      src/components/views/live.vue
  5. +64
    -4
      src/components/views/shadow.vue
  6. +523
    -495
      src/components/views/turing.vue

+ 184
- 40
src/components/common/tail.vue View File

@@ -21,22 +21,30 @@
<div class="taolIconText">
{{ characters == 1 ? '联系我们' : 'Contact us' }}
</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>
</div>
<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>
</div>
<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>
</div>
<div class="subBtn" @click="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 class="rqCodeBox">
@@ -84,44 +92,158 @@ export default {
return {
userName: '',
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: {
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: {
@@ -209,6 +331,28 @@ export default {
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 {
width: 360px;


+ 71
- 9
src/components/home/home.vue View File

@@ -293,14 +293,14 @@
</div>
<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-input v-model="form.name" 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="Pmail">
<el-form-item class="width" prop="email">
<el-input v-model="form.email" placeholder="Email"></el-input>
</el-form-item>
</el-form>
@@ -336,19 +336,15 @@ export default {
url: require('../../assets/img/en.jpg')
}
],
//
userName: '',
phone: '',
email: '',
form: {
name: '',
phone: '',
email: ''
},
rules: {
name: [
{
@@ -363,7 +359,8 @@ export default {
{
required: true,
trigger: 'change',
message: '请先输手机号'
message: '请先输手机号',
trigger: 'blur'
},
{
validator(rule, value, callback, source, options) {
@@ -381,7 +378,66 @@ export default {
{
required: true,
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>
<style lang="scss" scoped>
::v-deep .el-form-item {
// width: 300px;
margin-bottom: 20px;
}
.Box {
width: 100%;
overflow: hidden;
@@ -1158,7 +1218,9 @@ export default {
}
}
.module_6 {
height: 1080px;
// margin-top: -100px;
height: 880px;
// height: 1080px;
background-color: #fff;
.title {
text-align: center;


+ 64
- 6
src/components/views/generate.vue View File

@@ -52,14 +52,14 @@
</div>
<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-input v-model="form.name" 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="Pmail">
<el-form-item class="width" prop="email">
<el-input v-model="form.email" placeholder="Email"></el-input>
</el-form-item>
</el-form>
@@ -94,9 +94,7 @@ export default {
url: require('../../assets/img/en.jpg')
}
],
//
userName: '',
phone: '',
email: '',
@@ -121,7 +119,8 @@ export default {
{
required: true,
trigger: 'change',
message: '请先输手机号'
message: '请先输手机号',
trigger: 'blur'
},
{
validator(rule, value, callback, source, options) {
@@ -139,7 +138,66 @@ export default {
{
required: true,
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);
}
}
]
},


+ 64
- 4
src/components/views/live.vue View File

@@ -60,14 +60,14 @@
</div>
<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-input v-model="form.name" 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="Pmail">
<el-form-item class="width" prop="email">
<el-input v-model="form.email" placeholder="Email"></el-input>
</el-form-item>
</el-form>
@@ -129,7 +129,8 @@ export default {
{
required: true,
trigger: 'change',
message: '请先输手机号'
message: '请先输手机号',
trigger: 'blur'
},
{
validator(rule, value, callback, source, options) {
@@ -147,7 +148,66 @@ export default {
{
required: true,
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);
}
}
]
},


+ 64
- 4
src/components/views/shadow.vue View File

@@ -55,14 +55,14 @@
</div>
<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-input v-model="form.name" 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="Pmail">
<el-form-item class="width" prop="email">
<el-input v-model="form.email" placeholder="Email"></el-input>
</el-form-item>
</el-form>
@@ -124,7 +124,8 @@ export default {
{
required: true,
trigger: 'change',
message: '请先输手机号'
message: '请先输手机号',
trigger: 'blur'
},
{
validator(rule, value, callback, source, options) {
@@ -142,7 +143,66 @@ export default {
{
required: true,
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);
}
}
]
},


+ 523
- 495
src/components/views/turing.vue
File diff suppressed because it is too large
View File


Loading…
Cancel
Save