elementui自定义表单验证规则（在el-table中校验表单控件的三种方法）
导读：一、直接在 el-table-column 外嵌套 el-form...
一 、直接在 el-table-column 外嵌套 el-form
符合表单的校验习惯 ，唯一需要注意的地方 el-form 需要绑定 :model="scope.row"
// html <div id="app"> <el-table :data="list" border> <el-table-column label="姓名" > <template slot-scope="scope"> <el-form :model="scope.row" :rules="rules"> <el-form-item prop="name"> <el-input v-model="scope.row.age" placeholder="请输入姓名" ></el-input> </el-form-item> </el-form> </template> </el-table-column> <el-table-column label="年龄" > </el-table-column> <el-table-column label="邮箱" > </el-table-column> </el-table> </div> // js data() { return { list: [ { name: "", age: "", mail: "" }, { name: "Vue", age: "6", mail: "666666@qq.com" }, ], rules: { name: [ { required: true, message: "请输入活动名称", trigger: "blur" }, { min: 3, max: 5, message: "长度在 3 到 5 个字符", trigger: "blur", }, ], }, }; }二 、循环 el-form-item 校验
el-table 往往具有多行内容 ，要想对每行的表单输入控件都进行校验 ，可以用 el-form 将整个 el-table 嵌套进去 ，然后在 el-table-column 中用 el-form-item 将待校验的表单输入控件嵌套进入:
为了区分是哪一行进行的校验 ，需要动态绑定 prop 到 el-form-item 元素 el-form-item 的 prop 、rules以及表单控件的 v-model ，三者的值必须一致 ，校验才能生效 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>表单校验</title> <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css" /> </head> <body> <div id="app"> <!-- 使用 el-form 将整个 el-table 包裹起来 --> <el-form ref="form" :model="form"> <el-table :data="form.list" border> <el-table-column label="姓名" width="250px"> <template slot-scope="scope"> <!-- 为了区分是哪一行进行的校验 ，需要动态绑定 prop 到 el-form-item 元素--> <!-- prop/rules/v-model三者的值必须一致 ，校验才能生效 --> <el-form-item :prop="list. + scope.$index + .name" :rules="rules.name" > <el-input v-model="scope.row.name" placeholder="请输入姓名" ></el-input> </el-form-item> </template> </el-table-column> <el-table-column label="年龄" width="250px"> <template slot-scope="scope"> <el-form-item :prop="list. + scope.$index + .age" :rules="rules.age" > <el-input v-model="scope.row.age" placeholder="请输入年龄" ></el-input> </el-form-item> </template> </el-table-column> <el-table-column label="邮箱" width="250px"> <template slot-scope="scope"> <el-form-item :prop="list. + scope.$index + .mail" :rules="rules.mail" > <el-input v-model="scope.row.mail" placeholder="请输入邮箱地址" ></el-input> </el-form-item> </template> </el-table-column> </el-table> </el-form> </div> </body> <script src="https://cdn.jsdelivr.net/npm/vue@2"></script> <script src="https://unpkg.com/element-ui/lib/index.js"></script> <script> new Vue({ el: "#app", data() { return { form: { // 表格数据 list 为 表单数据 form 的嵌套元素 list: [ { name: "", age: "", mail: "" }, { name: "Vue", age: "6", mail: "666666@qq.com" }, ], }, rules: { name: [ { required: true, message: "请输入活动名称", trigger: "blur" }, { min: 3, max: 5, message: "长度在 3 到 5 个字符", trigger: "blur", }, ], age: [ { validator: function (rule, value, callback) { if (/^[0-9]*$/.test(value) == false) { callback(new Error("请输入正确的数字")); } else { callback(); } }, trigger: "blur", }, ], mail: [ { type: "email", message: "请输入正确的Email", trigger: "blur" }, ], }, }; }, }); </script> </html>三 、直接使用表单项的 error 校验
使用 error 的好处是可以利用插槽自定义错误信息的显示样式 ，当 error 的值不为空时 ，会显示绑定的错误信息 ，并且覆盖 rules
// html <el-table :data="list" border> <el-table-column label="姓名" > <template slot-scope="scope"> <el-form :model="scope.row" :rules="rules" :error="errMsg"> <el-form-item prop="name"> <el-input v-model="scope.row.age" placeholder="请输入姓名" ></el-input> <span slot="error" class="el-form-input_tip el-form-item__error" > {{errMsg}} </span> </el-form-item> </el-form> </template> </el-table-column> </el-table> // js data() { return { errMsg: "请输入姓名", list: [ { name: "", age: "", mail: "" }, { name: "Vue", age: "6", mail: "666666@qq.com" }, ], rules: { name: [ { required: true, message: "请输入活动名称", trigger: "blur" }, { min: 3, max: 5, message: "长度在 3 到 5 个字符", trigger: "blur", }, ], }, }; }创心域SEO版权声明：以上内容作者已申请原创保护，未经允许不得转载，侵权必究！授权事宜、对本内容有异议或投诉，敬请联系网站管理员，我们将尽快回复您，谢谢合作！