js简单表单验证

最新推荐文章于 2022-05-24 11:07:12 发布
原创最新推荐文章于 2022-05-24 11:07:12 发布 · 507 阅读
0 ·
CC 4.0 BY-SA版权
js 专栏收录该内容
10 篇文章
订阅专栏
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>

<body>
<p>员工信息录入</p>
<form action="user.html" id="empForm" method="post" name="empForm">
<table border="1">
  <tr>
    <td>真实姓名：（不能为空）</td>
    <td><input name="realname"  id="realname" type="text" /></td>
  </tr>
  <tr>
    <td>登录名：（不能为空，长度5-8）</td>
    <td><input name="username"  id="username"type="text" /></td>
  </tr>
  <tr>
    <td>密码：（不能为空，6-12字符或数字，不能有中文）</td>
    <td><input name="password"  id="password" type="password" /></td>
  </tr>
  <tr>
    <td>重复密码：</td>
    <td><input name="repassword"  id="repassword" type="password" /></td>
  </tr>
  <tr>
    <td>性别：</td>
    <td>男<input name="sex"  id="sex_m"  type="radio" />女<input name="sex"  id="sex_w"  type="radio" /></td>
  </tr>
  <tr>
    <td>身份证：（15或18位）</td>
    <td><input name="cart"  id="cart" type="text" /></td>
  </tr>
  <tr>
    <td colspan="2"><input name="button" id="button" type="button" value="提交" /></td>
  </tr>
</table>

</form>
</body>
<script language="javascript">
	window.onload = function() {
		document.getElementById("button").onclick = function() {
			//用户名验证
			var realname = document.getElementById("realname").value;
			if(realname==""||realname==null||realname==undefined){
				alert("请输入真实用户名");
				document.getElementById("realname").focus();
				return false;
			}
			//登录名验证
			var username = document.getElementById("username").value;
			if(username==""||username==null||username==undefined){
				alert("请输入登录名");
				document.getElementById("username").focus();
				return false;
			}
			//登录名长度验证
			var pattern = new RegExp("^[a-zA-Z0-9\u4e00-\u9fa5]{0,4}$");
			var flag = pattern.test(username);
			if(flag){
				alert("登录名长度不能少于5");
				document.getElementById("username").focus();
				return false;
			}
			var pattern1 = /^[a-zA-Z0-9\u4e00-\u9fa5]{9,}$/;
			var flag1 = pattern1.test(username);
			if(flag1){
				alert("登录名长度不能大于9");
				document.getElementById("username").focus();
				return false;
			}
			//密码验证
			var password = document.getElementById("password").value;
			if(password==""||password==null||password==undefined){
				alert("请输入密码");
				document.getElementById("password").focus();
				return false;
			}
			//密码长度验证及中文
			var pattern = new RegExp("^[a-zA-Z0-9\u4e00-\u9fa5]{0,5}$");
			var flag = pattern.test(password);
			if(flag){
				alert("密码长度不能少于5");
				document.getElementById("password").focus();
				return false;
			}
			var pattern1 = /^[a-zA-Z0-9\u4e00-\u9fa5]{13,}$/;
			var flag1 = pattern1.test(password);
			if(flag1){
				alert("密码长度不能大于13");
				document.getElementById("password").focus();
				return false;
			}
			//重复密码验证
			var repassword = document.getElementById("repassword").value;
			if(password!=repassword){
				alert("你输入的密码与上面的不同");
				document.getElementById("repassword").focus();
				return false;
			}
			//性别验证
			var flag2;
			var sexElements = document.getElementsByName("sex");
			for ( var i = 0; i < sexElements.length; i++) {
				if(sexElements[i].checked){
					flag2=true;
					break;
				}
			}
			if(!flag2){
				alert("性别必须选一个");
				return false;
			}
			//身份证验证
			var cart = document.getElementById("cart").value;
			if(cart==""||cart==null||cart==undefined){
				alert("请输入身份证号");
				document.getElementById("cart").focus();
				return false;
			}
		}
	}
</script>
</html>