常用的前端校验(以在vue中的写法进行的校验)

常用的前端校验(以在vue中的写法进行的校验)

1.不小于1的正整数

 validate1(rule, value, callback){
         if(value&&!((/^[1-9][0-9]*$/).test(value))){
             callback(new Error('请输入不小于1的正整数'))
         }else{
           callback()
         }
      },

2.1-100之间的正整数(包括1和100)

      validate2(rule,value,callback){
        if(value&&!((/^(0|([1-9]0){0,1}|[1-9]{1,2}|100)$/).test(value))){
          callback(new Error('请输入0-100之间包括0和100的正整数'))
        }else{
          callback()
        }
      },

3.禁止输入特殊字符

     validate3(rule,value,callback){
         if(value&&(/[`~!@#$%^&*()_\+=<>?:"{}|,.\/;'\\[\]·~!@#¥%……&*()——\+={}|《》?:“”【】、;‘’,。、]/g).test(value)){
          callback(new Error('禁止输入特殊字符'));
        }else if(value&&(/\s+/g).test(value)) {
           callback(new Error('禁止输入空格'))
        }else{
           callback()
        }
      },

4.ip地址的校验

      validIp(rule, value, callback){
        var  IP = "^((25[0-5]|2[0-4]\\d|[1]{1}\\d{1}\\d{1}|[1-9]{1}\\d{1}|\\d{1})($|(?!\\.$)\\.)){4}$";
        var patt1=new RegExp(IP);
        if(value==''){
          callback(new Error('ip地址不能为空'))
        }
        else if(value&&(value.length<7)||value.length>16){
          callback(new Error('ip地址由7-15个字符组成'))
        }
        else if (value && ! patt1.test(value)) {
          callback(new Error('IP地址可为数字、句点‘.’,范围为0-255;禁止特殊字符,禁止空格'))
        } else {
          callback()
        }
      },

5.0-100并保留小数点后两位

 actScheduleValidate(rule,value,callback){
        if(value&&!((/^((0|([1-9]0){0,1}|[1-9]{1,2})((\.(\d){0,2})?)|100)$/).test(value))){
          callback(new Error('请输入[0-100]的数字,并允许小数点后保留两位'))
        }else{
          callback()
        }
      },
  • 3
    点赞
  • 7
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
好的,针对你的问题,我给出一份示例代码,代码使用的是Vue3的组合式 API 写法,同时使用了TypeScript进行类型校验。 在父组件,我们通过 `setup` 函数将参数传递给子组件,并使用 `defineComponent` 定义组件,并对传递参数进行类型校验。在子组件,我们使用 `props` 接收父组件传递的参数,并使用 `defineComponent` 定义组件,并对接收参数进行类型校验。 ```html <!-- ParentComponent.vue --> <template> <div> <ChildComponent :title="title" :count="count" /> </div> </template> <script lang="ts"> import { defineComponent, ref } from 'vue'; export default defineComponent({ name: 'ParentComponent', setup() { const title = ref<string>('Parent Component'); const count = ref<number>(0); return { title, count, }; }, }); </script> ``` ```html <!-- ChildComponent.vue --> <template> <div> <h2>{{ title }}</h2> <p>{{ count }}</p> </div> </template> <script lang="ts"> import { defineComponent, PropType } from 'vue'; export default defineComponent({ name: 'ChildComponent', props: { title: { type: String as PropType<string>, required: true, }, count: { type: Number as PropType<number>, required: true, }, }, }); </script> ``` 在上述代码,我们对 `title` 和 `count` 进行了类型校验,分别为 `string` 和 `number` 类型,并且设置了 `required: true`,表示这两个参数是必须要传递的。 当我们在父组件传递参数时,如果传递的参数类型不符合子组件定义的类型,或者未传递必须的参数,TypeScript 将会给出相应的类型错误提示,从而帮助我们减少类型错误和调试时间。
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值