element ui 简单应用：表单验证

最新推荐文章于 2024-06-11 17:05:54 发布

紫~阳

最新推荐文章于 2024-06-11 17:05:54 发布

阅读量381

点赞数

分类专栏： element 文章标签：前端

本文链接：https://blog.csdn.net/weixin_45706862/article/details/119392006

版权

本文介绍了Element UI中实现表单验证的步骤。首先在data()中定义验证规则，如字段名及其对应的验证规则数组。接着，在模板上配置表单的rules、model和prop属性。最后，通过自定义检验函数进行手动兜底验证，利用rule、value和callback参数完成校验过程。

摘要由CSDN通过智能技术生成

表单验证的基本步骤共三步
1、定义验证规则
表单的验证在data()中补充定义规则：
rules: {
// 字段名1：表示要验证的属性
// 值: 表示验证规则列表。它是一个数组，数组中的每一项表示一条规则。
// 数组中的多条规则会按顺序进行
字段名1: [
{ 验证规则1 },
{ 验证规则2 },
],
字段名2: [
{ 验证规则1 },
{ 验证规则2 },
],
}
比如一下代码

	rules:{
   
     username:[
      {
   required:true,message:'请输入用户名',trigger:'blur'},
      {
   pattern:/^1\d{10}$

最低0.47元/天解锁文章

紫~阳

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
2
评论
element ui 简单应用：表单验证

表单验证的基本步骤共三步1、定义验证规则表单的验证在data()中补充定义规则：rules: {// 字段名1：表示要验证的属性// 值: 表示验证规则列表。它是一个数组，数组中的每一项表示一条规则。// 数组中的多条规则会按顺序进行字段名1: [{ 验证规则1 },{ 验证规则2 },],字段名2: [{ 验证规则1 },{ 验证规则2 },],}比如一下代码 rules:{ username:[ {required:true,message
复制链接

扫一扫

专栏目录