vue使用rules实现表单字段验证
程序员文章站
2022-03-30 07:49:48
vue 中表单字段验证的写法和方式有多种，本博客介绍三种较为常用的验证方式。1. 写在 data 中验证表单内容
vue 中表单字段验证的写法和方式有多种，本博客介绍三种较为常用的验证方式。
1. 写在 data 中验证
表单内容
<!-- 表单 -->
<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>
- <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-form ref="rulesform" :rules="formrules" :model="rulesform" label-width="200px">
<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>
<el-form-item> -> rules：和第一种方式表现的效果一致，只是写法不一样，这里不再赘述
data 数据没有内容
3. 引入外部定义的规则
表单内容
<!-- 表单 -->
<el-form ref="rulesform" :rules="formrules" :model="rulesform" label-width="200px">
<el-form-item label="银行卡号:" prop="accountnumber">
<el-input v-model="rulesform.accountnumber" style="width:300px" maxlength="19"/>
</el-form-item>
</el-form>
表单内容与第一种方式写法一致，这里不再赘述
script 内容
<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 {
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)
}
效果图
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。