vue rules验证规则,后面附案例

本文详细介绍了表单验证的各种规则,包括必须值、邮箱、正则、网址、验证码等验证方式,以及如何设置这些规则来确保数据的有效性和安全性。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

required : 必须值验证属性

[['字段名'],required,'requiredValue'=>'必填值','message'=>'提示信息']; #说明:CRequiredValidator 的别名, 确保了特性不为空. 

email : 邮箱验证

['email', 'email']; #说明:CEmailValidator的别名,确保了特性的值是一个有效的电邮地址. 

match : 正则验证


 
  1. [['字段名'],match,'pattern'=>'正则表达式','message'=>'提示信息'];

  2. [['字段名'],match,'not'=>ture,'pattern'=>'正则表达式','message'=>'提示信息']; /*正则取反*/ #说明:CRegularExpressionValidator 的别名, 确保了特性匹配一个正则表达式.

url : 网址

['website', 'url', 'defaultScheme' => 'http']; #说明:CUrlValidator 的别名, 确保了特性是一个有效的路径. 

captcha : 验证码

['verificationCode', 'captcha']; #说明:CCaptchaValidator 的别名,确保了特性的值等于 CAPTCHA 显示出来的验证码. 

safe : 安全

['description', 'safe'];

compare : 比较

['age', 'compare', 'compareValue' => 30, 'operator' => '>=']; #说明:compareValue(比较常量值) - operator(比较操作符)  #说明:CCompareValidator 的别名,确保了特性的值等于另一个特性或常量. 

default : 默认值

['age', 'default', 'value' => null]; #说明:CDefaultValueValidator 的别名, 为特性指派了一个默认值. 

exist : 存在

['username', 'exist']; #说明:CExistValidator 的别名,确保属性值存在于指定的数据表字段中. 

file : 文件

['primaryImage', 'file', 'extensions' => ['png', 'jpg', 'gif'], 'maxSize' => 1024*1024*1024]; #说明:CFileValidator 的别名, 确保了特性包含了一个上传文件的名称. 

filter : 滤镜

[['username', 'email'], 'filter', 'filter' => 'trim', 'skipOnArray' => true]; #说明:CFilterValidator 的别名, 使用一个filter转换属性. 

in : 范围

['level', 'in', 'range' => [1, 2, 3]]; #说明:CRangeValidator 的别名,确保了特性出现在一个预订的值列表里. 

unique : 唯一性

['username', 'unique'] #说明:CUniqueValidator 的别名,确保了特性在数据表字段中是唯一的. 

integer : 整数

['age', 'integer'];

number : 数字

['salary', 'number'];

double : 双精度浮点型

['salary', 'double'];

date : 日期

[['from', 'to'], 'date'];

string : 字符串

['username', 'string', 'length' => [4, 24]];

boolean : 是否为一个布尔值

['字段名', 'boolean', 'trueValue' => true, 'falseValue' => false, 'strict' => true]; #说明:CBooleanValidator 的别名 

验证案例:

规则填写

表单绑定验证规则

自定义验证规则:其中value就是需要验证的那个值

 

Vue3 中,Element Plus 提供了强大的表单验证功能,结合 Form 组件,能够轻松处理用户的输入并确保数据的有效性。以下是一个简单的 Element Plus Form 验证案例讲解: 首先,你需要安装 `element-plus` 和 `vue-router`(如果项目中没有): ```bash npm install element-plus @vue/cli-plugin-element-plus router ``` 然后,在你的 Vue 文件中引入 Element Plus 的依赖和样式: ```html <template> <div id="app"> <el-form ref="form" :model="formData" :rules="rules" label-width="80px"> <!-- 表单元素 --> <el-input v-model="formData.name" placeholder="姓名"></el-input> <el-input v-model="formData.email" type="email" placeholder="邮箱"></el-input> <el-password v-model="formData.password" placeholder="密码"></el-password> <!-- 更多验证规则可自定义... --> </el-form> <el-button @click="submitForm">提交</el-button> </div> </template> <script> import { defineComponent, ref } from 'vue'; import { ElFormItem, ElForm, ElButton } from "element-plus"; export default defineComponent({ data() { return { formData: { name: '', email: '', password: '' }, rules: { name: [{ required: true, message: '请输入姓名' }], email: [{ type: 'email', required: true, message: '请输入有效的邮箱地址' }], password: [{ required: true, message: '请输入密码', min: 6, max: 20 }] } }; }, methods: { submitForm() { this.$refs.form.validate((valid) => { if (valid) { console.log('提交成功'); // 进行实际的提交操作,例如 API 请求或路由跳转 } else { console.log('表单验证失败,请检查信息'); } }); } } }); </script> ``` 在这个例子中: - `ref="form"` 将表单绑定到 Vue 实例的 `formData` 数据对象上。 - `rules` 对象定义了每个字段的验证规则,如必填、电子邮件格式、密码长度等。 - `@click="submitForm"` 触发 `submitForm` 方法,当用户点击提交按钮时,会调用 `validate` 方法验证表单内容。 当 `validate` 方法返回 `true` 时,表示表单所有字段都符合规则,你可以在此执行实际的提交操作;反之,则显示错误提示。 相关问题: 1. Element Plus 的表单组件有哪些常用元素? 2. 如何在 Element Plus 的 Form 中添加自定义验证规则? 3. Form组件的 validate方法如何传递回调?
评论 6
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值