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进行表单效验
117 0
|
4月前
|
Web App开发 小程序 Android开发
Uniapp from 表单组件 多层选择 开关 评分 滑块 步进器 日期框 级联选择 下拉列表 复选框 单选框 多行文本 单行文本 textarea radio checkbox picker
Uniapp from 表单组件 多层选择 开关 评分 滑块 步进器 日期框 级联选择 下拉列表 复选框 单选框 多行文本 单行文本 textarea radio checkbox picker
34 0
|
10月前
uniapp发送formdata表单请求(全网最简单方法)
因为uniapp不支持直接传输formdata,只提供了uploadFile方法上传文件,但是利用该方法就可以传输formdata了。
735 1
|
4月前
|
JavaScript 小程序 API
uniapp中的uview组件库丰富的Form 表单用法
uniapp中的uview组件库丰富的Form 表单用法
330 0
|
5月前
|
JavaScript
uniapp使用uv-vi组件创建表单,收集信息
uniapp使用uv-vi组件创建表单,收集信息
43 0
|
6月前
uniapp u-tabs表单如何默认选中
uniapp u-tabs表单如何默认选中
152 0
|
移动开发 小程序 JavaScript
uniapp form表单validator函数校验
uniapp form表单validator函数校验
uniapp form表单validator函数校验
|
11天前
|
小程序 JavaScript Java
基于SpringBoot+Vue+uniapp微信小程序的校园水电费管理微信小程序的详细设计和实现
基于SpringBoot+Vue+uniapp微信小程序的校园水电费管理微信小程序的详细设计和实现
35 0
|
11天前
|
小程序 JavaScript Java
基于SpringBoot+Vue+uniapp微信小程序的优购电商小程序的详细设计和实现
基于SpringBoot+Vue+uniapp微信小程序的优购电商小程序的详细设计和实现
33 0
|
11天前
|
小程序 JavaScript Java
基于SpringBoot+Vue+uniapp微信小程序的微信课堂助手小程序的详细设计和实现
基于SpringBoot+Vue+uniapp微信小程序的微信课堂助手小程序的详细设计和实现
45 3

热门文章

最新文章

相关实验场景

更多