<template>
<div>
<Button type="primary" @click="updateInfo">打开修改弹窗</Button>
<Modal v-model="ModifyInfoModel" title="修改" :closable="false" :mask-closable="false">
<Form onsubmit="return false" ref="ModifyInfo" :model="ModifyForm" :rules="ruleValidate" :label-width="100" >
<Form-item label="电话:" prop="TelePhone">
<Input t v-model="ModifyForm.TelePhone" placeholder="请输入电话" style="width: 84%" ></Input>
</Form-item>
<Form-item label="邮箱:" prop="Email">
<Input v-model="ModifyForm.Email" placeholder="请输入邮箱" style="width: 84%" ></Input>
</Form-item>
</Form>
<footer slot="footer">
<Button type="primary" @click="handleModify">修改</Button>
<Button @click="handleCancel">取消</Button>
</footer>
</Modal>
</div>
</template>
<script>
export default {
name: 'App',
data() {
return {
ModifyInfoModel:false,
ModifyForm:{
TelePhone:'',
Email:''
},
ruleValidate:{
TelePhone: [
{ required: true, message: '请填写电话号码', trigger: 'blur' },
{ pattern: /^1[345789]\d{9}$/, message: '手机号码格式不正确', trigger: 'blur' }
],
Email: [
{ required: true, message: '请输入邮箱', trigger: 'blur' },
{ type: 'email', message: '请输入正确的邮箱格式', trigger: 'blur' }
],
},
}},
methods: {
updateInfo(){
this.ModifyInfoModel = true
},
handleModify(){
this.$refs['ModifyInfo'].validate((valid)=>{
if(valid){
alert('校验通过!')
}
})
},
handleCancel(){
this.ModifyForm={
TelePhone:'',
Email:''
}
this.$refs['ModifyInfo'].resetFields()
this.ModifyInfoModel = false
},
}
}
</script>
iview>Form表单电话/邮箱正则校验,开箱即用!
最新推荐文章于 2024-08-18 21:06:49 发布