el-form 触发单个校验

最新推荐文章于 2024-08-04 22:42:27 发布

String佳佳

最新推荐文章于 2024-08-04 22:42:27 发布

阅读量3.8k

点赞数 2

分类专栏： vue+elementui相关知识点和难点文章标签：前端 javascript 开发语言

本文链接：https://blog.csdn.net/weixin_44171757/article/details/125715443

版权

vue+elementui相关知识点和难点专栏收录该内容

35 篇文章 7 订阅

订阅专栏

本文介绍了如何在使用Element UI的El-Form组件中实现手机号输入的验证，包括必填、格式检查和自定义验证函数。重点展示了如何编写validatorPhone函数来确保手机号的有效性和正确格式。

摘要由CSDN通过智能技术生成

	 <el-form
        ref="loginForm"
        :model="loginForm"
      >
      	 <el-form-item
            prop="userPhone"
            :rules="[{validator: validatorPhone,required: true,trigger: 'blur'}"
          >
            <el-input v-model="loginForm.userPhone" placeholder="11位手机号" maxlength="11" @focus="phoneFocus" />
          </el-form-item>
      </el-form>
		 
//data:
 const validatorPhone = (rule, value, callback) => {
      if (value == '' || value == undefined) {
        callback(new Error('手机号不能为空'))
      } else if (Regx.isTel(value)) {
       callback()
      } else {
        callback(new Error('电话号码格式错误'))
      }
    }
 validatorPhone: validatorPhone  


//js---触发单个校验
this.$refs.loginForm.validateField('userPhone')