1.邮箱跟手机验证有问题，但不知道怎么更正；2.还有代码有哪些需要优化的，还请提示。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.wrap {
margin: auto;
width: 50%;
}
.validText {
color: red;
}
</style>
</head>
<body>
<div class="wrap">
<table>
<tr>
<td>用户名：</td>
<td>
<input type="text" class="userName" id="userName">
</td>
<td class="validText">
<label for="userName" id="lblUserName"></label>
</td>
</tr>
<tr>
<td>登录密码：</td>
<td>
<input type="text" id="password">
</td>
<td class="validText">
<label for="lblPwd" id="lblPwd"></label>
</td>
</tr>
<tr>
<td>确认密码：</td>
<td>
<input type="text" id="confirmPwd">
</td>
<td class="validText">
<label for="confirmPwd" id="lblConfirmPwd"></label>
</td>
</tr>
<tr>
<td>姓名：</td>
<td>
<input type="text" id="realName">
</td>
<td class="validText">
<label for="realName" id="lblRealName"></label>
</td>
</tr>
<tr>
<td>性别：</td>
<td>
<input type="text" id="gender">
</td>
<td class="validText">
<label for="gender"></label>
</td>
</tr>
<tr>
<td>身份证号码：</td>
<td>
<input type="text" id="ID">
</td>
<td class="validText">
<label for="ID" id="lblID"></label>
</td>
</tr>
<tr>
<td>邮箱：</td>
<td>
<input type="text" id="email">
</td>
<td class="validText">
<label for="email" id="lblEmail"></label>
</td>
</tr>
<tr>
<td>手机号码：</td>
<td>
<input type="text" id="phoneNo">
</td>
<td class="validText">
<label for="phoneNo" id="lblPhoneNo"></label>
</td>
</tr>
</table>
<button class="submit" onclick="SubmitForm()">提交</button>
</div>
</body>
<script>
//用户名
var eleUserName = document.getElementById("userName"),
lblUserName = document.getElementById("lblUserName"),
elePwd = document.getElementById("password"),
lblPwd = document.getElementById("lblPwd"),
eleConfirmPwd = document.getElementById("confirmPwd"),
lblConfirmPwd = document.getElementById("lblConfirmPwd"),
eleRealName = document.getElementById("realName"),
lblRealName = document.getElementById("lblRealName"),
eleID = document.getElementById("ID"),
lblID = document.getElementById("lblID"),
eleEmail = document.getElementById("email"),
lblEmail = document.getElementById("lblEmail"),
elePhoneNo = document.getElementById("phoneNo"),
lblPhoneNo = document.getElementById("lblPhoneNo");
var validFalse = false;
//用户名：
function userNameVal() {
var pattern = /^[a-zA-Z]\w{5,19}$/;
var userName = eleUserName.value;
if (pattern.test(userName)) {
lblUserName.innerHTML = "OK";
}
else {
lblUserName.innerHTML = "6-20位字母、数字或_,字母开头";
validFalse = true;
}
}
eleUserName.onblur = function () {
userNameVal();
}
//密码：
function pwdVal() {
var pattern = /^\S{6,18}$/;
var pwd = elePwd.value;
if (pattern.test(pwd)) {
lblPwd.innerHTML = "OK";
}
else {
lblPwd.innerHTML = "密码6-18位，包括数字字母或符号，中间不能有空格";
validFalse = true;
}
}
elePwd.onblur = function () {
pwdVal();
}
//验证密码：
function confirmPwdVal() {
var pwd = elePwd.value;
var confirmPwd = eleConfirmPwd.value;
if (pwd == confirmPwd) {
lblConfirmPwd.innerHTML = "OK";
}
else {
lblConfirmPwd.innerHTML = "两次输入密码不一致";
validFalse = true;
}
}
eleConfirmPwd.onblur = function () {
confirmPwdVal();
}
//验证姓名：
function realNameVal() {
var realName = eleRealName.value;
var pattern = /^[\u4e00-\u9fa5]{2,4}$/;
if (pattern.test(realName)) {
lblRealName.innerHTML = "OK";
}
else {
lblRealName.innerHTML = "两位到四位的中文汉字";
validFalse = true;
}
}
eleRealName.onblur = function () {
realNameVal();
}
//验证身份证：
function IDVal() {
var ID = eleID.value;
var pattern = /^(\d{15}|\d{18}|\d{17}X|\d{17}x)$/;
if (pattern.test(ID)) {
lblID.innerHTML = "OK";
}
else {
lblID.innerHTML = "15位或者18位的数字";
validFalse = true;
}
}
eleID.onblur = function () {
IDVal();
}
//验证邮箱：
function EmailVal() {
var email = eleEmail.value;
var pattern = /^\w+@(?:\w+\.)+[a-z]$/i;
if (pattern.test(email)) {
lblEmail.innerHTML = "OK";
}
else {
lblEmail.innerHTML = "12323@qq.com、lulu_s@open.com、lu_lu_z@qq.com.cn";
validFalse = true;
}
}
eleEmail.onblur = function () {
EmailVal();
}
//验证手机：
function PhoneNoVal() {
var phoneNo = elePhoneNo.value;
var pattern = /^1\d{10}$/;
if (pattern.test(phoneNo)) {
lblPhoneNo.innerHTML = "OK";
}
else {
lblPhoneNo.innerHTML = "11位数字";
validFalse = true;
}
}
elePhoneNo.onblur = function () {
PhoneNoVal();
}
function SubmitForm() {
userNameVal();
pwdVal();
confirmPwdVal();
realNameVal();
IDVal();
EmailVal();
PhoneNoVal();
if (!validFalse) {
alert("验证成功")
}
}
</script>
</html>
正在回答
同学你好！
如果不添加括号表示分组，那么都需要有起始符号才能正常匹配：
添加括号，表示括号中的任意一个/^(1|2|3|4)&/
如果帮助到了你 欢迎采纳 祝学习愉快~
相似问题
登录后可查看更多问答，登录/注册
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星