Uniapp 使用u-view 表单验证通用方法

最新推荐文章于 2024-04-26 16:58:18 发布

浮云而已丶

最新推荐文章于 2024-04-26 16:58:18 发布

阅读量1.9k

点赞数 7

文章标签： uni-app

本文链接：https://blog.csdn.net/qq_45625778/article/details/131432655

版权

Uniapp 使用u-view 表单验证通用方法

最近接手了uniapp的微信小程序端和H5端的页面开发，发现u-view中不同版本对不同的端表单验证的方式是不一样的。于是我总结了常用的form表单验证方法。

uview版本

https://xuqu.gitee.io/components/form.html

步骤

创建结构—其中 u-form 标签下的 :model 、ref很重要需要校验的输入框需要在外面包裹一层u-form-item 并加上porp属性作为标识

 <u--form :model="emailForm" ref="eForm">
             <u-form-item style="witdh: 75%" prop="emailAddress">
               <u--input placeholder="请输入电子邮箱" prefixIcon="email" prefixIconStyle="font-size: 22px;color: #909399" v-model="emailForm.emailAddress"></u--input>
             </u-form-item>
             <view style="width: 22%">
               <u-button type="primary" text="发送邮箱" style="border-radius: 15rpx" @click="submit" onkeydown="keySubmit"></u-button>
             </view>
 </u--form>

js部分–需要定义一个fom 在form下面写需要双向绑定的变量 rules 规则写法如下此处以邮箱验证规则为例

emailForm: {
      emailAddress: ''
    },
//* 邮箱验证规则
    rules: {
      emailAddress: [
        { required: true, message: '请填写邮箱', trigger: 'blur' },
        {
          type: 'string',
          message: '邮箱格式不正确',
          trigger: 'blur',
          transform(value) {
            if (!/^\w+((-\w+)|(\.\w+))*@[A-Za-z0-9]+((\.|-)[A-Za-z0-9]+)*\.[A-Za-z0-9]+$/.test(value)) {
              return true
            } else {
            }
          }
        },
        { type: 'string', message: '长度不能超过30位', trigger: 'blur', max: 30 }
      ]
    }

onReady事件中给表单设置规则

 onReady() {
 this.$refs.eForm.setRules(this.rules)
}

4.编写submit事件，用于校验并提交表单。此处链接中的写法有误，实际应该采用.then的方法调用，方法如下

 this.$refs.eForm
      .validate()
      .then(res => {	
        uni.$u.toast('邮箱发送成功')
  }).  .catch(errors => {
        uni.$u.toast('邮箱发送失败')
      })