vue3 rules 验证框架的简单入门用法，快速上手

1. ant-design-vue rules

<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. element-plus  rules

<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>

注意：自定义验证表单方法时候不用使用 异步操作 async 否则会导致验证信息message 赋值（错误提示信息不显示）