form表单

最新推荐文章于 2025-04-25 11:43:39 发布

Luckyflowers

最新推荐文章于 2025-04-25 11:43:39 发布

阅读量878

点赞数

分类专栏： uView 文章标签：前端框架 uv

本文链接：https://blog.youkuaiyun.com/m0_68683769/article/details/123955195

版权

这篇博客详细介绍了uView框架中form表单的基本使用，包括如何在data中生成双向绑定的对象，通过rules设置绑定规则，注册和调用校验规则API。还提供了具体的案例，展示了一个简单的自定义验证表单是否为空的方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

uView-----form表单

用于表单场景，可以配置Input输入框，Select弹出框，进行表单验证等（绑定对象绑定规则。对象规则，api）

基本使用

结构

<u-form>
	属性：
		:model：绑定对象
		ref：通过ref，在onReady生命周期调用组件的setRules方法绑定验证规则。 this.$ref.引用.setResult()。绑定规则
	作用：生成表单域
<u-form-item>
	属性:
		label：标签名
		prop：绑定rules里规则对象。绑定规则
	作用：设置验证规则
<u-input>
	属性:
		v-model：双向绑定、绑定对象
		type{String}---内置校验规则，如这些规则无法满足需求，可以使用正则匹配、或者使用validator自定义方法并结合uView自带验证规则

生成对象—在data里生成双向绑定的

绑定规则—用rules绑定规则（rules里需要prop绑定的对象定义规则）

trigger{
   String | Array}：触发校验的方式有2种：
change：字段值发生变化时校验
blur：输入框失去焦点时触发
如果同时监听两种方式，需要写成数组形式：['change', 'blur']

required
布尔值，是否必填，配置此参数不会显示输入框左边的必填星号，如需要，请配置u-form-item的required为true

pattern
要求此参数值为一个正则表达式，如： /\d+/，不能带引号，如："/\d+/"，组件会对字段进行正则判断，返回结果。

min
最小值，如果字段类型为字符串和数组，会取字符串长度与数组长度(length)与min比较，如果字段是数值，则直接与min比较。

max
最大值，规则同min参数

len
指定长度，规则同min，优先级高于min和max

enum{
   Array} 指定的值，配合 type: 'enum' 使用

whitespace{
   Boolean}
如果字段值内容都为空格，默认无法通过required: true校验，如果要允许通过，需要将此参数设置为true

transform{
   Function}，校验前对值进行转换，函数的参数为当前值，返回值为改变后的值，参数如如下：

value：当前校验字段的值
message
校验不通过时的提示信息

validator{
   Function}：自定义同步校验函数，参数如下：

rule：当前校验字段在 rules 中所对应的校验规则
value：当前校验字段的值
callback：校验完成时的回调，一般无需执行callback，返回true(校验通过)或者false(校验失败)即可
asyncValidator{
   Function}：自定义异步校验函数，参数如下：

rule：当前校验字段在 rules 中所对应的校验规则
value：当前校验字段的值
callback：校验完成时的回调，执行完异步操作(比如向后端请求数据验证)，如果不通过，需要callback(new Error('提示错误信息'))，如果校验通过，执行callback()即可

注册规则api

// 必须要在onReady生命周期，因为onLoad生命周期组件可能尚未创建完毕
onReady() {
   
    this.$refs.myForm.setRules(this.rules)
}

校验规则api

this.$refs.uForm.validate(valid => {
   
    if (valid) {
   
        console.log('验证通过');
    } else {
   
        console.log('验证失败');
    }
});

案例

<template>
	<view>
		<u-notice-bar :list="description" type="primary" color="#4994c4" :speed="130"></u-notice-bar>
		<u-form v-for="(item, index) of caseArr" :key="index">
			<u-form-item label="名称"<

最低0.47元/天解锁文章