<template>
|
<el-main>
|
<el-card shadow="never" header="async-validator内置">
|
<el-form ref="form" :model="form" :rules="rules" label-width="100px" status-icon>
|
<el-form-item label="必填" prop="required">
|
<el-input v-model="form.required"></el-input>
|
</el-form-item>
|
<el-form-item label="长度" prop="length">
|
<el-input v-model="form.length" placeholder="长度需为3位"></el-input>
|
</el-form-item>
|
<el-form-item label="类型" prop="type">
|
<el-input v-model="form.type" placeholder="类型可为string number boolean array date url email等"></el-input>
|
</el-form-item>
|
<el-form-item label="范围" prop="range">
|
<el-input v-model="form.range" placeholder="请填写范围在3至5位"></el-input>
|
</el-form-item>
|
<el-form-item label="枚举" prop="enum">
|
<el-input v-model="form.enum" placeholder="请填写admin，user，guest其一"></el-input>
|
</el-form-item>
|
<el-form-item label="自定义" prop="custom">
|
<el-input v-model="form.custom" placeholder="请填写数字1"></el-input>
|
</el-form-item>
|
<el-form-item label="异步验证" prop="async">
|
<el-input v-model="form.async" placeholder="请输入SCUI最新版本号,form开启status-icon后 可以查看右侧状态"></el-input>
|
</el-form-item>
|
<el-form-item>
|
<el-button type="primary" @click="submit">验证所有字段</el-button>
|
<el-button @click="resetForm('form')">Reset</el-button>
|
</el-form-item>
|
</el-form>
|
</el-card>
|
<el-card shadow="never" header="自定义" style="margin-top: 15px;">
|
<el-form ref="form2" :model="form2" :rules="rules2" label-width="100px" status-icon>
|
<el-form-item label="手机号码" prop="phone">
|
<el-input v-model="form2.phone"></el-input>
|
</el-form-item>
|
<el-form-item label="车牌号码" prop="cars">
|
<el-input v-model="form2.cars"></el-input>
|
</el-form-item>
|
<el-form-item>
|
<el-button type="primary" @click="submit2">验证所有字段</el-button>
|
<el-button @click="resetForm('form2')">Reset</el-button>
|
</el-form-item>
|
</el-form>
|
<el-alert title="自定义验证可在 @/utils/verificate.js 中不断扩展业务需要的验证. 记得要 import 进来" type="success" />
|
</el-card>
|
</el-main>
|
</template>
|
|
<script>
|
import { verifyPhone, verifyCars } from '@/utils/verificate'
|
|
export default {
|
name: 'verificate',
|
data() {
|
return {
|
form: {
|
|
},
|
rules: {
|
required: [
|
{ required: true, message: '请填写' }
|
],
|
length: [
|
{ required: true, len: 3, message: '长度需为3位' }
|
],
|
type: [
|
{ required: true, type: 'email', message: '类型需为email' }
|
],
|
range: [
|
{ required: true, min: 3, max: 5, message: '范围在3至5位' }
|
],
|
enum: [
|
{ required: true, type: 'enum', enum: ['admin', 'user', 'guest'], message: '请填写admin，user，guest其一' }
|
],
|
custom: [
|
{ required: true, validator: (rule, value)=>{return value === '1'}, message: '请填写数字1' , trigger:'blur'}
|
],
|
// async: [
|
// {
|
// required: true,
|
// validator: (rule, value, callback)=>{
|
// this.$API.demo.ver.get({value: value}).then(res => {
|
// if(res.data != value){
|
// return callback(new Error('请输入SCUI最新版本号：'+res.data))
|
// }
|
// callback()
|
// })
|
// },
|
// trigger:'blur'
|
// }
|
// ]
|
},
|
form2: {
|
|
},
|
rules2: {
|
phone: [
|
{ required: true, message: '请输入姓名' },
|
{ validator: verifyPhone, trigger:'blur' }
|
],
|
cars: [
|
{ required: true, validator: verifyCars, trigger:'blur' }
|
]
|
}
|
}
|
},
|
mounted() {
|
|
},
|
methods: {
|
submit(){
|
this.$refs.form.validate(async (valid) => {
|
if (valid) {
|
this.$message.success("全部验证通过")
|
}else{
|
return false;
|
}
|
})
|
},
|
submit2(){
|
this.$refs.form2.validate(async (valid) => {
|
if (valid) {
|
this.$message.success("全部验证通过")
|
}else{
|
return false;
|
}
|
})
|
},
|
resetForm(ref){
|
this.$refs[ref].resetFields()
|
}
|
}
|
}
|
</script>
|
|
<style>
|
|
</style>
|
