关于ElementPlus中表单的校验规则,官网文档已经给出了,但是没有说明性文字,所以我想来记录一下,给出一些文字说明
ElementPlus中的简单校验
ElementPlus的表单的一般结构是:
<el-form><el-form-item><el-input/></el-form-item>
</el-form>
ElementPlus中使用表单校验规则:
- 在
<script>
中给出校验规则对象,主要属性名要与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位' }]
})
在模版中:
<el-form>
中rules
属性绑定规则校验对象<el-form-item>
中prop
属性绑定规则对象的某个字段
<!--:model 绑定表单对象:rules 绑定表单的校验规则
-->
<el-formstatus-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>
演示效果
自定义校验规则
在<script>
中的规则中,数组中的每一个对象都是一个校验规则,我们只需要给一个对象给出validator()
方法的实现即可:
该方法有三个参数:
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>
演示效果
表单统一校验
如果用户什么都不输入,直接点击登录,那么每个字段的校验规则是不生效的,因为此字段还没有输入。
为了避免用户在不操作表单的情况下,直接提交表单,可以在用户点击提交按钮后,对所有的字段重新激活一次校验。
通过表单对象的一个方法validate()
方法,对整个表单的所有内容进行一次验证。
form.validate(callback)
此方法接收一个回调函数,回调函数的第一个参数,是布尔类型,当所有的校验规则都通过时,此值是true,否则false
回调函数的第二个参数是校验未通过的所有字段的数组
在form表单中通过ref属性标识一下
<el-form ref="formRef">
</el-form>
<script>部分
// 获取form表单引用
const formRef = ref(null)
// 当点击登录按钮时的函数
const submit = () => {// 获取到真正的表单元素formRef.value.validate((isValid, invalidFields) => {if (isValid) {// 表单所有元素验证通过,可以提交了console.log('验证通过')} else {console.log(invalidFields)console.log('验证不通过,不能提交,请检查')}})
}