更新记录

1.0.4（2025-05-20） 下载此版本

修复当 rules 为空时,校验报错的问题

1.0.3（2025-04-10） 下载此版本

修改下边框包含住提示文字

1.0.2（2025-03-14） 下载此版本

1.修改默认标题宽度为100rpx

平台兼容性

uni-app

其他

Form 表单

组件名: xt-form

适配情况需自行尝试,开发时只测试了H5、APP、微信小程序

安装方式

本组件符合 easycom 规范，HBuilderX 3.1.0 起，只需将本组件导入项目，在页面 template 中即可直接使用，无需在页面中 import 和注册 components

注意事项

如何阻止事件冒泡

vue2：在组件上直接使用@click.native.stop，如：<xt-icon @click.native.stop='click'></xt-icon>;

vue3：由于 vue3 没有native修饰符,所以不能直接在组件上使用.stop修饰符,只能嵌套一层view标签,在外层view上添加@click.stop阻止冒泡

基本用法

<template>
    <view class="xt">
        <xt-form ref="form" :model="form" :rules='rules'>
            <xt-form-item label="姓名" prop="name" required>
                <xt-input v-model="form.name" placeholder="请输入姓名"></xt-input>
            </xt-form-item>
            <xt-form-item label="性别" prop="sex">
                <xt-radio v-model="form.sex">
                    <xt-radio-item label="男" value="1"></xt-radio-item>
                    <xt-radio-item label="女" value="0"></xt-radio-item>
                </xt-radio>
            </xt-form-item>
            <xt-form-item label="简介" prop="brief">
                <xt-textarea v-model="form.brief" placeholder="请输入简介" count></xt-textarea>
            </xt-form-item>
        </xt-form>
        <xt-button @click="log">提交</xt-button>
        <xt-button @click="reset">重置</xt-button>
        <xt-button @click="clearValidate">清空校验</xt-button>
    </view>
</template>
<script>
    export default {
        data() {
            return {
                form: {
                    name: '姓名',
                    sex: '1',
                    brief: '简介'
                },
                rules: {
                    name: {
                        type: 'string',
                        required: true,
                        max: 10,
                        message: '姓名不能超过10个字'
                    },
                    sex: {
                        type: 'string',
                        message: '请选择性别',
                    },
                    brief: {
                        pattern: /^[0-9a-zA-Z]*$/g,
                        transform(value) {
                            return String(value);
                        },
                        message: '只能包含字母或数字'
                    }
                }
            }
        },
        methods: {
            // 提交
            log() {
                this.$refs.form.validate().then(res => {
                    console.log('通过')
                })
            },
            // 重置
            reset() {
                this.$refs.form.resetFields()
            },
            // 清空校验
            clearValidate() {
                this.$refs.form.clearValidate()
            }
        }
    }
</script>
<style lang="scss">
    .xt {
        padding: 0 20rpx;
        padding-top: 50rpx;
        display: flex;
        flex-direction: column;
        gap: 15rpx;
    }
</style>

xt-form API

xt-form-item API

Events(通过ref调用)

Rules校验规则

组件使用了 async-validator 验证字段,这里对常用的进行讲解,更多请查看官网的文档说明

• trigger{String | Array}: 触发校验方式
  • change: 字段发生变化时触发
  • blur: 子组件失去焦点触发
  • 需要搭配 xtUI 才有效
• type{String}: 内置的校验规则
  • string：必须是 string 类型，默认类型
  • number：必须是 number 类型
  • boolean：必须是 boolean 类型
  • method：必须是 function 类型
  • regexp：必须是 regexp 类型，这里的正则，指的是判断字段的内容是否一个正则表达式，而不是用这个正则去匹配字段值
  • integer：必须是整数类型
  • float：必须是浮点数类型
  • array：必须是 array 类型
  • object：必须是 object 类型
  • enum：必须出现在 enmu 指定的值中
  • date：必须是 date 类型
  • url：必须是 url 类型
  • hex：必须是 16 进制类型
  • email：必须是 email 类型
  • any：任意类型
• required{Boolean}: 是否必填
• pattern: 正则表达式,如 /^[0-9a-zA-Z]*$/g 只能包含数字字母
• 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()即可

Rules示例

const rules = {
  name:{
    // 字段类型
    type:'String',
    // 必填
            required: true,
    // 提示语
            message: '请输入姓名',
    // 变化就触发
            trigger: 'change'
  },
    age: {
            message: '请输入年龄',
      // 失去焦点触发
            trigger: 'blur'
        },
  phone:[
            {
                required: true,
                message: '请输入手机号',
                trigger: ['change', 'blur']
            },
            {
                // 自定义验证函数
                validator: (rule, value, callback) => {
                    // 返回true表示校验通过，返回false表示不通过
                    return /^1([3589]\d|4[5-9]|6[1-2,4-7]|7[0-8])\d{8}$/.test(value);
                },
                message: '手机号码不正确',
                // 触发器可同时用blur和change
                trigger: ['change', 'blur']
            }
        ]
}