140 lines
4.1 KiB
Vue
140 lines
4.1 KiB
Vue
<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>
|