表单校验加强版

最新推荐文章于 2025-12-06 12:08:52 发布

原创最新推荐文章于 2025-12-06 12:08:52 发布 · 270 阅读

0 ·

CC 4.0 BY-SA版权

前端专栏收录该内容

26 篇文章

订阅专栏

本文介绍了一个使用HTML和JavaScript实现的简单表单验证示例。主要关注于如何通过JavaScript进行前端表单字段的验证，包括检查名称字段是否为空，以及是否符合6到12个字符的英文字母正则表达式。

在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			function validate(){
				/* 设置标志位 默认置为true
				1.获取标签对象 六个标签
				2.判断名称对象 如果为空  提示"名称不能为空"
							  如果不为空 6-12英文字母  正则表达式
							     满足:不提示
								 不满足:提示"请输入6-12个英文字母",
								 innerHTML
								 innerText
				3.判断账号
				4.判断密码
				5.提交 判断 */
				var f = true;
				var uname = document.getElementById("uname");
				var sname = document.getElementById("sname");
				if(uname.value==null||uname.value==""){
					sname.innerHTML="<font color='red'>名称不能为空</font>";
					f=false;
				}else{
					var regex = /^[a-zA-Z0-9_]{6,12}$/;
					if(regex.test(uname.value)==false){
						sname.innerHTML="<font color='red'>6-12位英文字母</font>";
						f=false;
					}
					
				}
				
				if(f==true){
					document.getElementById("bt").submit();
				}
				
				
				
				
				
			}
			
		</script>
	</head>
	<body>
		<center>
			<form action="#" method="get" id="bt">
				<table cellpadding="8px" bgcolor="lightyellow" width="700px" cellspacing="0px">
					<tr>
						<td align="right" width="30%">名称:</td>
						<td><input type="text" name="username" id="uname"/>&nbsp;&nbsp;&nbsp;<span id="sname"><font color="red">*</font></span></td>
						
					</tr>
					<tr>
						<td align="right" width="30%">账号:</td>
						<td><input type="text" name="accid" id="cid"/>&nbsp;&nbsp;&nbsp;<span id="sid"><font color="red">*</font></span></td>
						
					</tr>
					<tr>
						<td align="right" width="30%">密码:</td>
						<td><input name="password" type="password" id="pwd"/>&nbsp;&nbsp;&nbsp;<span id="spwd"><font color="red">*</font></span></td>
						
					</tr>
					<tr>
						<td colspan="2" align="center">
							<input type="submit" onclick="validate()"/>&nbsp;&nbsp;&nbsp;&nbsp;
							<input type="reset"/>										
									</td>	
								</tr>	
							</table>
	
						</form>	
					</center>
	</body>
</html>