前端表单验证技巧-优快云博客

1.长度限制

<!DOCTYPE html>
<html>
	<head>
		<title>js验证</title>
		<script language="javascript">
		function test()
		{
		if(document.a.b.value.length>50)
		{
		alert("不能超过50个字符！");
		document.a.b.focus();
		return false;
		}
		}
		</script>
	</head>
	<body>
		<form name=a onsubmit="return test()">
		<textarea name="b" cols="40" rows="6" placeholder="不能超过50个字符！"></textarea>
		<br />
		<input type="submit" name="Submit" value="check">
		</form>
	</body>
</html>

2、只能是汉字

<!DOCTYPE html>
<html>
	<head>
		<title>js验证</title>
		<script language="javascript">
		function isChinese(obj){
		var reg=/^[\u0391-\uFFE5]+$/;
		if(obj!=""&&!reg.test(obj)){
		alert('必须输入中文！');
		return false;
		}
		}

		</script>
	</head>
	<body>
		<input type="text" onblur="isChinese(this.value)" placeholder="请输入中文！" />
	</body>
</html>

3、只能是字母

<!DOCTYPE html>
	<html>
		<head>
			<title>js验证</title>
			<script type="text/javascript">
			//验证只能是字母
			function checkZm(zm){
			var zmReg=/^[a-zA-Z]*$/;
			if(zm!=""&&!zmReg.test(zm)){
			alert("只能是英文字母！");
			return false;
			}
			}
			</script>
		</head>
		<body>
			<input type="text" onblur="checkZm(this.value)" placeholder="只能是英文字母！" />
		</body>
	</html>

4、只能输入数字

<!DOCTYPE html>
	<html>
		<head>
			<title>js验证</title>
			<script language=javascript>
			//验证只能为数字
			function checkNumber(obj){
			var reg = /^[0-9]+$/;
			if(obj!=""&&!reg.test(obj)){
			alert('只能输入数字！');
			return false;
			}
			}
			</script>
		</head>
		<body>
			<input type="text" onblur="checkNumber(this.value)" placeholder="只能输入数字！" />
		</body>
	</html>

5、只能是英文数字和数字

<!DOCTYPE html>
<html> 
	<head>
		<title></title>
			<script type="text/javascript">
				//验证只能是字母和数字
				function checkZmOrNum(zmnum){
				var zmnumReg=/^[0-9a-zA-Z]*$/;
				if(zmnum!=""&&!zmnumReg.test(zmnum)){
				alert("只能输入是字母或者数字,请重新输入");
				return false;
				}
				}
			</script>
	<body>
		<input type="text" onblur="checkZmOrNum(this.value)" placeholder="只能输入是字母或者数字,请重新输入！" />
	</body>
</html>

6、检验时间大小（与当前时间比较）

<!DOCTYPE html>
<html> 
	<head>
		<title></title>
		<script type="text/javascript">
		//检验时间大小(与当前时间比较)
		function checkDate(obj){
		var obj_value=obj.replace(/-/g,"/");//替换字符，变成标准格式(检验格式为：'2009-12-10')
		// var obj_value=obj.replace("-","/");//替换字符，变成标准格式(检验格式为：'2010-12-10 11:12')
		var date1=new Date(Date.parse(obj_value));
		var date2=new Date();//取今天的日期
		if(date1>date2){
		alert("不能大于当前时间！");
		return false;
		}
		}
		</script>
	</head>
	<body>
	<input type="text" onblur="checkDate(this.value)" placeholder="不能大于当前时间！" />
	</body>
</html>

7、屏蔽关键字

<!DOCTYPE html>
<html> 
	<head>
		<title></title>
		<script type="text/javascript">
		function test(obj) {
		if((obj.indexOf ("***") == 0)||(obj.indexOf ("****") == 0)){
		alert("屏蔽关键字(这里屏蔽***和****)！");
		return false;}
		}
		</script>
	</head>
	<body>
	<input type="text" onblur="test(this.value)" placeholder="屏蔽关键字(这里屏蔽***和****)！" />
	</body>
</html>

8、表单项不能为空

<!DOCTYPE html>
<html> 
	<head>
		<title></title>
		<script language="javascript">
			function CheckForm(obj)
			{
			if (obj.length == 0) {
			alert("姓名不能为空!");
			return false;
			}
			return true;
			alert("姓名不能为空!");
			}
		</script>
	<body>
	<input type="text" onblur="CheckFor(this.value)" placeholder="姓名不能为空！" />
	</body>
</html>

9、验证手机号

<!DOCTYPE html>
<html> 
	<head>
		<title></title>
		<script type="text/javascript">
			function validatemobile(mobile)
			{
			if(mobile.length==0)
			{
			alert('手机号码不能为空！');
			return false;
			}
			if(mobile.length!=11)
			{
			alert('请输入有效的手机号码，需是11位！');
			return false;
			}

			var myreg = /^(((13[0-9]{1})|(15[0-9]{1})|(18[0-9]{1}))+\d{8})$/;
			if(!myreg.test(mobile))
			{
			alert('请输入有效的手机号码！');
			return false;
			}
			}
		</script>
	</head>
	<body>
	<input type="text" onblur="validatemobile(this.value)" placeholder="验证手机号！" />
	</body>
</html>

10、邮箱验证

<!DOCTYPE html>
<html> 
	<head>
		<title></title>
		<script type="text/javascript">
		     //检查用户是否已填写表单中的必填（或必选）项目。假如必填或必选项为空，那么警告框会弹出，
		       //并且函数的返回值为 false，否则函数的返回值则为 true（意味着数据没有问题）
			function validate_required(field,alerttxt)
			{
			with (field)
			  {
			  if (value==null||value=="")
				{alert(alerttxt);return false}
			  else {return true}
			  }
			}

			//输入的数据必须包含 @ 符号和点号(.)。同时，@ 不可以是邮件地址的首字符，并且 @ 之后需有至少一个点号
			function validate_email(field,alerttxt)
			{
			with (field)
			{
			apos=value.indexOf("@")
			dotpos=value.lastIndexOf(".")
			if (apos<1||dotpos-apos<2) 
			  {alert(alerttxt);return false}
			else {return true}
			}
			}

			function validate_form(thisform)
			{
			with (thisform)
			  {
			  if (validate_required(email,"Email must be filled out!")==false)
				{email.focus();return false}
			  if (validate_email(email,"Not a valid e-mail address!")==false)
				{email.focus();return false}
			  }
			}
		</script>
	<body>
		<form action="submitpage.htm"onsubmit="return validate_form(this);" method="post">
		Email: <input type="text" name="email" size="30">
		<input type="submit" value="Submit"> 
		</form>
	</body>
</html>