iview＞Form表单电话/邮箱正则校验，开箱即用！

最新推荐文章于 2024-08-18 21:06:49 发布

m0_65678046

最新推荐文章于 2024-08-18 21:06:49 发布

阅读量55

点赞数 1

文章标签： view design 前端大数据

本文链接：https://blog.csdn.net/m0_65678046/article/details/141251343

版权

<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>