更新记录

1.0.0（2020-03-22） 下载此版本

• 【新增】1. bjx-form 新增 prompt 属性，可以替换默认的提示符*
• 【新增】2. bjx-form 新增 msg-color 属性，定义提示符及提示文本颜色
• 【新增】3. bjx-form、bjx-form-item 新增 prompt-type 属性，用来控制提示符的显示和占位情况
• 【新增】4. bjx-form、bjx-form-item 新增 auth-check 属性，动态校验，值一改变就对数据进行校验
• 【优化】1. message 提示文字功能，可对某一规则自定义提示文字
• 【优化】2. message 提示文字单行显示，超出则需要对文本滑动
• 【bug】正则校验失败bug，感谢 @540654525@qq.com 的指正
• 感谢各位的使用和支持，若有意见或者建议，请留言或评论，谢谢！

0.0.5（2019-10-28） 下载此版本

• 修复默认规则bug

0.0.4（2019-10-03） 下载此版本

• 修复一些bug

平台兼容性

仅在uin-app 的h5 及 微信小程序 做过测试，因为其他的我没用到，就懒得去调试了

参数说明

1 bjx-form 组件

【校验必须】指需要用到表单数据校验时必须的参数

rules 校验规则

rule 默认可以分为多种写法 注意： 参数是不去空格的，很多时候有空格会影响到校验结果

• 字符串形式 用符号|分隔不同规则，符号: 左边是规则名称，右边是参数，无参数可直接省略，多个参数用,分隔

例：
// 长度为10 的数字
rule: 'type:number|length:10'
// 长度6-18 的字符串
rule: 'type:string|length:6,18'
// 是否为有效日期
rule: 'date'
// 值 在 a,b,c,0 四个值中
rule: 'in:a,b,c,0'

• 数组形式 数组形式下 可以是完全数组形式，也可以在数组中嵌套字符串写法

// 以 'type:string|length:6,18' 为例
// 可以这样写
rule: ['type:string','length:6,18']
// 也可以这样写
rule: [['type', 'string'],['length','6,18']]
// 还可以这样写
rule: [['type', 'string'],['length',[6,18]]]

已有的默认校验规则

• 使用正则reg时，若正则表达式中包含字符 | 则rule必须为数组，如

rule: ['type:string','length:6,18','reg:^1[3\|4\|5\|6\|7\|8][0-9]\d{8,8}$']

自定义函数

• 写法 支持：h5

// 函数有两个参数返回 第一个是需要校验的值 第二个是对此参数字段定义的校验规则
// return Boolean | String
// 当返回字符串时，优先做为提示文字 提示文字的优先级 自定义函数msg > 规则中定义的message > 默认提示
const validatePhone = (value, rule) => {
    if(value && !(/^1[3|4|5|6|7|8][0-9]\d{8,8}$/.test(value))){
        return '请填写正确的手机号码' 
    }
    return true
}
// 直接在定义规则时使用
 rules: {
    phone: {required: true,validator: validatePhone},
}

• 这种自定义函数写法 仅在h5端通过测试，微信小程序暂不支持，解决办法: 项目文件中有 validate.js 文件 可作为默认规则的扩展，按照格式添加规则函数即可

// 规则扩展
// 定义的函数 传入三个参数 第一个 val 未校验值 第二个 param 是校验参数  第三个 form 是表单数据
// @return Boolean | String  函数返回ture 则为校验通过 返回false 或者 String 都视为校验不通过
// 返回的字符串优先做为提示文字  提示文字的优先级 自定义函数msg > 规则中定义的message > 默认提示
 export default {
    // 手机号码校验
    phone: function(val) {
        if(val && !(/^1[3|4|5|6|7|8][0-9]\d{8,8}$/.test(val))){
            return '请填写正确的手机号码'
        }
        return true
    }
    // 你的规则
    myValidate: function(val, param, form){
        if(val){
            reutrn true
        }
        return '不符合规则' || fasle // 不通过返回 二选一
    }
}

2 bjx-form-item 组件

2 label 插槽

// 在bjx-form-item组件中定义一个带 slot="label" 属性的元素即可
// 此时可以使用动态值
<bjx-form-item label-type="block">
    <view slot="label">
        <text>label插槽</text>
        <button style="float: right;" type="primary" size="mini">按钮</button>
    </view>
    <input style="width: 100%;" class="input" name="input" placeholder="label插槽"/>
</bjx-form-item>

使用说明

1 引入并注册两个组件

import bjxForm from '@/components/bjx-form/bjx-form.vue'
import bjxFormItem from '@/components/bjx-form/bjx-form-item.vue'
export default {
    components: {
        bjxForm,
        bjxFormItem
    }
}

2 表单数据和校验规则

export default {
    data() {
        return {
            form: {
                name: '',
                age: ''
            },
            rules: {
                name: {required: true,rule: 'type:string|length:~,20'},
                age: {required: true,rule: 'type:number|between:0,120'},
            }
        }
    }
}

3 组件使用

注意 两个组件间的嵌套规则 bjx-form 组件的ref属性需绑定一个值 如 form

<bjx-form
    labelType="inline"
    :rules="rules"
    labelWidth="100"
    :form="form"
    ref="form">
    <bjx-form-item labelType="block" label="姓名" prop="name" :label-right="form.name.length+'/20'"> 
        <input  v-model="form.name" class="input" name="input" placeholder="姓名" />
    </bjx-form-item>
    <view>
        <bjx-form-item label="年龄" label-right="right" prop='age'> 
            <input  v-model="form.age" class="input" name="input" placeholder="年龄" type="number"/>
        </bjx-form-item>
    </view>
    <button type="primary" @tap="submit">提交</button>
</bjx-form>

4 校验数据

父组件直接调用子组件 bjxFrom 中的 validate方法

export default {
    methods: {
        submit() {
            // 校验表单数据 val 为false 则表明 校验不通过
            // ref="form"
            // this.$refs['form'].validate
            this.$refs.form.validate(val => {
                console.log(val)
            })
        }
    }
}