文档章节

JavaScript 表单验证

phpweishunlong
 phpweishunlong
发布于 2017/05/14 23:43
字数 446
阅读 16
收藏 0
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表单验证</title>
</head>
<body>


<!-- 

	JS对表单验证必须有,这是可以提高用户体验的。

	但是仅仅有JS验证,不行!不安全,因为JS可以被SB的用户禁用。

	所以PHP的正则验证必须有!
 -->

<form name="regForm" action="http://www.baidu.com" method="post">
	
	<!-- data-value 自定义的属性  -->
	用户名:<input type="text" data-value="合法用户名"  name="username" /><br/>

	密码:<input type="text" data-value="强悍的密码" name="userpass" / ><br/>

	<button>注册</button>
	<span id="tip"></span>
</form>

<script>

	//在提交表单时,需要进行数据验证,所以需要给表单绑定onsubmit事件
		//如果数据达到你的要求的,你就应该提交表单
	var myForm = document.regForm;

	var tip = document.getElementById('tip');


	myForm.onsubmit = function () {


		//用户名要求:只能是字母、数字、下划线,长度4-20

		var uname = myForm.username.value;
		var upass = myForm.userpass.value;


		//js中执行正则的方法: str.match(pattern)方法,当匹配失败返回null,成功返回匹配到内容
		// pattern.test(str);//匹配成功成功true,失败false

		// var pattern = /^\w{4,20}$/;//js的正则不能加引号
		// var res = uname.match(pattern);

		var res = RegCheck(uname, /^\w{4,20}$/);

		if (res === null) {

		
			// alert(1);
			return showTip('只能是字母、数字、下划线,长度4-20');
		}

		if (upass.length < 6) {

	
			return showTip('下面短了');
		}

		//密码必须包含大小字母、特殊符号( !@#$%^&* ),长度6位以上
		
		// 思路:先判断有没有大写,再判断有没有特殊符号
		/*var pattern = /[A-Z]+/;
		var res = upass.match(pattern);*/

		var res = RegCheck(upass, /[A-Z]+/);
		// console.log(res);return false;

		if (res === null) {


			return showTip('密码必须包含大写');
		}


	/*	var pattern = /[!@#\$%\^&\*]+/;
		var res = upass.match(pattern);*/

		var res = RegCheck(upass, /[!@#\$%\^&\*]+/);

		// console.log(res);return false;

		if (res === null) {

			return showTip('密码必须包含特殊符号');
		}

		//专门用来显示错误提示
		function showTip(info){

			// alert(2);
			tip.innerHTML = info;

			return false;
		}

		//进行正则判断
		function RegCheck(str, pattern){

			
			var res = str.match(pattern);

			return res;
		}
		
		return true;
	}
	

</script>

</body>
</html>

© 著作权归作者所有

共有 人打赏支持
phpweishunlong
粉丝 1
博文 64
码字总数 26288
作品 0
广州
程序员
jQuery验证框架(一) 可选项 (jQuery validation)

jQuery验证框架 Html代码 <script type="text/javascript" src=js/jquery-1.3.2.min.js></script> <script type="text/javascript" src=js/jquery.validate.pack.js></script> <script type......

打杂
2010/11/16
0
5
jQuery验证框架(五)验证器 (jQuery validation)

jQuery验证框架 五、验证器( Validator ) validate方法返回的验证器对象( Validator Object) 有一些公用的方法。你可以用来触发验证程序或改变表单(form)的内容。验证器对象有更多的方法,不...

打杂
2010/11/16
0
1
jQuery验证框架(六)内置验证方法 (jQuery validation)

jQuery验证框架 六、框架内建的验证方法( List of built-in Validation methods ) [1] required( ) 返回:Boolean 说明:让表单元素必须填写(选择)。 如果表单元素为空(text input)或未选择...

打杂
2010/11/16
0
1
jQuery验证框架(二)插件方法 (jQuery validation)

jQuery验证框架 二、插件方法( Plugin methods ) [1] validate( [options] ) 返回:Validator 说明:见第一部分 [2] valid() 返回:Boolean 说明:检查表单是否已通过验证。 Js代码 $("#myfo...

打杂
2010/11/16
0
0
40 个轻量级 JavaScript 库

流行的 JavaScript 库不胜枚举,jQuery, MooTools, Prototype, Dojo, YUI。这些 JavaScript 库功能丰富,加上它们的插件,几乎能胜任任何工作,然而这是有代价的,这些库往往导致你的网页尺寸...

晨曦之光
2012/03/09
0
0

没有更多内容

加载失败,请刷新页面

加载更多

arts-week10

Algorithm 905. Sort Array By Parity - LeetCode Review Who’s Afraid of the Big Bad Preloader? 一文读懂前端缓存 一个网络请求3个步骤:请求,处理,响应,而前端缓存主要在请求处响应这两步...

yysue
今天
4
0
00.编译OpenJDK-8u40的整个过程

前言 历经2天的折腾总算把OpenJDK给编译成功了,要说为啥搞这个,还得从面试说起,最近出去面试经常被问到JVM的相关东西,总感觉自己以前学的太浅薄,所以回来就打算深入学习,目标把《深入理...

凌晨一点
今天
5
0
python: 一些关于元组的碎碎念

初始化元组的时候,尤其是元组里面只有一个元素的时候,会出现一些很蛋疼的情况: def checkContentAndType(obj): print(obj) print(type(obj))if __name__=="__main__": tu...

Oh_really
昨天
6
2
jvm crash分析工具

介绍一款非常好用的jvm crash分析工具,当jvm挂掉时,会产生hs_err_pid.log。里面记录了jvm当时的运行状态以及错误信息,但是内容量比较庞大,不好分析。所以我们要借助工具来帮我们。 Cras...

xpbob
昨天
167
0
Qt编写自定义控件属性设计器

以前做.NET开发中,.NET直接就集成了属性设计器,VS不愧是宇宙第一IDE,你能够想到的都给你封装好了,用起来不要太爽!因为项目需要自从全面转Qt开发已经6年有余,在工业控制领域,有一些应用...

飞扬青云
昨天
6
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部