文档章节

JavaScript 表单验证

phpweishunlong
 phpweishunlong
发布于 2017/05/14 23:43
字数 446
阅读 16
收藏 0
点赞 0
评论 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
码字总数 26259
作品 0
广州
程序员
被遗忘的CSS和HTML(二)

前言 先前写了一篇《被遗忘的CSS和HTML(一)》,后来因为各种事情,懒得写。最近把文章分享到掘金收获了不少点赞和鼓励,决定就再写点,希望从另一个角度去看一些问题的解决方法,还是那句话...

VeeQun ⋅ 06/05 ⋅ 0

Web Hacking 101 中文版 十、跨站脚本攻击(一)

十、跨站脚本攻击 作者:Peter Yaworski 译者:飞龙 协议:CC BY-NC-SA 4.0 描述 跨站脚本,或者 XSS,涉及到站定包含非预期的 JavaScript 脚本代码,它随后传给用于,用户在浏览器中执行了该...

apachecn_飞龙 ⋅ 2017/03/27 ⋅ 0

JavaWeb05-HTML篇笔记(一)

1.1上次课内容回顾: JQuery: JQuery的概述:是一个轻量级的JavaScript的类库.对JS进行封装. 常见的JS的框架: JQuery的使用: JQuery的选择器:(*) JQuery实现效果: JQuery样式操作: JQuer...

我是小谷粒 ⋅ 05/10 ⋅ 0

强大的JQuery-实现表单校验

里面的js文件自行去官网下载,这个只贴HTML代码,希望起到举一反三的作用 ;

chengfei_liu ⋅ 05/24 ⋅ 0

JavaScript入门 Day1

课程介绍 编程语言介绍(了解) JavaScript简介(了解) JavaScript入门 运算符(掌握) JavaScript基本语法(掌握) 位运算符(了解) 1.编程语言 1.1.什么是编程语言 编程语言(programmi...

何老师编程 ⋅ 06/02 ⋅ 0

code-rhythm:写了个vscode扩展,让代码更有快感

项目地址 Github - onvno/code-rhythm 原因 写代码本身是件快乐的事情,但开发中总有各种烦恼。 有时候一个很简单的方法,因为不确定传参的形式,不确定返回形式,不确定具体用法,就得翻墙,...

onvno_ ⋅ 06/07 ⋅ 0

按钮配置之自定义按钮使用(二)— JEPLUS软件快速开发平台

JEPLUS按钮配置之自定义按钮使用(二) 之前的一篇笔记讲的是在列表上添加自定义按钮来完成自己的业务需求,今天这篇笔记就主要讲一下如何在表单上添加自定义按钮来实现自己的业务需求。 一、...

JEPLUS ⋅ 昨天 ⋅ 0

django 1.8 官方文档翻译:5-2-2 表单素材 ( Media 类)

表单素材 ( 类) 渲染有吸引力的、易于使用的web表单不仅仅需要HTML – 同时也需要CSS样式表,并且,如果你打算使用奇妙的web2.0组件,你也需要在每个页面包含一些JavaScript。任何提供的页面...

apachecn_飞龙 ⋅ 2015/09/19 ⋅ 0

js策略模式《JavaScript设计模式与开发实践》阅读笔记

策略模式的定义是:定义一系列的算法,把它们一个个封装起来,并且是它们可以相互替换。 策略模式可以避免代码中的多重判断条件。 策略模式很好的体现了开放-封闭原则,将一个个算法(解决方...

RoyLuo ⋅ 05/19 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

Day 17 vim简介与一般模式介绍

vim简介 vi和Vim的最大区别就是编辑一个文件时vi不会显示颜色,而Vim会显示颜色。显示颜色更便于用户编辑,凄然功能没有太大的区别 使用 yum install -y vim-enhanced 安装 vim的三种常用模式...

杉下 ⋅ 53分钟前 ⋅ 0

【每天一个JQuery特效】根据可见状态确定是否显示或隐藏元素(3)

效果图示: 主要代码: <!DOCTYPE html><html><head><meta charset="UTF-8"><title>根据可见状态确定 是否显示或隐藏元素</title><script src="js/jquery-3.3.1.min.js" ty......

Rhymo-Wu ⋅ 今天 ⋅ 0

OSChina 周四乱弹 —— 初中我身体就已经垮了,不知道为什么

Osc乱弹歌单(2018)请戳(这里) 【今日歌曲】 @加油东溪少年 :下完这场雨 后弦 《下完这场雨》- 后弦 手机党少年们想听歌,请使劲儿戳(这里) @马丁的代码 :买了日本 日本果然赢了 翻了...

小小编辑 ⋅ 今天 ⋅ 12

浅谈springboot Web模式下的线程安全问题

我们在@RestController下,一般都是@AutoWired一些Service,由于这些Service都是单例,所以并不存在线程安全问题。 由于Controller本身是单例模式 (非线程安全的), 这意味着每个request过来,...

算法之名 ⋅ 今天 ⋅ 0

知乎Java数据结构

作者:匿名用户 链接:https://www.zhihu.com/question/35947829/answer/66113038 来源:知乎 著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。 感觉知乎上嘲讽题主简...

颖伙虫 ⋅ 今天 ⋅ 0

Confluence 6 恢复一个站点有关使用站点导出为备份的说明

推荐使用生产备份策略。我们推荐你针对你的生产环境中使用的 Confluence 参考 Production Backup Strategy 页面中的内容进行备份和恢复(这个需要你备份你的数据库和 home 目录)。XML 导出备...

honeymose ⋅ 今天 ⋅ 0

JavaScript零基础入门——(九)JavaScript的函数

JavaScript零基础入门——(九)JavaScript的函数 欢迎回到我们的JavaScript零基础入门,上一节课我们了解了有关JS中数组的相关知识点,不知道大家有没有自己去敲一敲,消化一下?这一节课,...

JandenMa ⋅ 今天 ⋅ 0

火狐浏览器各版本下载及插件httprequest

各版本下载地址:http://ftp.mozilla.org/pub/mozilla.org//firefox/releases/ httprequest插件截至57版本可用

xiaoge2016 ⋅ 今天 ⋅ 0

Docker系列教程28-实战:使用Docker Compose运行ELK

原文:http://www.itmuch.com/docker/28-docker-compose-in-action-elk/,转载请说明出处。 ElasticSearch【存储】 Logtash【日志聚合器】 Kibana【界面】 答案: version: '2'services: ...

周立_ITMuch ⋅ 今天 ⋅ 0

使用快嘉sdkg极速搭建接口模拟系统

在具体项目研发过程中,一旦前后端双方约定好接口,前端和app同事就会希望后台同事可以尽快提供可供对接的接口方便调试,而对后台同事来说定好接口还仅是个开始、设计流程,实现业务逻辑,编...

fastjrun ⋅ 今天 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部