iview 表单校验(链接,数字)

普通输入框+链接校验:

<Form :model="localFormData" ref="localFormData" :label-width="100" :rules="ruleValidate">
  <FormItem prop="title" label="标题">
    <Input type="text"  v-model="localFormData.title" placeholder="请输入标题" />
  </FormItem>
  <FormItem prop="url" label="跳转链接">
    <Input type="text"  v-model="localFormData.url" placeholder="请输入链接" />
  </FormItem>
</Form>
data () {
  let isTrueUrl = (rule, value, callback) => {
    let reg = /(https?|ftp|file):\/\/[-A-Za-z0-9+&@#/%?=~_|!:,.;]+[-A-Za-z0-9+&@#/%=~_|]/
    if (!reg.test(value)) {
      callback(new Error('请输入正确的链接'))
    } else {
      callback()
    }
  }
  return{
    localFormData: {
      title: '',
      url: ''
    },
    ruleValidate: {
      title: [
        { required: true, message: '请输入标题', trigger: 'blur' }
      ],
      url: [
        { required: true, message: '请输入链接地址', trigger: 'blur' },
        { validator: isTrueUrl, trigger: 'blur' }
      ]
    }
  }
}

 

posted @ 2020-12-30 16:05  圆圆呀~  阅读(353)  评论(0编辑  收藏  举报