uniapp的form表单自定义验证规则

简介: uniapp的form表单自定义验证规则
template部分:
<uni-forms ref="form" :value="user" labelWidth="80px">
      <uni-forms-item name="oldPassword" label="旧密码">
        <uni-easyinput type="password" v-model="user.oldPassword" placeholder="请输入旧密码" />
      </uni-forms-item>
      <uni-forms-item name="newPassword" label="新密码">
        <uni-easyinput type="password" v-model="user.newPassword" placeholder="请输入新密码" />
      </uni-forms-item>
      <uni-forms-item name="confirmPassword" label="确认密码">
        <uni-easyinput type="password" v-model="user.confirmPassword" placeholder="请确认新密码" />
      </uni-forms-item>
      <button type="primary" @click="submit">提交</button>
    </uni-forms>


data部分:
user: {
          oldPassword: undefined,
          newPassword: undefined,
          confirmPassword: undefined
        },
        rules: {
          oldPassword: {
            rules: [{
              required: true,
              errorMessage: '旧密码不能为空'
            }]
          },
          newPassword: {
            rules: [{
                required: true,
                errorMessage: '新密码不能为空',
              },
              {
                minLength: 6,
                maxLength: 20,
                errorMessage: '长度在 6 到 20 个字符'
              }
            ]
          },
          confirmPassword: {
            rules: [{
              required: true,
              errorMessage: '确认密码不能为空'
            }, {
              validateFunction: (rule, value, data) => data.newPassword === value,
              errorMessage: '两次输入的密码不一致'
            }]
          }
        }


methods部分:
submit() {
        this.$refs.form.validate().then(res => {
        updateUserPwd(this.user.oldPassword,this.user.newPassword).then(response =>           {
            this.$modal.msgSuccess("修改成功")
          })
        })
      }
目录
相关文章
|
2月前
uniapp自定义头部导航怎么实现?
uniapp自定义头部导航怎么实现?
|
2月前
|
Web App开发 小程序 Android开发
Uniapp 底部导航栏 自定义 tabBar 全端 全页面引用跳转 组件
Uniapp 底部导航栏 自定义 tabBar 全端 全页面引用跳转 组件
106 0
|
2月前
|
Web App开发 小程序 Android开发
Uniapp from 表单组件 多层选择 开关 评分 滑块 步进器 日期框 级联选择 下拉列表 复选框 单选框 多行文本 单行文本 textarea radio checkbox picker
Uniapp from 表单组件 多层选择 开关 评分 滑块 步进器 日期框 级联选择 下拉列表 复选框 单选框 多行文本 单行文本 textarea radio checkbox picker
50 0
|
2天前
|
存储
uniapp实战 -- 个人信息维护(含选择图片 uni.chooseMedia,上传文件 uni.uploadFile,获取和更新表单数据)
uniapp实战 -- 个人信息维护(含选择图片 uni.chooseMedia,上传文件 uni.uploadFile,获取和更新表单数据)
13 2
|
2天前
|
安全
uniapp实战 —— 自定义顶部导航栏
uniapp实战 —— 自定义顶部导航栏
12 2
|
2天前
uniapp实战 —— 轮播图【自定义指示点】(含组件封装,自动注册全局组件,添加全局组件类型声明)
uniapp实战 —— 轮播图【自定义指示点】(含组件封装,自动注册全局组件,添加全局组件类型声明)
7 1
|
2天前
uniapp 添加自定义图标
uniapp 添加自定义图标
9 0
|
2天前
|
前端开发 JavaScript 索引
uniapp的u-album组件自定义删除功能
这样,你就可以在u-album组件中实现自定义的删除功能了。需要注意的是,这个删除操作只是在前端删除了图片项,并没有在后端删除对应的图片文件,如果你需要在后端也删除对应的图片文件,你还需要在删除操作后发送一个请求到后端,让后端删除对应的图片文件。
9 0
|
2月前
|
Web App开发 移动开发 文字识别
Uniapp或H5之ORC识别与自定义照相机
Uniapp或H5之ORC识别与自定义照相机
|
2月前
|
小程序 程序员
【uniapp微信小程序】自定义导航栏:非首页展示的实现方式(极为快捷方式)
【uniapp微信小程序】自定义导航栏:非首页展示的实现方式(极为快捷方式)
84 0

相关实验场景

更多