文档章节

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
10个强大的Javascript表单验证插件推荐

创建一个JavaScript表单验证插件,可以说是一个繁琐的过程,涉及到初期设计、开发与测试等等环节。实际上一个优秀的程序员不仅是技术高手,也应该是善假于外物的。本文介绍了10个不错的JavaS...

leon_rock
2012/04/20
41.4K
4
jQuery验证框架(六)内置验证方法 (jQuery validation)

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

打杂
2010/11/16
0
1
有哪些常见的验证表单方式,他们各自的优缺点是什么?

大家好,我是IT修真院北京总院第24期的学员,一枚正直纯洁善良的web程序员 今天给大家分享一下,修真院官网JS任务10,深度思考中的知识点——谈谈以前端角度出发做好SEO需要考虑什么? 1.背景...

我是一只北极熊啊
2017/11/21
0
0

没有更多内容

加载失败,请刷新页面

加载更多

jquery通过id显示隐藏

var $div3 = $('#div3'); 显示 $div3.show(); 隐藏 $div3.hide();

yan_liu
今天
3
0
《乱世佳人》读书笔记及相关感悟3900字

《乱世佳人》读书笔记及相关感悟3900字: 之前一直听「荔枝」,后来不知怎的转向了「喜马拉雅」,一听就是三年。上班的时候听房产,买房了以后听装修,兴之所至时听旅行,分手后听亲密关系,...

原创小博客
今天
3
0
大数据教程(9.6)map端join实现

上一篇文章讲了mapreduce配合实现join,本节博主将讲述在map端的join实现; 一、需求 实现两个“表”的join操作,其中一个表数据量小,一个表很大,这种场景在实际中非常常见,比如“订单日志...

em_aaron
今天
3
0
cookie与session详解

session与cookie是什么? session与cookie属于一种会话控制技术.常用在身份识别,登录验证,数据传输等.举个例子,就像我们去超市买东西结账的时候,我们要拿出我们的会员卡才会获取优惠.这时...

士兵7
今天
3
0
十万个为什么之为什么大家都说dubbo

Dubbo是什么? 使用背景 dubbo为什么这么流行, 为什么大家都这么喜欢用dubbo; 通过了解分布式开发了解到, 为适应访问量暴增,业务拆分后, 子应用部署在多台服务器上,而多台服务器通过可以通过d...

尾生
今天
4
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部