vue如何使用rules实现表单字段验证
导读:本文共4556.5字符,通常情况下阅读需要15分钟。同时您也可以点击右侧朗读,来听本文内容。按键盘←(左) →(右) 方向键可以翻页。
摘要: 1. 写在 data 中验证表单内容<!--表单--><el-formref="rulesForm":rules="formRules":model="rulesForm"label-width="200px"><el-form-itemlabel=... ...
目录
(为您整理了一些要点),点击可以直达。1. 写在 data 中验证
表单内容
<!--表单--><el-formref="rulesForm":rules="formRules":model="rulesForm"label-width="200px"><el-form-itemlabel="用户名称:"prop="userName"><el-inputv-model="rulesForm.userName"maxlength="50"/></el-form-item></el-form>
<el-form>:代表这是一个表单
<el-form> -> ref:表单被引用时的名称,标识
<el-form> -> rules:表单验证规则
<el-form> -> model:表单数据对象
<el-form> -> label-width:表单域标签的宽度,作为 Form 直接子元素的 form-item 会继承该值
<el-form> -> <el-form-item>:表单中的每一项子元素
<el-form-item> -> label:标签文本
<el-form-item> -> prop:表单域 model 字段,在使用 validate、resetFields 方法的情况下,该属性是必填的
<el-input>:输入框
<el-input> -> v-model:绑定的表单数据对象属性
<el-input> -> style:行内样式
<el-input> -> maxlength:最大字符长度限制
data 数据
data(){return{//省略别的数据定义...//表单验证formRules:{userName:[{required:true,message:"请输入用户名称",trigger:"blur"}]}}}
formRules:与上文 '表单内容' 中 <el-form> 表单的 :rules 属性值相同
userName:与上文 '表单内容' 中 <el-form-item> 表单子元素的 prop 属性值相同
验证内容是:必填,失去焦点时验证,如果为空,提示信息为 '请输入用户名称'
2. 写在行内
表单内容
<!--表单--><el-formref="rulesForm":rules="formRules":model="rulesForm"label-width="200px"><el-form-itemlabel="银行名称:"prop="accountName":rules="[{required:true,message:'请输入银行名称',trigger:'blur'}]"><el-inputv-model="rulesForm.accountName"maxlength="50"/></el-form-item></el-form>
<el-form-item> -> rules:和第一种方式表现的效果一致,只是写法不一样,这里不再赘述
data 数据没有内容
3. 引入外部定义的规则
表单内容
<!--表单--><el-formref="rulesForm":rules="formRules":model="rulesForm"label-width="200px"><el-form-itemlabel="银行卡号:"prop="accountNumber"><el-inputv-model="rulesForm.accountNumber"maxlength="19"/></el-form-item></el-form>
表单内容与第一种方式写法一致,这里不再赘述
script 内容
<script>//引入了外部的验证规则import{validateAccountNumber}from"@/utils/validate";//判断银行卡账户是否正确constvalidatorAccountNumber=(rule,value,callback)=>{if(!value){returncallback(newError("请输入账户信息"));}else{if(validateAccountNumber(value)){callback();}else{returncallback(newError('账号格式不正确'))}}};exportdefault{data(){return{//省略别的数据定义...//表单验证formRules:{accountNumber:[{required:true,validator:validatorAccountNumber,trigger:"blur"}]}}}}</script>
import:先引入了外部的验证规则
const:定义一个规则常量,常量名可变, '= (rule, value, callback) => {}' 为固定格式,value 入参为验证的字段值
formRules -> accountNumber:表单验证中使用 validator 指定自定义校验规则常量名称
validate.js
/*银行账户*/exportfunctionvalidateAccountNumber(str){constreg=/^([1-9]{1})(\d{14}|\d{18})$/returnreg.test(str)}
验证规则
以上都是在失去焦点时的验证,下面来分析一下如何在表单提交时验证
1. 表单的提交按钮
<!--表单--><el-formref="rulesForm":rules="formRules":model="rulesForm"label-width="200px"><el-form-item><el-buttontype="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("successsubmit!!");}else{console.log("errorsubmit!!");}});},//取消cancel(){}}
this.$refs[formName].validate:formName 就是传入的 'rulesForm',与 <el-form> 表单的 rel 属性值一致,这样就指定好需要验证的表单了
完整示例代码如下
1. rules.vue
<template><divclass="app-container"><el-tabsv-model="activeName"><el-tab-panelabel="表单"name="rulesPane"@tab-click="handleClick"><!--表单--><el-formref="rulesForm":rules="formRules":model="rulesForm"label-width="200px"><el-form-itemlabel="用户名称:"prop="userName"><el-inputv-model="rulesForm.userName"maxlength="50"/></el-form-item><el-form-itemlabel="银行名称:"prop="accountName":rules="[{required:true,message:'请输入银行名称',trigger:'blur'}]"><el-inputv-model="rulesForm.accountName"maxlength="50"/></el-form-item><el-form-itemlabel="银行卡号:"prop="accountNumber"><el-inputv-model="rulesForm.accountNumber"maxlength="50"/></el-form-item><el-form-item><el-buttontype="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";//判断银行卡账户是否正确constvalidatorAccountNumber=(rule,value,callback)=>{if(!value){returncallback(newError("请输入账户信息"));}else{if(validateAccountNumber(value)){callback();}else{returncallback(newError('账号格式不正确'))}}};exportdefault{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("successsubmit!!");}else{console.log("errorsubmit!!");returnfalse;}});}}};</script><stylelang="scss"></style>
2. validate.js
/*银行账户*/exportfunctionvalidateAccountNumber(str){constreg=/^([1-9]{1})(\d{14}|\d{18})$/returnreg.test(str)}
效果图
</div> <div class="zixun-tj-product adv-bottom"></div> </div> </div> <div class="prve-next-news">
vue如何使用rules实现表单字段验证的详细内容,希望对您有所帮助,信息来源于网络。