<html>
<head>
<meta charset="UTF-8">
<title>js表单验证</title>
</head>
<body>
<form name="frm" onsubmit="return yanzheng()">
<!-- 注意：验证函数要在表单里，用onsubmit属性调用，并加上 return -->
邮箱:<input type="text" name="email" id="email"><br>
用户名:<input type="text" name="name" id="name"><br>
密码:<input type="password" name="p1" id="p1"><br>
确认密码:<input type="password" name="p2" id="p2"><br>
手机号码:<input type="text" id="phone" name="phone"><br>
<input type="submit" value="提交">
<!-- 如果验证函数用在 提交按钮里，比如
<input type="submit" value="提交" onclick="yanzheng()">
这样不管验证是否成功，都会把表单提交
-->
</form>
</body>
<script>
function yanzheng(){
var regNameStr = /^\s*\w{6,10}\s*$/;
// ^ 匹配输入字符串的开始位置
// \s 匹配空白字符任何空白字符，包括空格、制表符、换页符等等
// \w 匹配字母、数字、下划线
// $ 匹配输入字符串的结束位置
// 上面的正则表达式匹配 长度在6-10之间的字符串，字符串两边可以加入任意空格
// 即 名字的长度要在6-10之间（中文3到5个字）
var regEmailStr = /^\s*\w+@\w+\s*$/;
// 匹配 xxxx@XXX 格式的邮箱输入
var regPhoneStr =/^1[0-9]{10}$/
//匹配1开头的11位手机号码
var email = document.getElementById("email").value; //获取html中 对应的属性名 的值
var name = document.getElementById("name").value;
var p1 = document.getElementById("p1").value;
var p2 = document.getElementById("p2").value;
var phone = document.getElementById("phone").value;
if (frm.email.value.trim() =="") { // 也可以通过 表单名.属性名.value 获取对应的值
alert("邮箱不能为空！");
document.getElementById("email").focus();//聚焦函数
return false;
}
else if (!regEmailStr.test(email)) { //验证是否符合正则表达式的要求
alert("邮箱格式错误");
document.getElementById("email").focus();
return false;
}
else if (name.trim() == "") { // trim()函数 可以去除空格
alert("名称不能为空！");
document.getElementById("name").focus();
return false;
}
else if (!regNameStr.test(name)) {
alert("名称格式错误，长度6到10位");
document.getElementById("name").focus();
return false;
}
else if (p1.trim() == "") {
alert("请输入密码");
document.getElementById("p1").focus();
return false;
}
else if (p2.trim() == "") {
alert("请输入确认密码");
document.getElementById("p2").focus();
return false;
}
else if (p1 != p2) {
alert("密码和确认密码不一样！");
document.getElementById("p2").focus();
return false;
}
else if(phone.trim()==""){
alert("请输入1开头的11位手机号码");
document.getElementById("phone").focus();
return false;
}
else return true;
}
</script>
</html>
11-07
4419
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
