ElementUI表单校验

1.表单要绑定一个对象 :model="ruleForm", 然后绑定规则:rules=rule

2.要检验的form-item要添加prop,例如:prop="url"

3.在return内定义规则

 

自定义校验规则:

1:定义规则

var isUrl = (rule, value, callback) => {

var matchUrl = /(http|ftp|https):\/\/[\w\-_]+(\.[\w\-_]+)+([\w\-\.,@?^=%&:/~\+#]*[\w\-\@?^=%&/~\+#])?/

if (value.trim().length > 1000) {

callback(new Error('不能超过1000个字符'))

$(this.$refs.qrcode).empty()

return

} else {

if (!matchUrl.test(value.trim())) {

callback(new Error('不是正确网址'))

$(this.$refs.qrcode).empty()

return

}

}

}

2:引用规则

rules: {

url: [

{ validator: isUrl, trigger: 'change' }

]

}

效果如下: