<template>
<div>
<el-form label-position="left" :model="ruleForm"
:rules="rules" ref="ruleForm" label-width="110px" class="demo-ruleForm">
<el-form-item label="选择设备故障:" prop="region1" style="display: inline-block;">
<el-select v-model="ruleForm.region1" placeholder="请选择品牌">
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
</el-form-item>
<el-form-item prop="region2" style="display: inline-block;margin-left: -100px;">
<el-select v-model="ruleForm.region2" placeholder="请选择机型">
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
</el-form-item>
<el-form-item prop="region3" style="display: inline-block;margin-left: -100px;">
<el-select v-model="ruleForm.region3" placeholder="请选择故障类型">
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
</el-form-item>
<el-form-item>
<p>如需要,可填写更多故障类型</p>
<el-input
style="width: 500px;"
type="textarea"
placeholder="可填写更多故障现象"
v-model="textarea"
maxlength="100"
show-word-limit
>
</el-input>
</el-form-item>
<div>
<el-form-item label="选择地区:" prop="province" style="display: inline-block;">
<el-select v-model="ruleForm.province" placeholder="请选择省">
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
</el-form-item>
<el-form-item prop="city" style="display: inline-block;margin-left: -100px;">
<el-select v-model="ruleForm.city" placeholder="请选择市">
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
</el-form-item>
</div>
<el-form-item label="填写联系方式:" prop="tel" style="display: inline-block;">
<el-input style="width: 200px;" v-model="ruleForm.tel"
placeholder="联系电话"></el-input>
</el-form-item>
<el-form-item prop="name" style="display: inline-block;margin-left: -100px;">
<el-input style="width: 200px;" v-model="ruleForm.name"
placeholder="姓名"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="submitForm('ruleForm')">确认预约</el-button>
<el-button @click="resetForm('ruleForm')">重置</el-button>
</el-form-item>
</el-form>
</div>
</template>
<script>
import Format from '@/utils/validator.js'
export default{
data(){
return{
ruleForm: {
region1: '',
region2: '',
region3: '',
province: '',
city: '',
tel: '',
name: '',
},
rules: {
region1: [
{ required: true, message: '请选择品牌', trigger: 'change' }
],
region2: [
{ required: true, message: '请选择机型', trigger: 'change' }
],
region3: [
{ required: true, message: '请选择故障类型', trigger: 'change' }
],
province: [
{ required: true, message: '请选择省', trigger: 'change' }
],
city: [
{ required: true, message: '请选择市', trigger: 'change' }
],
tel: [
{ required: true,validator: Format.FormValidate.Form().Tel,trigger: 'blur' }
],
name: [
{ required: true, message: '请输入姓名', trigger: 'blur' },
{ min: 2, max: 6, message: '长度在 2 到 6 个字符', trigger: 'blur' }
],
},
options: [
{
value: '选项1',
label: '黄金糕'
}, {
value: '选项2',
label: '双皮奶'
}, {
value: '选项3',
label: '蚵仔煎'
}, {
value: '选项4',
label: '龙须面'
}, {
value: '选项5',
label: '北京烤鸭'
}
],
text: '',
textarea: '',
}
},
methods:{
submitForm(formName) {
this.$refs[formName].validate((valid) => {
if (valid) {
alert('submit!');
} else {
console.log('error submit!!');
return false;
}
});
},
resetForm(formName) {
this.$refs[formName].resetFields();
}
}
}
</script>
<style lang="scss" scoped>
</style>
let regId = /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/
let email = /^(\w+\.?)*\w+@(?:\w+\.)\w+$/
let tel = /^1[3456789]\d{9}$/
let fax = /^(\d{3,4}-)?\d{7,8}$/
let name = /^[\u4E00-\u9FA5\uf900-\ufa2d·s]{2,10}$/;
let FormValidate = (function() {
function FormValidate() {}
FormValidate.Form = function() {
return {
Name: function(rule, value, callback) {
if (!value) {
return callback(new Error('姓名不能为空'))
}
if (!name.test(value)) {
callback(new Error('请输入正确姓名!'))
} else {
callback()
}
},
Email: function(rule, value, callback) {
if (!value) {
return callback(new Error('邮箱不能为空'))
}
if (!email.test(value)) {
callback(new Error('请输入正确的邮箱!'))
} else {
callback()
}
},
ID: function(rule, value, callback) {
if (!value) {
return callback(new Error('身份证不能为空'))
}
if (!regId.test(value)) {
callback(new Error('请输入正确的二代身份证号码'))
} else {
callback()
}
},
Tel: (rule, value, callback) => {
if (!value) {
return callback(new Error('电话不能为空'))
}
if (!tel.test(value)) {
callback(new Error('请正确填写电话号码'))
} else {
callback()
}
}
}
}
FormValidate.FormOne = function() {
return {
Name: function(rule, value, callback) {
if (!value) {
return callback(new Error('姓名不能为空'))
}
if (!name.test(value)) {
callback(new Error('请输入正确姓名!'))
} else {
callback()
}
}
}
}
return FormValidate
}())
exports.FormValidate = FormValidate
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/8171acfee72a4ed7276d37330b02210f.png)