ノート：
1. この記事の入力ボックスは、<el-input></el-input> ではなく、<input></input> です。
2. onblur ではなく @blur を使用するようにブラー メソッドをバインドします (エラーが報告されます)。
1. HTML 部分:
<template>
<div>
<!--手机号-->
<div class="error">
<div class="input-fill-x" >
<input v-model="param.account" class="input-control input-fill"
placeholder="手机号码"
id="telephone" @blur="checkPhone()" >
<label class="input-label">手机号码</label>
</div>
<div class="errorDiv">{
{s_telephone1}}</div>
</div>
<!--密码-->
<div class="error">
<div class="input-fill-x" >
<input v-model="param.password" class="input-control input-fill"
placeholder="密码"
:type="pwdType===true ?'password' :'text' " id="password"
@blur="checkPasswords()">
<label class="input-label">密码</label>
</div>
<div class="errorDiv">{
{s_password1}}</div>
</div>
</div>
</template>その内: { {s_telephone1}} in <div class="errorDiv">{ {s_telephone1}}</div> はエラー メッセージです
2、js パート
<script>
export default {
name: 'UserLogin', //vue的name
data() {
return {
param: {
}
s_telephone1:"",//手机号错误提示信息初始为空
s_password1:"",//密码错误提示信息初始为空
};
},
methods:{
//手机号1校验
checkPhone(){
//定义phone，通过唯一id拿到input框输入的值
const phone = document.getElementById('telephone').value;
if(!(/^1[34578]\d{9}$/.test(phone))) { //手机号正则校验
if(phone===''){ //若手机号为空
this.s_telephone1 = "请输入手机号码";
return false;
}else { //手机号非空的报错信息
this.s_telephone1 = "手机号码格式错误";
return false;
}
}else{ //手机号正确则无错误信息
this.s_telephone1 = "";
return true;
}
},
// 密码校验
checkPasswords(){
//定义password，通过唯一id拿到input框输入的值
const password = document.getElementById('password').value;
if(!(/^[a-zA-Z][a-zA-Z0-9]{7,19}$/.test(password))){ //密码正则校验
if(password===''){ //若密码为空
this.s_password1 = "请输入登录密码";
return false;
}else { //密码非空的报错信息
this.s_password1 = "密码8-20位,包含字母和数字,字母开头,不可以有特殊符号";
return false;
}
}else{ //密码正确则无错误信息
this.s_password1 = "";
return true;
}
},
},
}
</script>3. 効果を実感する
1. 何も操作を行わない
2. 携帯電話番号入力ボックスをクリックします。ただし、情報は入力しないでください。
3. 携帯電話番号入力ボックスをクリックし、間違った情報を入力します
参考：
https://jingyan.baidu.com/article/b907e62797e19146e7891ccb.html
HTML フォーム検証 (ユーザー名、パスワード、電子メール、携帯電話番号、検証コード検証を含む)
余談：
vue での input と lable の使用は入力アニメーション効果を実現するためのもので、この記事とは関係ありません。時間があるときにまた書きます。効果は Xiaomi 公式 Web サイトの効果と似ています: Xiaomi account-login (xiaomi ) .com）
以下の文章と少し似ていますが、興味があれば読んでください。