文档章节

JavaScript 表单验证

phpweishunlong
 phpweishunlong
发布于 2017/05/14 23:43
字数 446
阅读 17
收藏 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

没有更多内容

加载失败,请刷新页面

加载更多

js算法总结

数列求和 等差数列求和 function sum(a0,d,n){//a0->首项,d->公差,n->项数//(首项+末项)*项数/2return (a1+(a1+d*n))*n/2;} 等比数列求和 function sum(a0,q,n){//a0->首项,q->公......

祖达
45分钟前
2
0
小白?转型?毕业生?外行学习快速入行大数据开发指南

这篇文章中,本文将针对三种不同的、想要进入数据科学领域的人群,给出自己的经验,帮助他们迅速有效入行。 虽然没有适合每个人的万能解决方案,但这三类建议值得想转行的你一看。 第1类:新...

董黎明
52分钟前
1
0
好文 | MySQL 索引B+树原理,以及建索引的几大原则

MySQL事实上使用不同的存储引擎也是有很大区别的,下面猿友们可以了解一下。 一、存储引擎的比较 注:上面提到的B树索引并没有指出是B-Tree和B+Tree索引,但是B-树和B+树的定义是有区别的。 ...

Java爬坑之路
55分钟前
2
0
mysql group by 和 Order By 执行顺序

1.在写统计的时候,我们会用到统计首单,这样里面设计到排序。写子查询的方式当然可以实现, 但是我们有时候,需要创建视图,视图不支持带子查询的。 加了排序后会返回,排序后的哪个第一条数...

kuchawyz
今天
2
0
Spring Boot 2.X 如何添加拦截器?

最近使用SpringBoot2.X搭建了一个项目,大部分接口都需要做登录校验,所以打算使用注解+拦截器来实现,在此记录下实现过程。 一、实现原理 1. 自定义一个注解@NeedLogin,如果接口需要进行登...

花漾年华
今天
1
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部