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("修改成功")
          })
        })
      }
目录
相关文章
|
5天前
uniapp自定义头部导航怎么实现?
uniapp自定义头部导航怎么实现?
|
5天前
|
Web App开发 小程序 Android开发
Uniapp 底部导航栏 自定义 tabBar 全端 全页面引用跳转 组件
Uniapp 底部导航栏 自定义 tabBar 全端 全页面引用跳转 组件
80 0
|
5天前
|
JSON 数据格式
uniapp自定义头部导航样式
uniapp自定义头部导航样式
97 0
|
5天前
uniapp进行表单效验
uniapp进行表单效验
144 0
|
7月前
uniapp自定义过滤器filter.js
uniapp自定义过滤器filter.js
70 0
|
5天前
|
Web App开发 小程序 Android开发
Uniapp from 表单组件 多层选择 开关 评分 滑块 步进器 日期框 级联选择 下拉列表 复选框 单选框 多行文本 单行文本 textarea radio checkbox picker
Uniapp from 表单组件 多层选择 开关 评分 滑块 步进器 日期框 级联选择 下拉列表 复选框 单选框 多行文本 单行文本 textarea radio checkbox picker
40 0
|
4天前
|
Web App开发 移动开发 文字识别
Uniapp或H5之ORC识别与自定义照相机
Uniapp或H5之ORC识别与自定义照相机
|
5天前
|
小程序 程序员
【uniapp微信小程序】自定义导航栏:非首页展示的实现方式(极为快捷方式)
【uniapp微信小程序】自定义导航栏:非首页展示的实现方式(极为快捷方式)
28 0
|
7月前
|
开发者
【 uniapp - 黑马优购 | 商品列表 】如何实现数据获取、结构渲染、自定义组件的封装
【 uniapp - 黑马优购 | 商品列表 】如何实现数据获取、结构渲染、自定义组件的封装
213 0
|
7月前
|
存储
【 uniapp - 黑马优购 | 搜索框 】如何实现自定义搜索组件、搜索建议、搜索历史
【 uniapp - 黑马优购 | 搜索框 】如何实现自定义搜索组件、搜索建议、搜索历史
407 0

热门文章

最新文章

相关实验场景

更多