element plus表单自定义校验规则和验证单个字段
关键代码
// prop 设置校验规则
<el-form ref="registerFormRef" :model="registerForm" status-icon :rules="registerRules" label-width="70px">
<el-form-item label="手机号" prop="tel">
<el-input v-model="registerForm.tel" autocomplete="off" placeholder="请输入手机号" />
<el-link type="danger" @click="sendCode" :disabled="hasBeenSend">{{ sendCodeText }}</el-link>
</el-form-item>
</el-form>
<script lang="ts">
import { defineComponent, reactive, toRefs, unref, ref, onMounted, watch } from "vue";
import { FormInstance } from "element-plus";
export default defineComponent({
setup() {
// 注册验证
const registerFormRef = ref<FormInstance>();
// 手机号码自定义验证规则
const telValidator = (rule, value, callback) => {
if (!value) {
callback(new Error("请输入手机号"));
} else if (!/^1[3456789]\d{9}$/.test(value)) {
callback(new Error("手机号格式不正确"));
} else {
callback();
}
};
// 注册表单验证规则
const registerRules = {
tel: [
{
validator: telValidator,
trigger: "blur",
required: true,
},
],
}
// 发送验证码按钮
const sendCode = () => {
const formRef: any = unref(registerFormRef);
formRef.validateField("tel", (valid: boolean) => {
if (valid) {
// 验证通过
let timer = setInterval(() => {
if (initData.countDown > 0) {
initData.hasBeenSend = true; // 是否禁用点击事件
initData.countDown--; // 倒计时
initData.sendCodeText = initData.countDown "秒后重新获取";
} else {
initData.hasBeenSend = false;
initData.countDown = 60;
initData.sendCodeText = "重新获取";
clearInterval(timer);
}
}, 1000);
// 发送验证码接口
sendCodeApi(initData.registerForm.tel);
}
});
};
return {
registerRules,
registerFormRef,
};
}
</script>
效果展示
这篇好文章是转载于:学新通技术网
- 版权申明: 本站部分内容来自互联网,仅供学习及演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,请提供相关证据及您的身份证明,我们将在收到邮件后48小时内删除。
- 本站站名: 学新通技术网
- 本文地址: /boutique/detail/tanhgbciic
系列文章
更多
同类精品
更多
-
photoshop保存的图片太大微信发不了怎么办
PHP中文网 06-15 -
Android 11 保存文件到外部存储,并分享文件
Luke 10-12 -
word里面弄一个表格后上面的标题会跑到下面怎么办
PHP中文网 06-20 -
《学习通》视频自动暂停处理方法
HelloWorld317 07-05 -
photoshop扩展功能面板显示灰色怎么办
PHP中文网 06-14 -
微信公众号没有声音提示怎么办
PHP中文网 03-31 -
excel下划线不显示怎么办
PHP中文网 06-23 -
怎样阻止微信小程序自动打开
PHP中文网 06-13 -
excel打印预览压线压字怎么办
PHP中文网 06-22 -
TikTok加速器哪个好免费的TK加速器推荐
TK小达人 10-01