本书未发布
element 表单规则
bind 绑定对象
<script lang="ts">
import { Setup, Context } from 'vue-class-setup';
import type { FormInstance } from 'element-plus'
interface Wings {
fly(): void;
}
@Setup
class FormClass extends Context implements Wings {
fly(): void {
console.log("fly");
}
public ruleFormRef: FormInstance = undefined
setRuleFormRef(ruleFormRef: FormInstance) {
this.ruleFormRef = ruleFormRef
}
logRuleFormRef(){
console.log("logRuleFormRef ", this.ruleForm);
}
public ruleForm = {
pass: '',
checkPass: '',
age: '',
};
/*
---------------------------------------------------
bind 绑定对象
---------------------------------------------------
*/
public rules = {
pass: [{ validator: this.validatePass.bind(this), trigger: 'blur' }],
checkPass: [{ validator: this.validatePass2.bind(this), trigger: 'blur' }],
age: [{ validator: this.checkAge.bind(this), trigger: 'blur' }],
}
setRules(rules:any){
this.rules = rules
}
public checkAge(rule: any, value: any, callback: any) {
console.log("age rule value", value);
if (!value) {
return callback(new Error('Please input the age'))
}
setTimeout(() => {
if (!Number.isInteger(value)) {
callback(new Error('Please input digits'))
} else {
if (value < 18) {
callback(new Error('Age must be greater than 18'))
} else {
callback()
}
}
}, 1000)
}
public validatePass(rule: any, value: any, callback: any) {
// this.logRuleFormRef()
console.log("this.ruleForm validatePass ", this.ruleForm, value);
if (value === '') {
callback(new Error('Please input the password'))
} else {
if (this.ruleForm.checkPass !== '') {
if (!this.ruleFormRef) return
this.ruleFormRef.validateField('checkPass', () => null)
}
callback()
}
}
public validatePass2(rule: any, value: any, callback: any) {
if (value === '') {
callback(new Error('Please input the password again'))
} else if (value !== this.ruleForm.pass) {
callback(new Error("Two inputs don't match!"))
} else {
callback()
}
}
public submitForm(formEl: FormInstance | undefined) {
console.log("this.ruleForm ", this.ruleForm);
if (!formEl) return
formEl.validate((valid) => {
if (valid) {
console.log('submit!')
} else {
console.log('error submit!')
return false
}
})
}
public resetForm(formEl: FormInstance | undefined) {
if (!formEl) return
formEl.resetFields()
}
}
export default defineComponent({
...FormClass.inject(),
});
</script>
<script setup lang="ts">
import { defineComponent, defineExpose } from 'vue';
</script>
<template>
<div style="height: 600px; width: 600px;">
<el-form ref="ruleFormRef" :model="ruleForm" status-icon :rules="rules" label-width="120px"
class="demo-ruleForm">
<el-form-item label="Password" prop="pass">
<el-input v-model="ruleForm.pass" type="password" autocomplete="off" />
</el-form-item>
<el-form-item label="Confirm" prop="checkPass">
<el-input v-model="ruleForm.checkPass" type="password" autocomplete="off" />
</el-form-item>
<el-form-item label="Age" prop="age">
<el-input v-model.number="ruleForm.age" />
</el-form-item>
<el-form-item>
<el-button type="primary" @click="submitForm(ruleFormRef)">Submit</el-button>
<el-button @click="resetForm(ruleFormRef)">Reset</el-button>
</el-form-item>
</el-form>
</div>
</template>
<style lang="scss" scoped>
</style>
rules get 方法提供
<script lang="ts">
import { Setup, Context } from 'vue-class-setup';
import type { FormInstance } from 'element-plus'
interface Wings {
fly(): void;
}
@Setup
class FormClass extends Context implements Wings {
fly(): void {
console.log("fly");
}
public ruleFormRef: FormInstance = undefined
setRuleFormRef(ruleFormRef: FormInstance) {
this.ruleFormRef = ruleFormRef
}
logRuleFormRef() {
console.log("logRuleFormRef ", this.ruleForm);
}
public ruleForm = {
pass: '',
checkPass: '',
age: '',
};
/*
---------------------------------------------------
rules get 方法提供
---------------------------------------------------
*/
get rules(): object {
return {
pass: [{ validator: this.validatePass, trigger: 'blur' }],
checkPass: [{ validator: this.validatePass2, trigger: 'blur' }],
age: [{ validator: this.checkAge, trigger: 'blur' }],
}
}
public checkAge(rule: any, value: any, callback: any) {
console.log("age rule value", value);
if (!value) {
return callback(new Error('Please input the age'))
}
setTimeout(() => {
if (!Number.isInteger(value)) {
callback(new Error('Please input digits'))
} else {
if (value < 18) {
callback(new Error('Age must be greater than 18'))
} else {
callback()
}
}
}, 1000)
}
public validatePass(rule: any, value: any, callback: any) {
// this.logRuleFormRef()
console.log("this.ruleForm validatePass ", this.ruleForm, value);
if (value === '') {
callback(new Error('Please input the password'))
} else {
if (this.ruleForm.checkPass !== '') {
if (!this.ruleFormRef) return
this.ruleFormRef.validateField('checkPass', () => null)
}
callback()
}
}
public validatePass2(rule: any, value: any, callback: any) {
if (value === '') {
callback(new Error('Please input the password again'))
} else if (value !== this.ruleForm.pass) {
callback(new Error("Two inputs don't match!"))
} else {
callback()
}
}
public submitForm(formEl: FormInstance | undefined) {
console.log("this.ruleForm ", this.ruleForm);
if (!formEl) return
formEl.validate((valid) => {
if (valid) {
console.log('submit!')
} else {
console.log('error submit!')
return false
}
})
}
public resetForm(formEl: FormInstance | undefined) {
if (!formEl) return
formEl.resetFields()
}
}
export default defineComponent({
...FormClass.inject(),
});
</script>
<script setup lang="ts">
import { defineComponent, defineExpose } from 'vue';
</script>
<template>
<div style="height: 600px; width: 600px;">
<el-form ref="ruleFormRef" :model="ruleForm" status-icon :rules="rules" label-width="120px" class="demo-ruleForm">
<el-form-item label="Password" prop="pass">
<el-input v-model="ruleForm.pass" type="password" autocomplete="off" />
</el-form-item>
<el-form-item label="Confirm" prop="checkPass">
<el-input v-model="ruleForm.checkPass" type="password" autocomplete="off" />
</el-form-item>
<el-form-item label="Age" prop="age">
<el-input v-model.number="ruleForm.age" />
</el-form-item>
<el-form-item>
<el-button type="primary" @click="submitForm(ruleFormRef)">Submit</el-button>
<el-button @click="resetForm(ruleFormRef)">Reset</el-button>
</el-form-item>
</el-form>
</div>
</template>
<style lang="scss" scoped>
</style>
利用生命周期,在 onMounted 中设置规则
<script lang="ts">
import { Setup, Context, PassOnTo } from 'vue-class-setup';
import type { FormInstance } from 'element-plus'
import {onMounted} from 'vue';
interface Wings {
fly(): void;
}
@Setup
class FormClass extends Context implements Wings {
fly(): void {
console.log("fly");
}
public ruleFormRef: FormInstance = undefined
setRuleFormRef(ruleFormRef: FormInstance) {
this.ruleFormRef = ruleFormRef
}
logRuleFormRef() {
console.log("logRuleFormRef ", this.ruleForm);
}
public ruleForm = {
pass: '',
checkPass: '',
age: '',
};
public rules : object
/*
---------------------------------------------------
PassOnTo
---------------------------------------------------
*/
@PassOnTo(onMounted)
public setRules() {
this.rules = {
pass: [{ validator: this.validatePass, trigger: 'blur' }],
checkPass: [{ validator: this.validatePass2, trigger: 'blur' }],
age: [{ validator: this.checkAge, trigger: 'blur' }],
}
}
public checkAge(rule: any, value: any, callback: any) {
console.log("age rule value", value);
if (!value) {
return callback(new Error('Please input the age'))
}
setTimeout(() => {
if (!Number.isInteger(value)) {
callback(new Error('Please input digits'))
} else {
if (value < 18) {
callback(new Error('Age must be greater than 18'))
} else {
callback()
}
}
}, 1000)
}
public validatePass(rule: any, value: any, callback: any) {
// this.logRuleFormRef()
console.log("this.ruleForm validatePass ", this.ruleForm, value);
if (value === '') {
callback(new Error('Please input the password'))
} else {
if (this.ruleForm.checkPass !== '') {
if (!this.ruleFormRef) return
this.ruleFormRef.validateField('checkPass', () => null)
}
callback()
}
}
public validatePass2(rule: any, value: any, callback: any) {
if (value === '') {
callback(new Error('Please input the password again'))
} else if (value !== this.ruleForm.pass) {
callback(new Error("Two inputs don't match!"))
} else {
callback()
}
}
public submitForm(formEl: FormInstance | undefined) {
console.log("this.ruleForm ", this.ruleForm);
if (!formEl) return
formEl.validate((valid) => {
if (valid) {
console.log('submit!')
} else {
console.log('error submit!')
return false
}
})
}
public resetForm(formEl: FormInstance | undefined) {
if (!formEl) return
formEl.resetFields()
}
}
export default defineComponent({
...FormClass.inject(),
});
</script>
<script setup lang="ts">
import { defineComponent, defineExpose } from 'vue';
</script>
<template>
<div style="height: 600px; width: 600px;">
<el-form ref="ruleFormRef" :model="ruleForm" status-icon :rules="rules" label-width="120px" class="demo-ruleForm">
<el-form-item label="Password" prop="pass">
<el-input v-model="ruleForm.pass" type="password" autocomplete="off" />
</el-form-item>
<el-form-item label="Confirm" prop="checkPass">
<el-input v-model="ruleForm.checkPass" type="password" autocomplete="off" />
</el-form-item>
<el-form-item label="Age" prop="age">
<el-input v-model.number="ruleForm.age" />
</el-form-item>
<el-form-item>
<el-button type="primary" @click="submitForm(ruleFormRef)">Submit</el-button>
<el-button @click="resetForm(ruleFormRef)">Reset</el-button>
</el-form-item>
</el-form>
</div>
</template>
<style lang="scss" scoped>
</style>
推荐文章: