普通输入框+链接校验:
<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' } ] } } }