vue中使⽤element-ui⾃定义表单验证template
<el-form ref="dataform":rules="rules":model="dataform" label-width="300px">
<el-form-item label="电话" prop="phone">
<el-input class="inp" v-model="dataform.phone" auto-complete="true"></el-input>
</el-form-item>
</el-form>
script
<script>
export default{
data(){
// 此处⾃定义校验⼿机号码js逻辑
var phoneReg =/^[1][3,4,5,7,8][0-9]{9}$/
var validatePhone=(rule, value, callback)=>{
if(!value){
return callback(new Error('号码不能为空'))
vue element admin
}
setTimeout(()=>{
if(!st(value)){
callback(new Error('格式有误'))
}else{
callback()
}
},1000)
}
return{
dataform:{
phone:'',
},
// 校验规则
rules:{
// 校验⼿机号码，主要通过validator来指定验证器名称
phone:[{ required:true, validator: validatePhone, trigger:'blur'}]
},
}
}
}
</script>
以上是官⽅提供的⾃定义验证⽅法
我朋友告诉了我⼀个神仙⽅法，直接在rules⾥⾯使⽤pattern属性写正则表达式
rules:{
phone:[
{ required:true, message:'号码不能为空', trigger:'blur'}，
{
pattern:/^[1][3,4,5,7,8][0-9]{9}$/,
message:'格式不正确',
trigger:'blur'
}
]
}