element组件校验规则

element UI

在 Element UI 中，您可以使用 el-form、el-form-item 和 el-input 等组件来构建表单，并通过 rules 属性来定义校验规则。以下是使用 Element UI 校验规则的一般步骤：

1. 引入 Element UI 组件库： 在您的 Vue 项目中，首先确保已经正确引入了 Element UI 组件库。这通常在项目的入口文件（如 main.js）中完成。

   javascriptCopy code
   import Vue from 'vue'
   import ElementUI from 'element-ui'
   import 'element-ui/lib/theme-chalk/index.css'

   Vue.use(ElementUI)

2. 创建表单： 在您的 Vue 组件中，使用 el-form 、el-form-item 和 el-input 等 Element UI 组件创建表单。示例：

   vueCopy code
   <template>
   <el-form :model="form" ref="form" :rules="rules">
   <el-form-item label="用户名" prop="username">
   <el-input v-model="form.username"></el-input>
   </el-form-item>
   
   <el-form-item>
   <el-button type="primary" @click="submitForm">提交</el-button>
   </el-form-item>
   </el-form>
   </template>

3. 定义校验规则： 在 Vue 组件的 data 选项中定义 form 对象和 rules 对象。form 对象用于存储表单数据，rules 对象用于定义校验规则。示例：

   javascriptCopy code
   data() {
   return {
   form: {
   username: '',
   // 其他表单项
   },
   rules: {
   username: [
   { required: true, message: '请输入用户名', trigger: 'blur' },
   { min: 6, max: 12, message: '用户名长度在 6 到 12 个字符', trigger: 'blur' },
   // 自定义验证规则
   { validator: this.validateUsername, trigger: 'blur' }
   ],
   // 其他表单项的校验规则
   }
   }
   },

4. 自定义校验方法（可选）： 如果您需要自定义的校验逻辑，可以在 methods 中定义校验方法。在上面的示例中，我们定义了一个名为 validateUsername 的自定义校验方法。

   javascriptCopy code
   methods: {
   validateUsername(rule, value, callback) {
   // 自定义校验逻辑
   if (value === 'admin') {
   callback(new Error('用户名不能为 admin'))
   } else {
   callback()
   }
   },
   // 其他方法
   }

5. 提交表单： 在提交表单时，您可以调用 this.$refs.form.validate() 方法来触发校验。如果校验通过，可以继续执行提交操作；如果校验失败，将显示相应的错误信息。

   javascriptCopy code
   methods: {
   submitForm() {
   this.$refs.form.validate(valid => {
   if (valid) {
   // 表单校验通过，执行提交操作
   } else {
   // 表单校验失败，不执行提交操作
   }
   })
   },
   // 其他方法
   }