您的位置：首页 > 其它

正则表达式表单验证

2016-07-16 09:06 369 查看

<!DOCTYPE html>
<html>

<head>
<meta
charset="UTF-8">
<title></title>
</head>

<body>
<form
id="form1"
action="">
手机号：<input
type="text"
id="tel" name="tel"><br> 邮箱：
<input
type="text"
id="email" name="email"><br> ip: <input
type="text"
id="ip" name="ip"><br>
<input
type="submit">
</form>
<script>
var
tel = document.getElementById("tel");
var
email = document.getElementById("email");
var
ip = document.getElementById("ip");
var
form1 = document.getElementById("form1");
var
bol = false;
tel.onchange
= function() {
var
telValue = tel.value;
var
re = /^1[34578]\d{9}$/;
if(telValue
== "") {
tel.style.backgroundColor
= "";
}
else {
if(re.test(telValue)) {
tel.bol
= true;
tel.style.backgroundColor
= "";
}
else {
tel.bol
= false;
tel.style.backgroundColor
= "red";
}
}
}
email.onchange
= function() {
var
emailValue = email.value;
var
re = /^\w+@[0-9a-z]+(\.[a-z]+){1,3}$/;
if(re.test(emailValue)) {
email.bol
= true;
email.style.backgroundColor
= "";
}
else {
email.bol
= false;
email.style.backgroundColor
= "red";
}
}
ip.onchange
= function() {
var
ipValue = ip.value;
var
re = /^(?:[1-9]|[1-9]\d|1\d{2}|2[0-4]\d|25[0-5])(?:\.\d|\.[1-9]\d|\.1\d{2}|2[0-4]\d|\.2[0-4]\d|\.25[0-5]){3}$/;
if(re.test(ipValue)) {
ip.bol
= true;
ip.style.backgroundColor
= "";
}
else {
ip.bol
= false;
ip.style.backgroundColor
= "red";
}
}
form1.onsubmit
= function(ev) {
bol
= tel.bol && email.bol &&
ip.bol;
if(bol) {
alert("输入格式都正确，提交成功！");
}
else {
alert("表单填写有错，请重新输入！");
//return false;
ev.preventDefault();
}
}
</script>

</body>

</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： 正则表达式

相关文章推荐

新的分享

章节导航