vue的注册验证
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>表单验证</title>
<script src="js/vue.js"></script>
<style>
.success {
color: green !important;
}
.error {
color: red;
}
</style>
</head>
<body>
<div id="app">
<div class="item">
用户名<input v-model="username" @input="checkusername" />
<span :class="usernameclass">{{usernametip}}</span>
</div>
<div class="item">
密码<input v-model="userpwd" @input="checkuserpwd" />
<span :class="userpwdclass" v-html="userpwdtip"></span>
</div>
<div class="item">
手机号<input v-model="usertel" @input="checkusertel" />
<span :class="usertelclass">{{userteltip}}</span>
</div>
<button @click="submit">验证</button>
</div>
</body>
<script>
new Vue({
el: "#app",
data: {
username: "",
usernametip: "用户名的提示",
usernamereg: /^[a-z_$][0-9a-z_$]{5,9}$/i,
usernameclass: "error",
userpwd: "",
userpwdtip: "密码的提示",
userpwdreg: /^[0-9a-z]{6,12}$/i,
userpwdclass: "error",
usertel: "",
userteltip: "手机号的提示",
usertelreg: /^1[3-9][0-9]{9}$/i,
usertelclass: "error",
},
methods: {
submit() {
//所有的验证是否都通过
if (
this.usernameclass == "success" &&
this.userpwdclass == "success" &&
this.usertelclass == "success"
) {
alert("验证通过");
} else {
alert("请检查红色的错误提示");
}
},
checkusername() {
//检查用户名
//正则表达式的验证
if (this.usernamereg.test(this.username)) {
this.usernametip = "√";
this.usernameclass = "success";
} else {
this.usernametip =
"用户名只能数字字母_$组成并且不能以数字开头 长度6到10位";
this.usernameclass = "error";
}
},
checkusertel() {
//检查手机号
if (this.usertelreg.test(this.usertel)) {
this.userteltip = "√";
this.usertelclass = "success";
} else {
this.userteltip = "请输入常用的11位手机号";
this.usertelclass = "error";
}
},
checkuserpwd() {
//验证密码
//第一步 验证格式是否合法
if (this.userpwdreg.test(this.userpwd)) {
// this.userpwdtip="√";
// this.userpwdclass="success";
//这里都是格式合法的
let numCount = /[0-9]/.test(this.userpwd); //测试出里面有数字结果就是true
let lowerCount = /[a-z]/.test(this.userpwd); //测试是否有小写
let uppwerCount = /[A-Z]/.test(this.userpwd); //测试是否有大写
switch (
numCount +
lowerCount +
uppwerCount //求三个的和
) {
case 1:
this.userpwdtip = `<button style="width:50px;">弱</button>`;
break;
case 2:
this.userpwdtip = `<button style="width:100px;">中</button>`;
break;
case 3:
this.userpwdtip = `<button style="width:150px;">强</button>`;
break;
}
this.userpwdclass = "success";
} else {
this.userpwdtip = "密码只能数字字母组成长度6到12位";
this.userpwdclass = "error";
}
},
},
});
</script>
</html>
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包，你的智能百科全书，全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步
· 基于Microsoft.Extensions.AI核心库实现RAG应用
· Linux系列：如何用heaptrack跟踪.NET程序的非托管内存泄露
· 开发者必知的日志记录最佳实践
· SQL Server 2025 AI相关能力初探
· Linux系列：如何用 C#调用 C方法造成内存泄露
· 无需6万激活码！GitHub神秘组织3小时极速复刻Manus，手把手教你使用OpenManus搭建本
· Manus爆火，是硬核还是营销？
· 终于写完轮子一部分：tcp代理 了，记录一下
· 别再用vector＜bool＞了！Google高级工程师：这可能是STL最大的设计失误
· 单元测试从入门到精通