平台兼容性

#超级输入框

目录结构

• components ---组件目录
• pages --- 页面目录（DEMO）

使用方式

 import inputBox from '@/components/input-box/input-box';
  export default {
    components: {inputBox}
  }

功能介绍

• v-model --- 实时获取输入框最新值
• set --- 自定义传入的 class ，业务里面可自己自定义样式
• type --- input 类型,默认 text
• maxLength --- input字数限制
• maTop --- 组件对于上方的间距
• maBtm --- 组件对于下方的间距
• inputValue --- 输入框默认值
• 是否禁用 --- 是否禁用
• placeholder --- input placeholder 提示文字
• verification --- 输入框校验方法
• verificationTip --- input 校验提示语（数组数量和verification相同）
• leftText --- input左边的文字
• leftClass --- input左边自定义的样式
• rightText --- input右边的文字
• rightClass --- input右边自定义的样式
• clearShow --- 是否显示清除按钮,默认显示
• getValue --- 校验输入框方法

//自定义传入的 class ，自定义样式
set: {
    type: String,
    default: ''
},
//input 类型,默认 text
type: {
    type: String,
    default: ''
},
// input字数限制
maxLength: {
    type: String,
    default: '100'
},
// 组件对于上方的间距
maTop: {
    type: String,
    default: '0'
},
// 组件对于下方的间距
maBtm: {
    type: String,
    default: '0'
},
//输入框默认值
inputValue: {
    type: String,
    default:''
},
//是否禁用
disabled:{
    default:false
},
// input placeholder 提示文字
placeholder: {
    type: String,
    default: '请输入内容'
},
// input 校验
verification: {
    type: Array,
    default: null
},
// input 校验提示语
verificationTip: {
    type: Array,
    default: null
},
// input左边的文字
leftText: {
    type: String,
    default: ''
},
// input左边自定义的样式
leftClass: {
    type: String,
    default: ''
},
// input右边的文字
rightText: {
    type: String,
    default: ''
},
// input右边自定义的样式
rightClass: {
    type: String,
    default: ''
},
//是否显示清除按钮,默认显示
clearShow:{
    type: Boolean,
    default: true
}

校验规则

// 输入框校验
const verification = {
    // 校验的正则和提示语
    verificationReg: {
        'isNull': {
            tip: '此项不能为空',
            reg: /(^\s*)|(\s*$)/g
        },
        // 校验验证码
        'code': {
            tip: '请输入正确的验证码',
            reg: /^\d{6}$/
        },
        'isPhoneNum': {
            tip: '请输入正确的手机号码',
            reg: /^(1[0-9])\d{9}$/
        },
        // 校验密码(由6-16数字和字母组成)
        'isPassWord': {
            tip: '请输入(6-16位)数字和字母组成',
            reg: /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,16}$/
        },
        // 校验正整数
        'isInt': {
            tip: '请输入正确的数字',
            reg: /^([1-9][0-9]*){1,3}$/
        },
        // 校验金额
        'isMoney': {
            tip: '请输入正确的金额',
            // reg: /(^[1-9]([0-9]+)?(\.[0-9]{1,2})?$)|(^(0){1}$)|(^[0-9]\.[0-9]([0-9])?$)/
            reg: /^\d{1,8}(\.\d{1,2})?$/
        },
        // 校验数字和字母
        'isEnlishAndNumber': {
            tip: '请输入数字和字母',
            reg: /^[A-Za-z0-9]*$/
        },
        // 校验中文数字和字母
        'isChineseEnlishAndNumber': {
            tip: '只能输入中文、数字和字母',
            reg: /^[A-Za-z0-9\u4e00-\u9fa5]+$/
        },
        // 校验中文和字母
        'isChineseAndEnlish': {
            tip: '只能输入中文和字母',
            reg: /^[A-Za-z\u4e00-\u9fa5]+$/
        },
        // 汉字,数字,字母,下划线
        'isEnCnUnderline': {
            tip: '只能输入中文、字母、数字和下划线',
            reg: /^[A-Za-z0-9\u4e00-\u9fa5a-zA-Z_]{4,8}$/
        }
    },
    /**
     * @name:输入框校验方法
     * @param {name} 校验的正则和提示语名称
     * @param {value} 输入框的值
     */
    verificationFuc: (param) => {
        // 获取提示语
        const tip = verification.verificationReg[param.name].tip
        // 获取正则
        const reg = verification.verificationReg[param.name].reg
        // 获取输入框的值
        const value = param.value || ''

        const res = {
            flag: false,
            tip
        }
        const val = value ? reg.test(value) : false
        if (param.name === 'isNull') {
            res.flag = val ? (val.toString().length > 0) : false
        } else {
            res.flag = val || false
        }

        return res
    }
}
export default verification

完整Demo

<template>
    <view>
        <view>不带校验</view>
        <input-box></input-box>
        <input-box leftText="用户名:"></input-box>
        <input-box rightText="发送验证码"></input-box>
        <view>带校验</view>
        <input-box ref="input1" :verification="['isNull','isPhoneNum']" :verificationTip="['手机号码不能为空','请输入正确的手机号']" placeholder="请输入手机号码" maBtm="10" maxLength="11"></input-box>
        <input-box ref="input2" type="password" :verification="['isNull','isChineseEnlishAndNumber']" :verificationTip="['密码不能为空','']"  placeholder="请输入密码" maBtm="10"></input-box>
        <button @click="onerification">校验</button>
    </view>
</template>

<script>
    import inputBox from '@/components/input-box/input-box';
    export default {
        data() {
            return {

            }
        },
        components:{
            inputBox
        },
        methods: {
            onerification(){
                if(this.$refs.input1.getValue() && this.$refs.input2.getValue()){
                    uni.showToast({
                        icon: 'none',
                        title: '校验通过',
                        // #ifdef MP-WEIXIN
                        duration: 2000,
                        // #endif
                        // mask: true
                    });
                }
            }
        }
    }
</script>

<style lang="scss">
</style>

运行方式

将文件解压拖入HBuilderX ,引入App.vue、main.js、manifest.json、pages.json文件，配置好页面路径，运行即可

"pages": [
         {
            "path" : "pages/input-demo/input-demo",
            "style" : {
                "navigationBarTitleText": "input-demo"
            }
        }
    ],