表单验证功能实现

最新推荐文章于 2024-05-14 16:11:02 发布

幸福的小木鱼

最新推荐文章于 2024-05-14 16:11:02 发布

阅读量383

点赞数

分类专栏： JavaScript 文章标签： input 正则表达式 email function mobile javascript

本文链接：https://blog.csdn.net/lin_lujian/article/details/6914217

版权

JavaScript 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>验证表单数据</title>
 <style>
 body,td{font:normal 12px Verdana;color:#333333}
 input,textarea,select,td{font:normal 12px Verdana;color:#333333;border:1px solid #999999;background:#ffffff}
 table{border-collapse:collapse;}
 td{padding:3px}
 input{height:20;}
 textarea{width:80%;height:50px;overfmin:auto;}
 form{display:inline}
 </style>
 <script language="javascript">
 	
 	function stopMouse()
	{
		event.returnValue=false;
	}
	document.οncοntextmenu=stopMouse;
 	function check()
	{
		var reg=/^[\u4E00-\u9FA5]{1,}$/;
		if(reg.test(document.all.chinaName.value)==false)
		{
			alert('真实姓名必须为中文!');
			document.all.chinaName.focus();
			return false;
		}
		reg=/^[a-zA-Z]+$/;
		if(reg.test(document.all.englishName.value)==false)
		{
			alert('英文名不合法!');
			document.all.englishName.focus();
			return false;
		}
		reg=/^\w{6,}$/;
		if(reg.test(document.all.password1.value)==false)
		{
			alert('密码不合法');
			document.all.password1.focus();
			return false;
		}
		if(document.all.password2.value!=document.all.password1.value)
		{
			alert('输入密码不一致');
			document.all.password2.focus();
			return false;
		}
		reg=/^\w+(\.\w+)*@\w+(\.\w+)+$/;
		if(reg.test(document.all.email.value)==false)
		{
			alert('邮箱不合法');
			return false;
		}
		reg=/^[1-9]\d{4,9}$/;
		if(reg.test(document.all.qq.value)==false)
		{
			alert('QQ号码无效!');
			return false;
		}
		reg=/^\d{15}|(\d{17}[a-zA-Z0-9])$/;
		if(reg.test(document.all.cardId.value)==false)
		{
			alert('身份证号码无效!');
			return false;
		}
		reg=/^([2-9]\d)|100$/;
		if(reg.test(document.all.age.value)==false)
		{
			alert('年龄不合法!');
			return false;
		}
		reg=/^(\d{3,4}-)?\d{7,8}$/;
		if(reg.test(document.all.phone.value)==false)
		{
			alert('座机号码无效!');
			return false;
		}
		reg=/^1[358]\d{9}$/;
		if(reg.test(document.all.mobile.value)==false)
		{
			alert('手机号码无效!');
			return false;
		}
		reg=/^\d+\.\d{1,2}$/;
		if(reg.test(document.all.salary.value)==false)
		{
			alert('工资无效!');
			return false;
		}
		reg=/^\d{6}$/;
		if(reg.test(document.all.zip.value)==false)
		{
			alert('邮政编号无效!');
			return false;
		}
		reg=/^.+$/;
		if(reg.test(document.all.address.value)==false)
		{
			alert('家庭住址不能为空!');
			return false;
		}
		
		return true;
	}
 </script>
</head>

<body>

 <table width="665" align="center">
 	<caption align="center">使用正则表达式验证表单数据</caption>
  <form name="form1" onSubmit="return check();">
    <tr>
   <td width="124">真实姓名：</td>
   <td width="368"><input name="chinaName" id="chinaName" dataType="Chinese">
     *必须为中文</td>
  </tr>
  <tr>
   <td>英文名：</td><td><input name="englishName" id="englishName">
   *必须由英文大小写字母组成</td>
  </tr>
  <tr>
   <td>密码：</td><td><input name="password1" type="password" id="password1">
     *由大小写字母、数字、下划线构成的6位以上的 密码</td>
  </tr>
  <tr>
   <td>重复：</td><td><input name="password2" type="password" id="password2">
     *第二次输入的密码和第一次输入的一致</td>
  </tr>
  <tr>
   <td>邮箱：</td><td><input name="email" id="email" >
     *必须按照email的规范</td>
  </tr>
  <tr>
   <td>QQ：</td><td><input name="qq" id="qq">
     *由数字组成的5-9位数字</td>
  </tr>
    <tr>
   <td>身份证：</td><td><input name="cardId" id="cardId">
     *有15位和18位两种</td>
  </tr>
  <tr>
   <td>年龄：</td><td><input name="age" id="age">
     *为整型数字，并且是20-100之间</td>
  </tr>
   <tr>
   <td>电话：</td><td><input name="phone" id="phone">
     *座机号码</td>
  </tr>
   <tr>
   <td>手机：</td><td><input name="mobile" id="mobile">
     *手机号码</td>
  </tr>
     <tr>
   <td>月工资：</td><td><input name="salary" id="salary">
     *为带小数点数</td>
  </tr>
   <tr>
   <td>邮政编码：</td><td><input name="zip" id="zip">
     *由数字组成的6位数字</td>
  </tr>
  <tr>
   <td>家庭住址：</td><td><input name="address" id="address">
     *不能为空</td>
  </tr>
  <tr>
   <td colspan="2" align="center">
   	<input type="submit" value="提交验证" />
	<input type="reset" value="取    消" />   </td>
  </tr>
  </form>
 </table>
</body>
</html>

幸福的小木鱼

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
表单验证功能实现

验证表单数据 body,td{font:normal 12px Verdana;color:#333333} input,textarea,select,td{font:normal 12px Verdana;color:#333333;border:1px solid #999999;background:#ffffff} table{border-collapse:colla
复制链接

扫一扫