```
<!DOCTYPE
html>
<
html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<fieldset style="width: 400px">
<legend>用户注册-数据校验</legend>
<a>账号：</a><
input type="text"
placeholder="请输入账号" id="
input1"/><
label id ="
input1Tips"></
label><br />
<a>密码：</a><
input type="password"
placeholder="请输入密码" id="
input2"/><
label id ="
input2Tips"></
label><br />
<a>确认密码：</a><
input type="password"
placeholder="请再次输入密码" id="
input3"/><
label id ="
input3Tips"></
label><br />
<a>手机号：</a><
input type="tel"
placeholder="请输入手机号" id="
input4"/><
label id ="
input4Tips"></
label><br />
<a>邮箱：</a><
input type="email"
placeholder="请输入邮箱" id="
input5"/><
label id="
input5Tips"></
label><br />
<button onclick="check()" type="button">检查</button>
</fieldset>
<script>
function check(){
var
inputTag1 = document.getElementById("
input1");
var
inputTag2 = document.getElementById("
input2");
var
inputTag3 = document.getElementById("
input3");
var
inputTag4 = document.getElementById("
input4");
var
inputTag5 = document.getElementById("
input5");
var text =
inputTag1.value;
var password =
inputTag2.value;
var confirmPassword =
inputTag3.value;
var tel =
inputTag4.value;
var email =
inputTag5.value;
var textReg = new RegExp("^(?=.*\\d)(?=.*[A-Za-z])[A-Za-z\\d]{8,20}$");
var b1 = textReg.test(text);
var
label1 = document.getElementById("
input1Tips")
if(b1){
label1.inner
HTML = "账号格式正确";
label1.style.color = "green"
}else{
label1.inner
HTML = "账号格式不正确";
label1.style.color = "red";
}
var b2 = passwordReg.test(password);
var
label2 = document.getElementById("
input2Tips");
var b3 = confirmPassword.test(confirmPassword);
var
label3 = document.getElementById("
input2Tips");
if(b3 = b2 ){
label3.inner
HTML = "密码一致";
label3.style.color = "green"
}else{
label3.inner
HTML = "两次密码不一致";
label3.style.color = "red";
var telreg = new RegExp("^1[3,5,7,8,9][0-9]{9}$")
var b4 = telReg.test(tel);
var
label4 = document.getElementById("
input4Tips");
if(b4){
label4.inner
HTML = "手机格式正确";
label4.style.color = "green"
}else{
label4.inner
HTML = "手机格式不正确";
label4.style.color = "red";
}
var emailReg = new RegExp("^\\w
+([-
+.]\\w
+)*@\\w
+([-.]\\w
+)*\\.\\w
+([-.]\\w
+)*$");
var b5 = emailReg.test(email);
var
labelTag5 = document.getElementById("
input5Tips");
if(b5){
labelTag5.inner
HTML = "邮箱格式正确!";
labelTag5.style.color = "green";
}else{
labelTag5.inner
HTML = "邮箱格式不正确!";
labelTag5.style.color = "red";
}
}
}
</script>
</body>
</
html>```提供修改后的完整代码
本文深入讲解了HTML5中新增的placeholder属性，它用于在表单输入字段中提供提示信息，适用于多种输入类型如text、email等。文章还探讨了其在不同浏览器中的兼容性问题。
扫一扫
3198
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
