1. reglas de ant-design-vue
<template>
// 定义 a-form 表单 添加 动态属性 :model 表单值属性 ，: rulse 表单验证属性
<a-form
ref="formRef"
name="custom-validation"
:model="formState"
:rules="rules"
>
// *****注意这里的值是 name 不再是 porp****//
<a-form-item label="Password" name="pass">
<a-input v-model:value="formState.pass" type="password" />
</a-form-item>
<a-form-item label="Confirm" name="checkPass">
<a-input v-model:value="formState.checkPass" type="password" />
</a-form-item>
<a-form-item label="Age" name="age">
<a-input-number v-model:value="formState.age" />
</a-form-item>
<a-form-item :wrapper-col="{ span: 14, offset: 4 }">
<a-button type="primary" html-type="submit">Submit</a-button>
</a-form-item>
</a-form>
</template>
<script lang="ts">
import type { Rule } from 'ant-design-vue/es/form';
import { defineComponent, reactive } from 'vue';
// 定义表单数据类型接口
interface FormState {
pass: string;
checkPass: string;
age: number | undefined;
}
export default defineComponent({
setup() {
// reactive定义 表单双向数据绑定
const formState = reactive<FormState>({
pass: '',
checkPass: '',
age: undefined,
});
// 自定义 表单验字段证方法
let checkAge = (_rule: Rule, value: number) => {
if (!value) {
return Promise.reject('Please input the age');
}
setTimeout(() => {
if (!Number.isInteger(value)) {
return Promise.reject('Please input digits');
} else {
if (value < 18) {
return Promise.reject('Age must be greater than 18');
} else {
return Promise.resolve();
}
},1000}
};
let validatePass = (_rule: Rule, value: string) => {
if (value === '') {
return Promise.reject('Please input the password');
} else {
if (formState.checkPass !== '') {
}
return Promise.resolve();
}
};
let validatePass2 = (_rule: Rule, value: string) => {
if (value === '') {
return Promise.reject('Please input the password again');
} else if (value !== formState.pass) {
return Promise.reject("Two inputs don't match!");
} else {
return Promise.resolve();
}
};
// 定义 rules 验证属性 这里Record<string, Rule[]> 是定义rules 数据类型为key value 链表数据，其中value 数据类型为Rule[]
const rules: Record<string, Rule[]> = {
pass: [{ required: true, validator: validatePass, trigger: 'change' }],
checkPass: [{ validator: validatePass2, trigger: 'change' }],
age: [{ validator: checkAge, trigger: 'change' }],
};
return {
formState,
rules
};
},
});
</script>
2. Reglas de elementos adicionales
<template>
// 定义 el-form 定义 表单数据model,如果不定义这个 rules 是获取不到 验证字段的值的，定义rules 属性
<el-form
size="large"
class="login-content-form"
:model="ruleForm"
:rules="rules"
>
// 注意这里的 form-item 属性是prop 与 ant 做区分
<el-form-item class="login-animation1" prop="userName" >
<el-input type="text" placeholder="账户" v-model="ruleForm.userName">
</el-input>
</el-form-item>
<el-form-item class="login-animation2" prop="password">
<el-input placeholder="密码" v-model="ruleForm.password" >
</el-input>
</el-form-item>
<el-form-item class="login-animation3" prop="code">
<el-col :span="15">
<el-input type="text" maxlength="5" placeholder="验证码" v-model="ruleForm.code" >
</el-input>
</el-col>
<el-col :span="1"></el-col>
<el-col :span="8">
<el-button class="login-content-code">
<el-image style="width: 100px; " />
</el-button>
</el-col>
</el-form-item>
<el-form-item class="login-animation4">
<el-button type="primary" class="login-content-submit" >
<span>{
{ "登录"}}</span>
</el-button>
</el-form-item>
</el-form>
</template>
<script lang="ts">
import { reactive, defineComponent} from 'vue';
export default defineComponent({
name: 'loginAccount',
setup() {
const ruleForm = reactive({
userName: '',
password: '',
code: '',
})
// 验证验证码
const checkCode=(rule: any, value: any, callback: any) => {
console.log(value,"value")
}
// 自定义表单验证
const rules = reactive({
userName: [
{ required: true, message: '请输入账号', trigger: 'blur' },
{ min: 3, max: 5, message: '账号长度 在 3 到 5长度之间', trigger: 'blur' },
],
password: [
{ required: true, message: '请输入密码', trigger: 'blur' },
{ min: 3, max: 5, message: '密码长度 在 3 到 5长度之间', trigger: 'blur' },
],
code: [
{ required: true, message: '请输入验证码', trigger: 'blur' },
{ validator: checkCode, trigger: 'change' },
],
})
return {
rules,
ruleForm
};
},
});
</script>
Nota: No utilice la operación asíncrona asíncrona al personalizar el método del formulario de verificación, de lo contrario, provocará la asignación del mensaje de información de verificación (no se mostrará el mensaje de error)