js_08表单验证

最新推荐文章于 2023-02-03 12:00:00 发布

喔喔。

最新推荐文章于 2023-02-03 12:00:00 发布

阅读量173

点赞数 1

文章标签： java

本文链接：https://blog.csdn.net/weixin_66616840/article/details/124133270

版权

文章目录

1.为什么需要表单验证
2.表单验证内容
3.String对象
- 3.1 内容
- 3.2 相关属性
4. 表单验证思路
5.表单验证案例

1.为什么需要表单验证

减轻服务器的压力
保证输入的数据符合要求

2.表单验证内容

日期是否有效或日期格式是否正确
表单元素是否为空
用户名和密码
E-mail地址是否正确
身份证号码等是否是数字

3.String对象

3.1 内容

字符串对象的属性
字符串对象.length

3.2 相关属性

toLowerCase(): 把字符串转化为小写
toUpperCase() : 把字符串转化为大写
charAt(index):返回在指定位置的字符
indexOf(字符串，index) :查找某个指定的字符串值在字符串中首次出现的位置
substring(index1,index2): 返回位于指定索引index1和index2之间的字符串，并且包括索引index1对应的字符，不包括索引index2对应的字符

4. 表单验证思路

获得表单元素值
使用JavaScript的一些方法对数据进行判断
当表单提交时，触发 onsubmit事件，对获取的数据进行验证

5.表单验证案例

<body>
		<form action="注册成功.html" method="post" onsubmit="return checkAll()">
             <label>
	         <div id="">
				账号：<input type="text" id="name" onkeyup="checkname()"/>
				<span id="sname" style="color: red;"></span>
			</div>
			</label>			
			<label>
				<div id="">
				密码：<input type="password" id ="pwd"onkeyup="checkpwd()"/>	
				<span id="spwd" style="color: red;"></span>
				</div>
			</label>
			<label>
				<div id="">
				确认密码：<input type="password" id="pwd2" onkeyup="checkpwd2()"/>
				<span id="spwd2" style="color: red;"></span>
				</div>
			</label>
			<label>
				<div id="">
					邮箱：<input type="email"  id="yx" />
				</div>
			</label>
			<button type="submit">注册</button>
			<button type="reset">重置</button>
		</form>
	</body>
	<script type="text/javascript">
	//通过id获取组件的方法，传入id
		function $ (id){
			return document.getElementById(id);
		}
		//验证方法
		function checkname (){
			var reg = /^\w{6,10}$/
		    var name = $("name").value;
	       if (""==name) {
	       	$("sname").innerHTML="账号不能为空！";
			return false;
	       }else{
			   if (!reg.test(name)) {
			   	$("sname").innerHTML="账号只能由6-10位数字、字母、下滑线组成！";
				return false;
			   }else{
				   $("sname").innerHTML="";
				  return true;
			   }
		   }
		}
		function checkpwd (){
			var reg = /^\d{6}$/
		    var pwd = $("pwd").value;
		   if (""==pwd) {
		   	$("spwd").innerHTML="密码不能为空！";
			return false;
		   }else{
			   if (!reg.test(pwd)) {
			   	$("spwd").innerHTML="密码只能由6位数字组成！";
				return false;
			   }else{
				   	$("spwd").innerHTML="";
				  return true;
			   }
		   }
		}
		function checkpwd2 (){
			var pwd = $("pwd").value;
			var pwd2 = $("pwd2").value;
			if (""==pwd2) {
				$("spwd2").innerHTML="不能为空！"
				return false;
			} else{
				if (! pwd == pwd2) {
					$("spwd2").innerHTML="请与上次输入密码保持一致";
					return false;
				} else{
					$("spwd2").innerHTML="";
					return true;
				}
			}
		}
		function checkAll(){
			if (!checkname()|| !checkpwd()||!checkpwd2()) {
				return false;
			} else{
				return true;
			}
		}
	</script>

喔喔。

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js_08表单验证

文章目录1.为什么需要表单验证2.表单验证内容3.String对象3.1 内容3.2 相关属性4. 表单验证思路5.表单验证案例1.为什么需要表单验证减轻服务器的压力保证输入的数据符合要求2.表单验证内容日期是否有效或日期格式是否正确表单元素是否为空用户名和密码E-mail地址是否正确身份证号码等是否是数字3.String对象3.1 内容字符串对象的属性字符串对象.length3.2 相关属性toLowerCase(): 把字符串转化为小写toUpper
复制链接

扫一扫