Vue中表单字段验证的写法和方式有多种，本博客介绍三种较为常用的验证方式。 1. 写在 data 中验证 表单内容 <!-- 表单 --> <el-fORM r
Vue中表单字段验证的写法和方式有多种，本博客介绍三种较为常用的验证方式。
表单内容
<!-- 表单 -->
<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>data 数据
data() {
return {
// 省略别的数据定义
...
// 表单验证
formRules: {
userName: [
{required: true,message: "请输入用户名称",trigger: "blur"}
]
}
}
}表单内容
<!-- 表单 -->
<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>data 数据没有内容
表单内容
<!-- 表单 -->
<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>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>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)
}效果图
--结束END--
本文标题: vue使用rules实现表单字段验证
本文链接: https://lsjlt.com/news/133604.html(转载时请注明来源链接)
有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
2024-01-12
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
回答
回答
回答
回答
回答
回答
回答
回答
回答
回答
官方手机版
微信公众号
商务合作
0