JS中操作表单元素与正则表达式校验表单

最新推荐文章于 2021-03-01 14:29:52 发布
最新推荐文章于 2021-03-01 14:29:52 发布
阅读量715 收藏 2
点赞数 1
分类专栏： front
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-NC-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ZGL_cyy/article/details/105841135
版权

目录

1 操作表单元素

1.1 readonly 和 disabled

1.2 控制表单提交的方式

2 正则表达式

3 表单校验

1 操作表单元素

1.1 readonly 和 disabled

共同的特点： 可以看到数据， 但是不可以操作数据

不同：readonly（只读）： 里面的数据是可以提交到后台   disabled（不可用）：数据无法提交到后台

使用：readonly="readonly";输入框内属性

1.2 控制表单提交的方式

[1] οnsubmit="return checkName()"

[2] document.fom.submit();

[3] var fom = document.getElementById("fom"); fom.submit();

代码： 
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		
		<script>
			function  checkName(){
				
				//获得input对象的值
				var  uname =document.getElementById("uname").value;
				
				//获得span对象
				
				var span =document.getElementById("uname_span");
				
				if(uname==null||uname==""){
					
					
					span.innerText="×账号不能为空";
					
					
				}else {
					
					span.innerText="√账号合法";
					
				  //手动的提交表单
				  
				
				}
				
			}
			
			
		</script>
	
		
	</head>
	<body>
		
		 <form action="" name="fom" id="fom" >
		 	
		 	<p>
		 		
		 		
		 		账号：<input type="text" name="uname" id="uname" onblur="checkName()"/><span id="uname_span"></span>
		 		
		 	</p>
		 	
		 	<p>
		 		
		 		密码：<input type="password" name="pwd" value="123"/>
		 		
		 	</p>
		 	
		 	
		 	<p>
		 		
		 		<input type="button" value="提交" onclick="checkName()" />
		 		
		 	</p>
		 	
		 </form>
		
		
	</body>
</html>
效果：

2 正则表达式

* 正则表达式是对于数据格式进行一定的规范限制

* ^：开始

* [0-9] [a-z A-Z] :数字 字母

*

* {2,4} ：段域 至少是2位 最多是4位

* {3}:指定范围就是3位

* {2,}:至少是2位

* $:结束

*

* \d：[0-9]

* \w[0-9 a-z A-Z]

3 表单校验

代码： 
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script>
		
		  var  ran;
			/**********验证码生成**********/
			function  YZM(){
				
				//4位随机整数
			    ran=Math.floor(Math.random()*9000+1000);
				//获得span对象
				var span =document.getElementById("yzm_span");
				
				span.innerText=ran;
			}
			
			/*********校验用户名方法**************/
			
			function  checkName(){
		
				//汉字的正则表达式
				var  reg=/^[\u4e00-\u9fa5]{3,5}$/;
				
				return check("uname",reg);
			}
			
			
			/*********校验邮箱方法**************/
			
			function  checkEmail(){
				//邮箱的正则表达式
				
				var  reg=/^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/;
				
			return	check("email",reg);
			}
			
			
			/*********密码邮箱方法**************/
			
			function  checkPwd(){
				//密码的正则表达式
				
				var  reg=/^\d{3,6}$/;
				
			return	check("pwd",reg);
			}
			
			
			/***********提取公共的部分***************/
			function  check(id,reg){
			
				//获得密码的值
				var  uname=document.getElementById(id);
				
				var  val=uname.value;
				
				//获得alt属性
				var  alt=uname.alt;
				
				//获得span对象
				var span =document.getElementById(id+"_span");
				
				if(val==null||val==""){
					
					
					span.innerText="×"+alt+"不能为空";
					
					span.style.color="red";
					
					return false;
					
				}else if(reg.test(val)){
					
					span.innerText="√"+alt+"合法";
					
					span.style.color="green";
					
					return true;
					
				}else{
					span.innerText="×"+alt+"不合法";
					
					span.style.color="red";
					
					return false;
				}
			}
			
			/*******性别校验**************/
			
			function  checkSex(){
				
				//获得所有的性别对象
				var  sex=document.getElementsByName("sex");
				
				//获得span对象
				
				var span =document.getElementById("sex_span");
				for(var  i in sex){
					
					
					if(sex[i].checked){
						
						span.innerHTML="性别选择成功";
						
						span.style.color="green";
						
						return true;
					}
					
				}
				
				
				span.innerHTML="请选择性别";
						
				span.style.color="red";
						
				return false;
				
			}
			/*********籍贯校验***********/
			function  checkAdress(){
				
				var  sel=document.getElementById("sel").value;
				
				var  span =document.getElementById("sel_span");
				
				if(sel==0){
					
					span.style.color="red";
					span.innerText="请选择籍贯"
					
					return false;
				}else {
					
					span.style.color="green";
					span.innerText="籍贯选择成功"
					
					return true;
					
				}
				
				
				
			}
			/*******验证码输入校验********************/
			function  checkYZM(){
				
				
				//获得自己输入的验证码
				
				var  yzm=document.getElementById("yzm").value;
				
				//获得span标签
				var  span =document.getElementById("yzm2_span");
				
				if(ran==yzm){
					
					span.style.color="green";
					span.innerText="验证码正确";
					
					return true;
					
				}else {
					
					span.style.color="red";
					span.innerText="验证码不正确";
					
					return false;
				}
				
				
			}
			
			/*******是否统一协议**********/
			function  checkAgree(){
				//同意框
				var  check=document.getElementById("check");
				//提交
				var  sub=document.getElementById("sub");
				
				sub.disabled=!check.checked;
				
				
				
			}
			
			function zong(){
				
			  var  flag=checkName()&&checkPwd()&&checkSex()&&checkYZM()&&checkAgree()&&checkEmail();
				
				
		     return flag;		
			}
			
			/*
			 
			 * 
			 * 正则表达式：
			 *    
			 * 正则表达式是对于数据格式进行一定的规范限制
			 * 
			 * 
			 * ^：开始
			 * [0-9]  [a-z A-Z] :数字  字母
			 * 
			 * {2,4} ：段域 至少是2位  最多是4位
			 * {3}:指定范围就是3位
			 * {2,}:至少是2位
			 *  $:结束
			 * 
			 * \d：[0-9]
			 * 
			 * \w[0-9 a-z A-Z]
			 * 
			 * */
			
		</script>
		
		
	</head>
	<body onload="YZM()">
		<center>
		<h3>注册页面</h3>
		<hr />
		<form action="" method="get" onsubmit="return zong()">
		<table>
			<tr height="35px">
				<td width="150px">用户名：</td>
				<td width="400px">
					<input type="text" name="uname" id="uname" value="" alt="用户名" onblur="checkName()"/>
				    <span id="uname_span">*用户名必须是3-5位的汉字</span>
				</td>
			</tr>
			<tr height="35px">
				<td>密码：</td>
				<td>
					<input type="password" name="pwd" id="pwd" value="" alt="密码" onblur="checkPwd()"/>
					<span id="pwd_span"></span>
					
				</td>
			</tr>
			<tr height="35px">
				<td>手机号：</td>
				<td>
					<input type="text" name="phone" id="phone" value="" alt="手机号" />
					<span id="phone_span"></span>
				</td>
			</tr>
			<tr height="35px">
				<td>邮箱：</td>
				<td>
					<input type="text" name="email" id="email" value="" alt="邮箱" onblur="checkEmail()" />
				    <span id="email_span"></span>
				</td>
			</tr>
			<tr height="35px">
				<td>性别：</td>
				<td>
					男：<input type="radio" name="sex" id="" value="1"  onclick="checkSex()"/>
					女：<input type="radio" name="sex" id="" value="0" onclick="checkSex()"/>
					
					<span id="sex_span">
						
					</span>
				</td>
			</tr>
			<tr height="35px">
				<td>爱好：</td>
				<td>
					<input type="checkbox" name="fav" id="" value="1" />唱歌
					<input type="checkbox" name="fav" id="" value="2" />睡觉
					<input type="checkbox" name="fav" id="" value="3"  />LOL<br />
					<input type="checkbox" name="fav" id="" value="4"  />旅游
					<input type="checkbox" name="fav" id="" value="5" />高尔夫
					<input type="checkbox" name="fav" id="" value="6" />篮球
					
				</td>
			</tr>
			<tr height="35px">
				<td>籍贯：</td>
				<td>
					<select name="adress" id="sel" onchange="checkAdress()">
						<option value="0">--请选择--</option>
						<option value="1">河南</option>
						<option value="2">湖南</option>
						<option value="3">海南</option>
						<option value="4">云南</option>
					</select>
					
					<span id="sel_span"></span>
				</td>
			</tr>
			
			<tr height="35px">
				<td>验证码</td>
				<td>
					<input type="number" name="" id="yzm" value="" onblur="checkYZM()"/>
					<span id="yzm_span"></span>
					<span id="yzm2_span"></span>
				</td>
			</tr>
			
			<tr height="35px">
				<td>个人介绍：</td>
				<td>
					<textarea name="intro" rows="8" cols="30"></textarea>
				</td>
			</tr>
			
			<tr height="35px">
				<td colspan="2" align="center">
					<input type="checkbox" name="" id="check" value="" onclick="checkAgree()">是否同一本公司协议
				</td>
			</tr>
			<tr height="35px">
				<td colspan="2" align="center">
					<input type="submit" id="sub" value="注册" disabled="true"/>
				</td>
			</tr>
		</table>
		</form>
		</center>
		
		
	</body>
</html>

效果：

 
赵广陆
关注
  • 1
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
JS正则表达式验证数字
xueshandugu的专栏
04-29 443
来源：      function validate(){        var reg = new RegExp("^[0-9]*$");        var obj = document.getElementById("name");     if(!reg.test(obj.value)){         alert("请输入数字!");     }     if(
浮点数正则表达式_正则表达式的邮箱，手机号，身份证号，密码
weixin_39636079的博客
11-29 719
一、校验数字的表达式数字：^[0-9]*$n位的数字：^d{n}$至少n位的数字：^d{n,}$m-n位的数字：^d{m,n}$零和非零开头的数字：^(0|[1-9][0-9]*)$非零开头的最多带两位小数的数字：^([1-9][0-9]*)+(.[0-9]{1,2})?$带1-2位小数的正数或负数：^(-)?d+(.d{1,2})$正数、负数、和小数：^(-|+)?d+(.d+)?$有两位小数的...
页面输入框js正则验证输入值为数字，且只保留小数点后四位
jason_lyp的博客
08-29 4531
Document function clearNoNum(obj){ //先把非数字的都替换掉，除了数字和. obj.value = obj.value.replace(/[^\d.]/g,""); //保证只有出现一个.而没有多个. obj.value = obj.value.replace(/\.{2,}/g,"."); //必须保
js4位数验证码的正则
高先生的猫
03-23 3164
if(!(/^\d{4}$/.test(this.user_code))){ //error } else{ }
js 四位数字字母混合验证码
Cupid
05-09 491
四位数字字母混合验证码(数字+大写字母+小写字母) 数字可以随机，字母配合ASCII码转换 // min-max范围内随机数 function random(min,max){ //判断min和max的大小 if(min > max){ [min,max]=[max,min] } return Math.floor(Math.random() * (...
JavaScript通过正则表达式实现表单验证电话号码
12-01
总的来说，通过理解正则表达式的工作原理以及如何在JavaScript中使用它们，我们可以创建强大的表单验证功能，确保用户输入的电话号码符合预期的格式。对于更复杂的应用场景，可能需要结合其他验证库或服务来进一步...
js正则表达式校验数字、email、身份证号等
02-09
js正则表达式校验数字、email、身份证号等
js正则表达式校验指定字符串的方法
12-01
最新一个小表单验证需求：“只能输入汉字，并且必须包含“支行”，“分行”，“银行”，“信用社“”字样，需用正则表达式校验 故写出了如下的表达式 var patt1=new RegExp(/^[\u0391-\uFFE5]*(([\u652f]{1}[\u884c...
jQuery实现验证表单密码一致性及正则表达式验证邮箱、手机号的方法
10-18
主要介绍了jQuery实现验证表单密码一致性及正则表达式验证邮箱、手机号的方法,涉及jQuery表单元素获取及正则验证相关操作技巧,需要的朋友可以参考下
JS表单数据验证的正则表达式(常用)
10-20
主要介绍了JS表单数据验证的正则表达式,这种方法比较常用，以及使用正则表达式验证表单的方法，本文给大家介绍非常详细，需要的的朋友参考下
js 验证输入框中的验证码只能输入4位
LYBWWP
04-27 5003
function checkStrLong() {             var vstr = document.getElementById("txtYZ").value;             if (vstr.length >= 5) {                 vstr = vstr.substr(0, 4);                 document.getE
正则：文本框只能输入数字，最多4位小数
ningyb
06-21 7763
正则：文本框只能输入数字，最多4位小数 function _v(str){ var v4 = /^[+-]?\d+\.\d{0,4}$/i; return v4.test(str); } document.writeln("1.1111:"+_v("1.1111"));//true document.writeln(""); document.writeln("1.111:"+
生成四位不重复的验证码。
nowchange的博客
06-13 1148
var block = document.getElementById(); var link = document.getElementById(); function queryCode () { var codaArea = 'qwertyuiopasdfghjklzxcvbnm' + 'QWERTYUIOPASDFGHJK...
小韦老师@神犇营-my0050-判断四位数
小韦同学的博客
06-09 868
小韦老师@神犇营-my0050-判断四位数 题目： 描述 输入一个正整数 x（0 ≤ x ≤ 10^8），判断这个正整数是否为四位数，若是，请输出“YES”，若否，则输出“NO”。 例如： 1234 YES 123 NO 输入 输入一个正整数 x（0 ≤ x ≤ 10^8）。 输出 根据判断情况输出“YES”或者“NO”。 输入样例1 1234 输出样例1 YES 输入样例2 123 输出样例2...
42-JavaScript-正则表达式
吴钦飞
01-05 1346
1. 引入  1) 在一个字符串中找到连续的四个数字  2) 验证 邮箱 身份证号 等 格式是否合法  RegExp对象(Regular Expression), 是对字符串执行模式匹配的强大工具.  1.2 基本概念     指一个用来描述或匹配一系列符合某个语法规则的字符串的单个字符串.     在很多文本编辑器或其他工具里,     正则表达式通常被用来检索
JavaScript 正则表达式实用实战
chengzhang_jian的博客
09-10 1080
总结了一些经常会用到的正则表达式
form表单校验_字符串、中文、数字
qq_45420916的博客
03-01 2238
// 校验是否为数字 checkNumber: function (val) { // if (!val) return false; let reg1 = /^[\u4e00-\u9fa5]{0,}$/g; // console.log('reg1.test(val)', reg1.test(val)); if (reg1.test(val)) return false; let reg = /[^\d]/g; // console.log('reg.test(val)', r
正则表达式
Christian的博客
09-05 337
目录 字符含义： []的用法： 一、校验数字的表达式 二、校验字符的表达式 三、特殊需求表达式 四、匹配多个正则表达式 五、匹配任意单个字符（.） 六、从字符串开始或者结束 七、限定范围和否定 基本语法： 界定符： 原子： 量词： 边界控制： 模式单元： 字符含义： []的用法： 1.[abcd]：满足abcd中的任意一个都可以 2.[0-9]：满...
js验证4位数字
weixin_30922589的博客
03-02 2802
varreg=/^\d{4}$/; varstr="0001"; reg.test(str); 转载于:https://www.cnblogs.com/libin6505/p/8492139.html
用JavaScript和正则表达式写五个表单的校验
最新发布
04-09
好的，我可以为您提供一些用 JavaScript 和正则表达式写五个表单的校验的代码示例： 1. 校验邮箱： ``` function validateEmail(email) { var regex = /^\w+@[a-zA-Z_]+?\.[a-zA-Z]{2,3}$/; // 邮箱正则表达式 return regex.test(email); } ``` 2. 校验手机号码（中国大陆）： ``` function validatePhone(phone) { var regex = /^1[3456789]\d{9}$/; // 手机号码正则表达式 return regex.test(phone); } ``` 3. 校验身份证号码（中国大陆）： ``` function validateIdCard(idCard) { var regex = /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/; // 身份证号码正则表达式 return regex.test(idCard); } ``` 4. 校验密码（至少8位，包含大小写字母和数字）： ``` function validatePassword(password) { var regex = /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d).{8,}$/; // 密码正则表达式 return regex.test(password); } ``` 5. 校验用户名（只能包含字母、数字、下划线，且长度在6-20位之间）： ``` function validateUsername(username) { var regex = /^[a-zA-Z0-9_]{6,20}$/; // 用户名正则表达式 return regex.test(username); } ``` 希望这能帮助到您。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

赵广陆

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值