★→ASP程序学习群:62655404 微信公众号开发
订阅本栏目 RSS您所在的位置: 深山工作室 > uni-app > 正文

uni-app开发表单input组件的一些规则说明自己预留使用

 2021/8/6 17:01:01  字体:  浏览 427
需要定制网站程序、公众号程序、微信小程序可以联系:565449214或者加微信13961347334(备注:需要技术)
或者在处理一些技术问题时,有什么不懂的地方,随时可以加我QQ:565449214讨论技术或者加QQ群62655404讨论

uni-app开发表单input组件的一些规则说明自己预留使用


'multi-select' 复选选择题
'select' 单选选择题
'input' 单行文本输入
'textarea' 多行文本输入
'level' 等级选择题
'boolean' 是非选择题
'date' 日期选择器
'time' 时间选择器
'region' 省市区三联选择器
'image' 图片选择器
'phone' 手机输入+验证码
'work' 行业二级联动选择器
'university' 大学二级联动选择器
'single-picker' 自定义单列选择器
'password' 密码输入
'foreign' 外国国家选取
'local' 获取当前位置信息
'drive' 车牌号输入



验证规则说明
规则名称 别名 用法 描述
require ['require'] 必填项
(如不设置此项,则数据不为空时才进行其他规则验证)
number ['number'] 是否为数值
chn ['chn'] 是否为汉字
chnNum ['chnNum'] 是否为汉字和数值
chnOrNum ['chnOrNum'] 是否为汉字或数值
alphaLine ['alphaLine'] 只能包含英文和下划线,首尾不能是下划线、且不能只是下划线
mobile ['mobile'] 手机号码格式验证
alphaNum ['alphaNum'] 只能是字母的数字
email ['email'] 电子邮箱格式验证
zipCode ['zipCode'] 邮政编码格式验证
min ['min:5' 或 ['min', 5]] 长度不能小于某值
max ['max:5' 或 ['max', 5]] 长度不能大于某值
length ['length:1,10' 或 ['length', '1,10']] 在某长度范围内
notbetween ['notbetween:1,10' 或 ['length', '1,10']] 不再某长度范围内
in ['in:1,2,3,5,6,8' 或 ['in', '1,2,3,6,5,89,9']] 在指定的字符内
notIn ['notIn:1,2,3,5,6,8' 或 ['notIn', '1,2,3,6,5,89,9']] 不在指定的字符内
different ['different:formName' 或 ['different', 'formName']] 对比两个字段的值是否相同
gt > ['gt:100' 或 ['gt', 100]] 必须大于某个数值
egt >= ['egt:100' 或 ['egt', 100]] 必须大于等于某个数值
elt <= ['elt:100' 或 ['elt', 100]] 必须小于或等于某个数值
lt < ['lt:100' 或 ['lt', 100]] 必须小于某个数值
eq = 或 same ['eq:100' 或 ['eq', 100]] 必须等于某个数值
notEq <> 或 != ['notEq:100' 或 ['notEq', 100]] 不等于某个数值
regex ['regex', /(^[1-9]\d*$)/] 支持使用正则验证



orgInputText 属性说明:
属性名 类型 默认值 说明
left-text String 标题标题 用于左侧提示文字
show-clear Boolean true 是否显示清除按钮
placeholder String 请输入信息... 默认提示占位信息
placeholder-color String #cccccc 默认提示占位信息文字颜色
font-size Number 20 字体大小(用于左侧文字,中间文字,右侧按钮大小)
labe-bg String 20 左侧提示文字背景颜色
btn-color String #dedede 按钮默认颜色
is-password Boolean false 是否是密码框
max-length Number 140 最大长度(组件代码使用的是驼峰式的命名和input组件中的maxlenth大小写不同)
border-radius String 20rpx 整体组件的边框圆角
value String - 组件输入框默认初始值
padding String 20rpx 中间文本内边距
check-info Object {msg: '请输入6-12位字符',reg: '^.{6,12}$',required: true} 组件输入框校验信息(只支持正则验证) 。msg:当验证不通过时使用的文本,当left-text有值时,提示文本为:left-text+msg; reg:正则表达式 注意:正则表达式关键字\d \w等,请使用双斜杠转义,防止在传值过程中被编译;required:是否是必填参数。



<template>
    <view class="content">
        <view>点击右侧的对勾和错勾会有相关的验证信息</view>
        <view class="test">
            <view class="text">
                1.普通使用(绑定默认输入值)
            </view>
            <view>
                <org-input-text left-text="用户姓名" :value="value" @input="value=$event"></org-input-text>
            </view>
        </view>
        <view class="test">
            <view class="text">
                2.普通使用(不显示清除按钮)
            </view>
            <view>
                <org-input-text left-text="用户姓名" :value="value" :show-clear="false"></org-input-text>
            </view>
        </view>
        <view class="test">
            <view class="text">
                3.普通使用(修改默认占位信息)
            </view>
            <view>
                <org-input-text left-text="用户姓名" placeholder="修改后的占位信息" ></org-input-text>
            </view>
        </view>
        <view class="test">
            <view class="text">
                4.普通使用(使用密码框,设置组件圆角)
            </view>
            <view>
                <org-input-text left-text="密 码" border-radius="80rpx" :is-password="true" placeholder="请输入密码"  ></org-input-text>
            </view>
        </view>
        <view class="test">
            <view class="text">
                5.普通使用(设置左侧文本背景颜色,设置清除按钮颜色)
            </view>
            <view>
                <org-input-text labe-bg="#ef00ef" btn-color="#ef00ef"  left-text="密码" :is-password="true" placeholder="请输入密码"  ></org-input-text>
            </view>
        </view>
        <view class="test">
            <view class="text">
                6.高级使用(自定义左侧文本为图片) 需要使用uniIcons
            </view>
            <view>
                <org-input-text left-text="姓名" :is-password="true" >
                    <!-- 使用插槽,自定义左侧文本 -->
                    <view slot="left" style="padding: 20rpx 10rpx 0rpx 20rpx;">
                        <uni-icons type="person" size="30" color="#6666"></uni-icons>
                    </view>
                </org-input-text>
            </view>
        </view>
        <view class="test">
            <view class="text">
                7.高级使用(自定义左侧文本为图片,中间内容任意格式) 需要使用uniIcons
            </view>
            <view>
                <org-input-text left-text="姓名" :is-password="true" >
                    <!-- 使用插槽,自定义左侧文本 -->
                    <view slot="left" style="padding: 20rpx 10rpx 0rpx 20rpx;">
                        <uni-icons type="person" size="30" color="#6666"></uni-icons>
                    </view>

                    <!-- 使用插槽,自定义中间显示图标 -->
                    <view slot="content" style="padding: 0rpx 10rpx 0rpx 20rpx;">
                        中间自定义信息
                    </view>
                </org-input-text>
            </view>
        </view>

        <view class="test">
            <view class="text">
                8.高级使用(自定义左侧文本为图片,中间内容任意格式,右侧插入内容) 需要使用uniIcons
            </view>
            <view>
                <org-input-text left-text="姓名" :is-password="true" >
                    <!-- 使用插槽,自定义左侧文本 -->
                    <view slot="left" style="padding: 20rpx 10rpx 0rpx 20rpx;">
                        <uni-icons type="person" size="30" color="#6666"></uni-icons>
                    </view>

                    <!-- 使用插槽,自定义中间显示图标 -->
                    <view slot="content" style="padding: 0rpx 10rpx 0rpx 20rpx;">
                        中间自定义信息
                    </view>

                    <!-- 使用插槽,自定义中间显示图标 -->
                    <view slot="right" style="padding:20rpx 10rpx 0rpx 20rpx;">
                        右
                    </view>
                </org-input-text>
            </view>
        </view>

        <view class="test">
            <view class="text">
                9.高级使用(添加校验规则)
            </view>
            <view>
                <org-input-text left-text="密码" :is-password="true"
                :check-info="checkInfo"
                >
                    <!-- 使用插槽,自定义左侧文本 -->
                    <view slot="left" style="padding: 20rpx 10rpx 0rpx 20rpx;">
                        <uni-icons type="person" size="30" color="#6666"></uni-icons>
                    </view>
                </org-input-text>
            </view>
        </view>
    </view>
</template>

后一页:没有了
相关阅读
( 2021/8/6 17:01:01 )uni-app开发表单input组件的一些规则说明自己预留使用
( 2021/7/28 10:35:24 )查询某个字符在字符串中出现的位置数组
( 2021/6/10 8:56:21 )百度小程序开发第一坑tcomponent自定义组件命名坑Compile san component failed. . [SAN ERROR] ROOT>swan-custom-component>view>千万不要用下划线作为自定义组件名
( 2021/6/8 23:24:05 )开始百度小程序开发需要准备工作
( 2021/5/26 14:13:02 )uni-app:使用uni.downloadFile下载word或pdf文件并保存到手机
( 2021/5/26 10:02:19 )小程序中利用addPhoneContact将联系人的信息添加到手机通讯录支持保存联系人头像
( 2021/5/11 19:12:56 )小程序打开pdf文件并保存到本地 支持远程pdf、word、xls表格文件打开
( 2021/5/11 18:58:19 )uni-app里面复制内容时保留换行利用正则替换br标签替换成回车换行符
更多信息>>栏目类别选择
uni-app
rss学习
个人空间
网站设计
网站公告
下载
photoshop学习
ASP学习
DIV+CSS学习
SEO搜索引擎忧化
java学习
HTML学习
网站信息
网站类信息
更多>>同类信息
uni-app:使用uni.downloadFile下载word或pdf文件并保存到手机
小程序中利用addPhoneContact将联系人的信息添加到手机通讯录支持保存联系人头像
小程序打开pdf文件并保存到本地 支持远程pdf、word、xls表格文件打开
小程序利用rich-text简单处理富文本解析html
微信小程序打开客服提示:该小程序提供的服务出现故障,请稍后重试
微信小程序客服会话只能过button让用户主动触发
uni-app开发微信小程序使用button的open-type为contact调用微信客服不能用view或者js调用
uni-app用map组件建立微信小程序显示商家地图位置并且打上标志然后点标志进行调用手机地图导航到对应的地址
更多>>最新添加文章
查询某个字符在字符串中出现的位置数组
百度小程序开发第一坑tcomponent自定义组件命名坑Compile san component failed. . [SAN ERROR] ROOT>swan-custom-component>view>千万不要用下划线作为自定义组件名
开始百度小程序开发需要准备工作
uni-app:使用uni.downloadFile下载word或pdf文件并保存到手机
小程序中利用addPhoneContact将联系人的信息添加到手机通讯录支持保存联系人头像
小程序打开pdf文件并保存到本地 支持远程pdf、word、xls表格文件打开
uni-app里面复制内容时保留换行利用正则替换br标签替换成回车换行符
小程序利用rich-text简单处理富文本解析html
更多>>随机抽取信息
optgroup 标签
一个可以选择变化背景色的小程序
支持win7的node.js版本
divcss范例下载
图片渐显轮流播放
网站从http改成https(ssl证书)后设置301跳转将http跳转到https的方法
126邮箱TAB效果(同一页面可多次使用)
DIV+CSS实现内容垂直居中的一个例子