关于ElementPlus中的表单验证规则详解

<el-form>
	<el-form-item>
		<el-input/>
	</el-form-item>
</el-form>

// 收集表单数据
const form = reactive({
  account: '',
  password: '',
  agree: false
})
// 定义校验规则
// 可以为一个字段指定多条校验规则
// 规则名称与form表单字段一致
const rules = reactive({
  account: [
    // required是否必填,message不符合此规则时的提示信息,
    // trigger触发此条规则校验的时机，有两个值, blur 或 change,默认就是blur和change都会进行校验
    // min此字段的最小长度，max此字段的最大长度
    // pattern 正则表达式
    { required: true, message: '账户不能为空', trigger: 'blur' },
    { min: 6, max: 14, message: '用户名长度为6 - 14位' }
  ]
})

<!--
  :model 绑定表单对象
  :rules 绑定表单的校验规则
-->
<el-form
  status-icon
  :model="form"
  :rules="rules"
>
  <!--
	label标签名
	prop属性,指定校验规则中的
  -->
  <el-form-item label="账户" prop="account">
	<!-- v-model将值收集到哪个变量中 -->
	<el-input v-model="form.account" />
  </el-form-item>
  <el-form-item label="密码">
	<el-input v-model="form.password" />
  </el-form-item>
  <el-button size="large" class="subBtn">点击登录</el-button>
</el-form>

validator(rule, value, callback){
	// rule此条规则的描述信息
	// value表单中此字段的值
	// 回调函数,通过此函数控制是否校验通过
}

// 定义校验规则
const rules = reactive({
// 普通的校验规则
  account: [
    { required: true, message: '账户不能为空', trigger: 'blur' },
    { min: 6, max: 14, message: '用户名长度为6 - 14位' }
  ],
  password: [
  // 自定义校验规则
    {
      validator(rule, value, callback) {
        if (value[0] === '0') {
	      // 校验不通过
          return callback(new Error('密码字段的第一位不能是0'))
        } else {
          // 校验通过
          callback()
        }
      }
    }
  ]
})

<el-form
  :model="form"
  :rules="rules"
>
  <!--
	label标签名
	prop属性,指定校验规则中的
  -->
  <el-form-item label="账户" prop="account">
	<!-- v-model将值收集到哪个变量中 -->
	<el-input v-model="form.account" />
  </el-form-item>
  <el-form-item label="密码" prop="password">
	<el-input v-model="form.password" />
  </el-form-item>
  <el-button size="large" class="subBtn">点击登录</el-button>
</el-form>

form.validate(callback)

<el-form ref="formRef">
</el-form>

// 获取form表单引用
const formRef = ref(null)
// 当点击登录按钮时的函数
const submit = () => {
  // 获取到真正的表单元素
  formRef.value.validate((isValid, invalidFields) => {
    if (isValid) {
      // 表单所有元素验证通过，可以提交了
      console.log('验证通过')
    } else {
      console.log(invalidFields)
      console.log('验证不通过,不能提交,请检查')
    }
  })
}