校验效果
<div>
<el-form ref="userFormRef" :model="userForm" :rules="userFormRule" label-width="100px"
:status-icon="true"
>
<el-row :gutter="20">
<el-col :span="12">
<el-form-item label="姓名:" prop="name">
<el-input v-model="userForm.name" placeholder="请输入姓名" clearable />
</el-form-item>
</el-col>
<el-col :span="12">
<el-col :span="12">
<el-form-item label="年龄:" prop="age">
<el-input v-model.number="userForm.age" onkeyup="value=value.replace(/[^\d]+/g,'')" placeholder="请输入年龄" clearable />
</el-form-item>
</el-col>
</el-col>
</el-row>
<el-row :gutter="20">
<el-col :span="12">
<el-form-item label="电话:" prop="phone">
<el-input v-model="userForm.phone" placeholder="请输入手机号码" clearable />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="邮箱:" prop="email">
<el-input v-model="userForm.email" placeholder="请输入邮箱" clearable />
</el-form-item>
</el-col>
</el-row>
<el-form-item label="入学时间:" required>
<el-col :span="11">
<el-form-item prop="date">
<el-date-picker v-model="userForm.date" value-format="yyyy-MM-dd" type="date" placeholder="选择日期"
style="width: 100%;"
/>
</el-form-item>
</el-col>
<el-col :span="2" style="text-align:center">
-
</el-col>
<el-col :span="11">
<el-form-item prop="time">
<el-time-picker v-model="userForm.time" placeholder="选择时间" style="width: 100%;" />
</el-form-item>
</el-col>
</el-form-item>
<el-row :gutter="20">
<el-col :span="12">
<el-form-item label="性别:" prop="gender">
<el-radio-group v-model="userForm.gender">
<el-radio label="0">
男
</el-radio>
<el-radio label="1">
女
</el-radio>
</el-radio-group>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="体重:" prop="weight">
<el-input v-model="userForm.weight" oninput="value=value.replace(/[^0-9.]/g,'')"
placeholder="请输入体重"
clearable
>
<template slot="append">
kg
</template>
</el-input>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="12">
<el-form-item label="状态:" prop="state">
<el-switch v-model="userForm.state" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="年级:" prop="grade">
<el-select v-model="userForm.grade" placeholder="选择年级" style="width:100%" clearable>
<el-option label="一年级" value="one" />
<el-option label="二年级" value="two" />
</el-select>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="12">
<el-form-item label="出生地区:" prop="district">
<el-cascader
v-model="userForm.district"
:options="options"
:props="{ expandTrigger: 'hover' }"
@change="handleChange"
/>
</el-form-item>
</el-col>
</el-row>
<el-form-item label="个人特长:" prop="hobby">
<el-checkbox-group v-model="userForm.hobby">
<el-checkbox label="0" name="hobby">
画画
</el-checkbox>
<el-checkbox label="1" name="hobby">
打篮球
</el-checkbox>
<el-checkbox label="2" name="hobby">
弹琴
</el-checkbox>
<el-checkbox label="3" name="hobby">
毛笔字
</el-checkbox>
</el-checkbox-group>
</el-form-item>
<el-form-item label="备注:" prop="desc">
<el-input v-model="userForm.desc" placeholder="请填写备注" type="textarea" maxlength="50"
show-word-limit :rows="4"
/>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="submitForm()">
提交
</el-button>
<el-button @click="resetForm()">
重置
</el-button>
</el-form-item>
</el-form>
</div>
data () {
let cheackMobile = (rule, value, cb) => {
// 手机号一般最小以“13”开头
const regMobile = /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/
if (regMobile.test(value)) {
return cb()
}
cb(new Error('请输入合法的手机号!'))
}
let checkEmail = (rule, value, callback) => {
const mailReg = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+/
setTimeout(() => {
if (mailReg.test(value)) {
callback()
} else {
callback(new Error('请输入正确的邮箱格式'))
}
}, 100)
}
return {
userForm: {
name: '',
age: 0, // 限制输入0和正整数
phone: '',
email: '',
grade: '',
district: [], // 三级的ID
weight: '0.00', // 整数或两位小数
date: '',
time: '',
state: false,
gender: '',
hobby: [],
desc: ''
},
options: [
{
value: '1',
label: '陕西省',
children: [
{
value: '1-1',
label: '安康市',
children: [
{
value: '1-1-1',
label: '汉滨区'
}, {
value: '1-1-2',
label: '石泉'
}
]
}, {
value: '1-2',
label: '西安市',
children: [
{
value: '1-2-1',
label: '长安区'
}, {
value: '1-2-2',
label: '雁塔区'
}
]
}
]
}, {
value: '2',
label: '河南',
children: [
{
value: '2-1',
label: '洛阳'
}, {
value: '2-2',
label: '平顶山'
}
]
}
],
userFormRule: {
name: [
{ required: true, message: '请输入姓名', trigger: 'blur' },
{ min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
],
age: [{ required: true, message: '请输入年龄', trigger: 'blur' }],
phone: [
{ required: true, message: '电话为必填项，请输入电话!', trigger: 'blur' },
{ validator: cheackMobile, trigger: 'blur' }
],
email: [
{ required: true, message: '邮箱为必填项，请输入邮箱!', trigger: 'blur' },
{ validator: checkEmail, trigger: 'blur' }
],
grade: [{ required: true, message: '请选择年级', trigger: 'change' }],
district: [{ required: true, message: '请选择出生地区', trigger: 'change' }],
weight: [
{ required: true, trigger: 'blur', message: '请输入体重' },
{ pattern: /(^[1-9]([0-9]+)?(\.[0-9]{1,2})?$)|(^(0){1}$)|(^[0-9]\.[0-9]([0-9])?$)/, message: '请输入正确的格式,可保留两位小数' }
],
date: [{ required: true, message: '请选择日期', trigger: 'change' }],
time: [{ required: true, message: '请选择时间', trigger: 'change' }],
gender: [{ required: true, message: '请选择性别', trigger: 'change' }],
hobby: [{ type: 'array', required: true, message: '请至少选择一个爱好', trigger: 'change' }],
desc: [{ required: true, message: '请填写备注', trigger: 'blur' }]
}
}
},
methods: {
// 提交表单
submitForm () {
this.$refs['userFormRef'].validate(valid => {
if (valid) {
console.log('valid success!!')
// 可能要向后端提交的数据，这块调用接口
console.log('userForm', this.userForm)
} else {
console.log('valid error!!')
return false
}
})
},
//重置表单
resetForm () {
this.$refs['userFormRef'].resetFields()
},
// 级联选择器发生变化触发的事件，打印出选中的值
handleChange (value) {
// value值最终是一个数组，例如：用户选择‘陕西省->安康市->汉滨区’，则打印出的value值为：['1','1-1','1-1-1']
console.log(value)
}
}
