<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<title>表单验证</title>
<script type="text/javascript">
function $(id) {
return document.getElementById(id);
}
function check() {
var name = $("name").value;
var phone = $("phone").value;
var password = $("password").value;
var repassword = $("repassword").value;
$("errorinfo").innerHTML = "";
//姓名验证
if(name == "") {
$("errorinfo").innerHTML = "姓名不能为空";
return false;
}
if (name.search(/^(?=.*\d.*\b)/) != -1){
$("errorinfo").innerHTML = "姓名不能有数字";
return false;
}
//手机号验证
if(phone == ""){
$("errorinfo").innerHTML = "手机号不能为空";
return false;
}
if (phone.search(/^(13[0-9]|15[012356789]|17[0-9]|18[0-9]|14[57])[0-9]{8}$/) == -1){
$("errorinfo").innerHTML = "手机号格式错误";
return false;
}
//密码验证
if(password == ""){
$("errorinfo").innerHTML = "密码不能为空";
return false;
}
if(password.length < 5) {
$("errorinfo").innerHTML = "密码长度必须大于或者等于5";
return false;
}
//确认密码验证
if(repassword != password) {
$("errorinfo").innerHTML = "两次输入的密码不一致";
return false;
}
}
function btn() {
var inputs = document.getElementsByTagName("button"); //取出名字为button的值
for (var i =0; i < inputs.length; i++) { //遍历
var button = inputs[i];
button.onclick = btnclick; //当某个按钮被点击时调用btnclick函数
}
}
function btnclick() {
var inputs = document.getElementsByTagName("button"); //取出button的值
for (var i =0; i < inputs.length; i++) {
var button = inputs[i]; //遍历
if (button == window.event.srcElement) { //如果被点击
button.style.color="red";
}
else {
button.style.color="black";
}
}
}
</script>
</head>
<body>
<form name="login_form" method="post" onsubmit="return check()" action="new.html">
<div>
姓名：<input type="text" name="name" id="name"/>
</div>
<div>
手机号：<input type="text" name="phone" id="phone"/>
</div>
<div>
密码：<input type="password" name="password" id="password" />
</div>
<div>
确认密码：<input type="password" name="repassword" id="repassword" />
</div>
<div>
<span id="errorinfo"></span>
</div>
<div>
<button type="submit"/>注册</button>
</div>
</form>
</body>
</html>
