Fox-Wikis

§ Fox3.0前端框架-校验器

§ 1.校验规则

序号 规则 描述
1 require:true 必须输入的字段
2 email:true 必须输入正确格式的电子邮件
3 url:true 必须输入正确格式的网址
4 date:true 必须输入正确格式的日期。
5 dateISO:true 必须输入正确格式的日期（ISO），例如：2009-06-23，1998/01/22。只验证格式，不验证有效性
6 number:true 必须输入合法的数字（负数，小数）
7 digits:true 必须输入整数
8 creditcard:true 必须输入合法的信用卡号
9 equalTo:"field" 输入值必须和 field 相同
10 maxlength:5 输入长度最多是 5 的字符串（汉字算一个字符）
11 minlength:10 输入长度最小是 10 的字符串（汉字算一个字符）
12 rangelength:[5,10] 输入长度必须介于 5 和 10 之间的字符串（汉字算一个字符）
13 range:[5,10] 输入值必须介于 5 和 10 之间
14 max:5 输入值不能大于 5
15 min:10 输入值不能小于 10

§ 2.校验默认提示

序号 描述
1 require: "这是必填字段"
2 remote: "请修正此字段"
3 email: "请输入有效的电子邮件地址"
4 url: "请输入有效的网址"
5 date: "请输入有效的日期"
6 dateISO: "请输入有效的日期 (YYYY-MM-DD)"
7 number: "请输入有效的数字"
8 digits: "只能输入数字"
9 creditcard: "请输入有效的信用卡号码"
10 equalTo: "你的输入不相同"
11 extension: "请输入有效的后缀"
12 maxlength: Validator.format("最多可以输入 {0} 个字符")
13 minlength: Validator.format("最少要输入 {0} 个字符")
14 rangelength: Validator.format("请输入长度在 {0} 到 {1} 之间的字符串")
15 range: Validator.format("请输入范围在 {0} 到 {1} 之间的数值")
16 max: Validator.format("请输入不大于 {0} 的数值")
17 min: Validator.format("请输入不小于 {0} 的数值")

§ 3.自定义校验器

平台提供了自定义校验器的扩展机制

§ 3.1 自定义公共校验器

fox.valiator.addMethod("photo_required",function (value,param) {
    if(value === undefined){
        return false;
    }
    return value.image.length > 0;
},"必输字段");

上述方法为新增公共校验器的方法，参数为（name, method, message）,其中name为校验器名称，method为校验方法，message为校验不通过的提示消息

§ 3.2 自定义公共校验器(异步)

fox.valiator.addMethod("photo_required",function (value,param) {
  return new Promise((resolve, reject)=>{
    if(value === undefined || value.image.length ==0){
        reject(false)
    }
    resolve(true)
  })
},"必输字段");

上述方法为新增公共校验器的方法，参数为（name, method, message）,其中name为校验器名称，method为校验方法，message为校验不通过的提示消息, 同步和异步的差异是：异步必须返回一个Promise对象，而同步直接返回Boolean

§ 3.3自定义私有校验器

§ 3.3.1 自定义私有校验器例子

 export default {
    name: "example_money-item",
    //数据
    data:function(){
        return {

        }
    },
    //watch
    watch:{

    },
    //方法
    methods:{

    },
    //Fox流程
    fox_flow() {

        return {

            /**
             * 设置检查条件
             * @param context
             */
            setCheckConditions(context){
                //触发check函数调用(必须执行context.resolve或context.reject)
                context.resolve()
            },

            /**
             * 提交前处理
             * @param context
             * @param checkResult
             */
            preSubmit(context, checkResult){
                console.info("pre submit流程")

                //触发submit函数调用(必须执行context.resolve或context.reject)
                context.resolve()
            },

            /**
             * 提交处理
             * @param context
             * @param args
             */
            submit(context){
                console.info("submit流程: name:"+this.$options.name)
                //获取请求数据
                let reqData = fox.custom.getRequestData(this)
                //保存数据到bus中
                fox.bus.put("sys_global", this.$options.name, "data", reqData)
                //触发post submit函数调用(必须执行context.resolve或context.reject)
                context.resolve()
            },

            /**
             * 提交后处理
             * @param context
             * @param params
             */
            postSubmit(context){
                console.info("post submit流程")
                fox.custom.closePage(this)
            },

            /**
             * 提交取消处理
             * @param context
             * @param args
             */
            cancelSubmit(context, error){
                console.info(JSON.stringify(error))
            },
        }
    },

    // 自定义校验器
validator: {
    // who校验器
    who: {
        // 校验方法
        method(value, param) {
            console.info('local my name：' + this.myName)
            if(value === this.myName) {
                return true
            }
            return false
        },
        // 提示消息
        message: '猜错了',
    },

    'remote-who': {
        // 校验方法
        method(value, param, model) {
            return new Promise((resolve, reject) => {
                setTimeout(() => {
                    console.info(`remote my name：${this.myName}, model:${model}`)
                    if(value === this.myName) {
                        resolve(true)
                    }else{
                        this.m_error = `你猜错了,${model}`
                        resolve(false)
                    }
                }, 1000)
            })
        },
        // 提示消息
        message(param, model) {
            console.info(`获取错误信息,model:${model}`)
            return this.m_error
        },
    },
}

在创建vm对象的入参中，增加validator属性，validator中的内容为私有的校验器。同步返回Boolean，异步返回的是Promise对象

§ 3.3.2 自定义私有校验器说明

自定义校验器由校验函数和消息组成

校验方法 method(value, param, model)

参数说明

参数 类型 说明
value any 组件的value
param any 校验参数
model String 组件对于的v-model

校验消息 message （string/fucntion）

当message为function的时候，其参数为 message(param, model) 参数说明

参数 类型 说明
param any 校验参数
model String 组件对于的v-model

§ 4.使用方式

本节将会展示如何使用校验器 ###4.1将校验规则写到控件中

<fox-text v-verify="['require']" tag="必须输入信息" v-model="name"  class="my-text">客户姓名</fox-text>
上述控件中 v-verify为设置校验规则的指令，而校验规则可以通过数组形式指定多个校验规则，另外tag属性可以为该控件指定特定的错误提示，否则使用默认的提示。


<fox-idcard v-verify="['require','number']" v-model="idNumber" v-on:show="showIdImage" class="my-text">身份证号码</fox-idcard>
上述控件中体现多校验规则的写法


<fox-select v-verify="'require'" v-model="sex" v-bind:datasoruce="m_dataSource.sex" class="my-text">性别</fox-select>
上述控件中体现一个校验规则的简要写法

§ 4.2 校验简化写法

框架同样对部分常用的内置校验提供了简化的写法，当然只适用于fox-*-item类组件

§ 4.2.1 必输(required/require)

 <fox-text-item require v-model="val6" placeholder="请输入内容">必输</fox-text-item>

§ 4.2.2 邮件(email)

<fox-text-item require email v-model="val7"  placeholder="请输入内容">邮件</fox-text-item>

§ 4.2.3 URL(url)

 <fox-text-item require url v-model="val8" placeholder="请输入内容"clearable>URL</fox-text-item>

§ 4.2.4 数字(number)

<fox-text-item require number v-model="val9" type = "number" placeholder="请输入内容">数字</fox-text-item>

§ 4.3 属性设置校验规则

通过fox-page的verify-rule属性可以设置page内容组件的校验条件， 例如： html

<fox-page :verify-rules="m_rules">

js

data(){ 
   return { 
      m_rules:{
        'val12':['require'], 'val13':['require','email'] 
        } 
    } 
}

通过代码设置，可以动态设置组件的校验的规则

§ 4.4 在代码中调用校验

//-------------校验 start----------------//
let checkRes=this.fox_check();
if(checkRes.pass  == false){
   fox.layer.open("请填写完整信息["+checkRes.messageList[0]+"]");
   return;
}

 //触发v-verify指令设置的检查条件
    this.fox_check(conditions).then((checkResult)=>{
        if(checkResult.pass){
            fox.layer.open(‘校验通过’)
        }else{
              fox.layer.open(’请填写完整信息["+checkRes.messageList[0]+"]‘);
        }
    },(error)=>{
        //设置检查原因
        let reason={
            type:"checkFail",
            cause:error,
        }
        fox.layer.open(‘校验失败’)
    })
//-------------校验 end----------------//

fox_check方法会校验page上的所有校验字段，返回值得结构为

{
    //是否通过校验，true为通过，false为不通过
pass:pass,
//不通过数据的name的列表
    elementList:elementList,
//校验错误消息列表
    messageList:messageList
}

    onChange(index, type) {
        console.info(`change index:${index}, type:${type}`)
        this.list2[index].type = type
        let rule
        if(type == '01') {
            rule = ['require']
        }
        fox.custom.setValidate(this.$refs.inputRef[index], rule)
    },

§ 4.5 通过API动态添加或删除校验规则

fox.custom.setValidate(node, verifyRule, message)

参数说明

参数 类型 说明
node ref 组件引用
verifyRlue Array 校验规则
message String 错误提示

如果verifyRule为undefined或空数组，代表删除改组件上的校验规则

例子： html

 <fox-group v-if="true" title="API设置"  column="2">
             <template v-for="(item, index) in list2">
               <fox-select-item :key="`item2_id_${index}`" @change="onChange(index, $event)" :source="m_types" v-model="item.type">是否必输</fox-select-item>
               <fox-text-item :key="`item2_name_${index}`" ref="inputRef" :require = "item.type == '01'" v-model="item.name" placeholder="请输入内容">名称</fox-text-item>
             </template>
           </fox-group>

js

onChange(index, type) {
    console.info(`change index:${index}, type:${type}`)
    this.list2[index].type = type
    let rule
    if(type == '01') {
        rule = ['require']
    }
    fox.custom.setValidate(this.$refs.inputRef[index], rule)
},

§ 4.6 指定校验提示的显示位置

默认情况下组件的校验提示会显示在组件的边上(下面)，但是在登录页面等特殊页面，我们往往需要让提示显示在特定位置。为了实现该功能，我们需要执行下面两个步骤：

§ 步骤一

在组件上通过属性verify-message-place指定显示错误组件容器的id

§ 步骤二

定义显示组件，必须设置ID属性，且ID和verify-message-place指定的ID保持一致

例子：

 <fox-group v-if="true" title="指定消息显示位置"  column="3">
             <fox-text-item verify-message-place="my_error_tip" v-verify="['require', 'who']" v-model="val18" placeholder="请输入内容">必输</fox-text-item>
             <fox-text-item verify-message-place="my_error_tip" v-verify="['require', 'remote-who']" v-model="val19"  placeholder="请输入内容">邮件</fox-text-item>
             <fox-input-row>
                <div id="my_error_tip" class="my-error-tip"></div>
             </fox-input-row>
           </fox-group>
最后更新于: 4/15/2022, 2:41:22 PM

← 消息机制 →