在vue中验证表单域的方式和方式有多种，但本博客介绍了三种常见的验证方法。
1. 写在 data 中验证
表单内容
！ ---表单----El-form ref=' rules form ' : rules=' form rules ' : model=' rules form ' label-width=' 200 px 300 px ' maxlength=' 50 '/El-form-item/表单标签el-form -rules :表单验证规则el-form -model :表单数据对象el-form -label-width :表单域标签宽度form-rules 此值el-form - el-form-item :继承表单中的每个子元素el-form-item -label :标签文本el-form-item -prop :表单字段model字段此属性是必需的el-input :输入框el-input -v-model :绑定的表单数据对象属性el-input -style :内联样式El-input-maxlll
data () return(/省略其他数据定义.//表单验证表单规则： ) username : ({ required : true，message: '用户名) trigger : ' blur ' } ] } }表单规则：与上述“表单内容”的el-form表单的：rules属性值相同的userName :上述“表单内容”的el-form
data 数据
！ ---表单----El-form ref=' rules form ' : rules=' form rules ' : model=' rules form ' label-width=' 200 px 请输入消息： '银行名称'，trigger 3360 ' blur ' } ' El-inputv-model=' rules form.account name ' style=' width 3360333
2. 写在行内
表单内容
！ ---表单----El-form ref=' rules form ' : rules=' form rules ' : model=' rules form ' label-width=' 200 px
脚本//引入了外部验证规则import { validat
eAccountNumber } from "@/utils/validate";// 判断银行卡账户是否正确const validatorAccountNumber = (rule, value, callback) => { if (!value) { return callback(new Error("请输入账户信息")); } else { if (validateAccountNumber(value)) { callback(); } else { return callback(new Error('账号格式不正确')) } }};export default { data() { return { // 省略别的数据定义 ... // 表单验证 formRules: { accountNumber: [ {required: true,validator: validatorAccountNumber,trigger: "blur"} ] } } }}</script> import：先引入了外部的验证规则 const：定义一个规则常量，常量名可变， '= (rule, value, callback) => {}' 为固定格式，value 入参为验证的字段值formRules -> accountNumber：表单验证中使用 validator 指定自定义校验规则常量名称validate.js
/* 银行账户 */export function validateAccountNumber(str) { const reg = /^([1-9]{1})(d{14}|d{18})$/ return reg.test(str)} 验证规则以上都是在失去焦点时的验证，下面来分析一下如何在表单提交时验证1. 表单的提交按钮
<!-- 表单 --><el-form ref="rulesForm" :rules="formRules" :model="rulesForm" label-width="200px"> <el-form-item> <el-button type="primary" @click="onSubmit('rulesForm')">保存</el-button> <el-button @click="cancel">取消</el-button> </el-form-item></el-form> <el-button>：按钮<el-button> -> type：按钮类型<el-button> -> @click：按钮点击时触发的事件，这里注意方法的入参为 'rulesForm'，这里要与 <el-form> 表单的 rel 属性值 一致2. methods 方法
methods: { // 保存 onSubmit(formName) { this.$refs[formName].validate(valid => { if (valid) { console.log("success submit!!"); }else{ console.log("error submit!!"); } }); }, // 取消 cancel() { }} this.$refs[formName].validate：formName 就是传入的 'rulesForm'，与 <el-form> 表单的 rel 属性值一致，这样就指定好需 要验证的表单了完整示例代码如下
1. rules.vue
<template> <div class="app-container"> <el-tabs v-model="activeName"> <el-tab-pane label="表单" name="rulesPane" @tab-click="handleClick"> <!-- 表单 --> <el-form ref="rulesForm" :rules="formRules" :model="rulesForm" label-width="200px"> <el-form-item label="用户名称:" prop="userName"> <el-input v-model="rulesForm.userName" style="width:300px" maxlength="50"/> </el-form-item> <el-form-item label="银行名称:" prop="accountName" :rules="[{required:true,message:'请输入银行名称',trigger:'blur'}]"> <el-input v-model="rulesForm.accountName" style="width:300px" maxlength="50"/> </el-form-item> <el-form-item label="银行卡号:" prop="accountNumber"> <el-input v-model="rulesForm.accountNumber" style="width:300px" maxlength="50"/> </el-form-item> <el-form-item> <el-button type="primary" @click="onSubmit('rulesForm')">保存</el-button> <el-button @click="cancel">取消</el-button> </el-form-item> </el-form> </el-tab-pane> </el-tabs> </div></template><script>import { validateAccountNumber } from "@/utils/validate";// 判断银行卡账户是否正确const validatorAccountNumber = (rule, value, callback) => { if (!value) { return callback(new Error("请输入账户信息")); } else { if (validateAccountNumber(value)) { callback(); } else { return callback(new Error('账号格式不正确')) } }};export default { name: "rules", data() { return { activeName: "rulesPane", defaultProps: { children: "children", label: "label" }, rulesForm: { }, // 表单验证 formRules: { userName: [ { required: true, message: "请输入用户名称", trigger: "blur" } ], accountNumber: [ { required: true, validator: validatorAccountNumber, trigger: "blur" } ], } }; }, created() {}, mounted() {}, methods: { handleClick(tab) { }, // 取消 cancel() { }, // 保存 onSubmit(formName) { this.$refs[formName].validate(valid => { if (valid) { console.log("success submit!!"); } else { console.log("error submit!!"); return false; } }); } }};</script><style lang="scss"></style>2. validate.js
/* 银行账户 */export function validateAccountNumber(str) { const reg = /^([1-9]{1})(d{14}|d{18})$/ return reg.test(str)}效果图
欢迎来访我的vue专栏总篇博客
希望能够帮助到你
over