表单校验加强版

最新推荐文章于 2023-04-19 16:00:07 发布

NewBee.Mu

最新推荐文章于 2023-04-19 16:00:07 发布

阅读量91

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/NewBeeMu/article/details/98235370

版权

前端专栏收录该内容

26 篇文章 0 订阅

订阅专栏

在这里插入图片描述

<!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>

NewBee.Mu

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
表单校验加强版

<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <script type="text/javascript"> function validate(){ /* 设置标志位默认置为true ...
复制链接

扫一扫