elementui使用rules详解

ElementUI是一款基于Vue.js的UI组件库，在开发表单时经常需要对输入的内容进行验证，ElementUI提供了rules属性来进行表单验证。rules属性是一个输入框校验的规则，包含回调函数和验证信息。在表单项中设定rules属性后，输入框会自动根据这些规则进行校验。可以根据需求定义多个规则，每个规则都包含一个触发条件和验证内容。下面是一个简单示例：

<el-form :model="form" :rules="rules">
<el-form-item label="用户名" prop="name">
<el-input v-model="form.name"></el-input>
</el-form-item>
<el-form-item label="密码" prop="password">
<el-input type="password" v-model="form.password"></el-input>
</el-form-item>
</el-form>

例：rules: {
name: [
{ required: true, message: '请输入用户名', trigger: 'blur' },
{ min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
],
password: [
{ required: true, message: '请输入密码', trigger: 'blur' },
{ min: 6, max: 10, message: '长度在 6 到 10 个字符', trigger: 'blur' }
]
}

在这个例子中，表单中的每个表单项都会有一个对应的 rules 规则属性。其中，prop 表示需要校验的字段名称；required 表示必填项，message 表示在未通过验证时的提示信息，trigger 触发条件为失焦事件。

rules属性还可以自定义验证函数，例如：rules: {
email: [
{required: true, message: '请输入邮箱', trigger: 'blur'},
{validator: validateEmail, trigger: 'blur'}
],
}

function validateEmail (rule, value, callback) {
if (value === '') {
callback(new Error('请输入邮箱'))
} else {
const reg = /^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/
if (reg.test(value)) {
callback()
} else {
callback(new Error('请输入正确的邮箱地址'))
}
}
}
在这个例子中，自定义了一个验证邮箱格式的函数，通过validator属性进行定义，当输入框失焦时进行验证。

以上就是elementui使用rules的详细介绍，根据不同的需求可自由选择对应的验证方式，使表单验证更加方便快捷。