四.js 正则表达式
一。正则表达式
1.定义：对字符串规则的描述
2.作用：可以检查字符串是否符合规则，可以按规则来截取字符串
3.定义：
a。简单模式：var reg = /hello/;
b.复杂模式：var reg = /^规则$/;
4.具体规则：
元字符：
\d:表示一个数字。[0-9];
\D:表示一个非数字。[^0-9];
\s:表示一个空白字符
\S:表示一个非空白字符
\w:匹配一个字母或者数字或者下划线 [A-Za-z_]
\W:和\w相反
[xyz]:匹配集合中任意一个字符
匹配次数元字符：
*:表示任意次数
+：1次或者多次 {1,}
？:0次或者1次
{n}:表示匹配n次
{n,m}:表示匹配大于等于n，小于等于m次
5.检验字符串是否符合规则：
reg.test("字符串") 返回boolean类型
练习：
生日：1999-11-11
g.身份证号码：18位，最后一位可以是数字或者X
h.用户名：用户名必须包含数字，字母，下划线。首字母大写，长度不能小于8位
f.日期：格式必须满足1999-12-31 24:60:60
实例1：
普通方式验证表单数据
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<script type="text/javascript">
/**
* 1.要求所有输入不能为空
* 2.密码长度为固定6位，确认密码和密码必须一致
* 3.电子邮箱必须出现.和@符号，并且.在@符号后面
* 笔记：js的表单验证
* 1.什么是表单验证
* 2.验证的步骤
* 3.关键：如何阻止表单提交
*/
function check() {
var username = document.getElementById("username").value;
var password = document.getElementById("password").value;
var password2 = document.getElementById("password2").value;
var email = document.getElementById("email").value;
if(username==""||username.length>10){
document.getElementById("error_username").innerHTML="用户名不能为空且长度不能大于10";
return false;
}else{
document.getElementById("error_username").innerHTML="";
}
if(password.length!=6){
document.getElementById("error_password").innerHTML="密码不能为空且长度固定为6";
return false;
}else{
document.getElementById("error_password").innerHTML="";
}
if(password!=password2){
document.getElementById("error_password2").innerHTML="确认密码和密码一致";
return false;
}else{
document.getElementById("error_password2").innerHTML="";
}
if(!(email.indexOf("@")>0&&email.indexOf(".")>email.indexOf("@"))){
alert("邮箱格式不正确");
return false;
} return true;
}
</script>
<body>
<div align="center">
<form action="http://www.baidu.com" onsubmit="return check()">
用户名：<input id="username" onblur="check()"><span id="error_username" style="color: red;"></span><br>
密码：<input id="password" type="password" onblur="check()"><span id="error_password" style="color: red;"></span><br>
确认密码：<input id="password2" type="password" onblur="check()"><span id="error_password2" style="color: red;"></span><br>
生日：<input type="date"><br>
电话:<input><br>
电子邮箱:<input id="email" onblur="check()"><span id="error_email" style="color: red;"></span><br>
所在地：<input><br>
<input type="submit" value="注册">
</form>
</div>
</body>
</html>
利用正则表达式验证表单数据及其他绑定事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<script type="text/javascript">
/**
* 1.要求所有输入不能为空
* 2.密码长度为固定6位，确认密码和密码必须一致
* 3.电子邮箱必须出现.和@符号，并且.在@符号后面
* 笔记：js的表单验证
* 1.什么是表单验证
* 2.验证的步骤
* 3.关键：如何阻止表单提交
*/
function checkUsername() {
var username = document.getElementById("username").value;
if(username==""||username.length>10){
document.getElementById("error_username").innerHTML="用户名不能为空且长度不能大于10";
return false;
}else{
document.getElementById("error_username").innerHTML="";
}
return true;
}
function checkPassword() {
var password = document.getElementById("password").value;
if(password.length!=6){
document.getElementById("error_password").innerHTML="密码不能为空且长度固定为6";
return false;
}else{
document.getElementById("error_password").innerHTML="";
return true;
}
}
function checkPassword2() {
var password = document.getElementById("password").value;
var password2 = document.getElementById("password2").value;
if(password!=password2){
document.getElementById("error_password2").innerHTML="确认密码和密码一致";
return false;
}else{
document.getElementById("error_password2").innerHTML="";
return true;
}
}
function checkEmail() {
var email = document.getElementById("email").value;
if(!(email.indexOf("@")>0&&email.indexOf(".")>email.indexOf("@"))){
alert("邮箱格式不正确");
return false;
}else{
return true;
}
}
function checkAll() {
if(checkUsername()&&checkPassword()&&checkPassword2()&&checkEmail()){
return true;
}else{
return false;
}
}
function checkAddr() {
var addr = document.getElementById("addr").value;
//声明正则表达式
var reg = /中国/;
var reg2 = new RegExp("/中国/");
var reg3 = /^[12]\d{3}-([1-9]|[0][1-9]|[1][0-2])$/; /**
* 生日：1999-12-11
g.身份证号码：18位，最后一位可以是数字或者X
h.用户名：用户名必须包含数字，字母，下划线。首字母大写，长度不能小于8位
f.日期：格式必须满足1999-12-31 24:60:60
* @type {boolean}
*/
document.getElementById("error_addr").innerHTML = reg3.test(addr);
}
function showValue(obj) {
alert(obj.value);
}
function readey() {
document.getElementById("username").addEventListener("keyup",function (e) {
alert(e.keyCode);
});
document.getElementById("mydiv").addEventListener("mousemove",function (e) {
document.getElementById("showPoint").innerHTML="x:"+e.x+"y:"+e.y;
});
}
function showDiv() {
document.getElementById("mydiv").style.display="block";
}
</script>
<body onload="readey()">
<div align="center">
<form action="http://www.baidu.com" onsubmit="return checkAll()">
用户名：<input id="username" onblur="checkUsername()"><span id="error_username" style="color: red;"></span><br>
密码：<input id="password" type="password" onblur="checkPassword()"><span id="error_password" style="color: red;"></span><br>
确认密码：<input id="password2" type="password" onblur="checkPassword2()"><span id="error_password2" style="color: red;"></span><br>
生日：<input type="date"><br>
电话:<input><br>
电子邮箱:<input id="email" onblur="checkEmail()"><span id="error_email" style="color: red;"></span><br>
所在地：<input id="addr" onblur="checkAddr()"><span id="error_addr" style="color: red;"></span><br>
年份:<select onchange="showValue(this)">
<option value="1999年">1999</option>
<option>2000</option>
<option>2001</option>
<option>2002</option>
</select>
<input type="submit" value="注册">
</form>
</div>
<div style="height: 400px;width: 400px;background-color: #b6ff7e;display: none" id="mydiv"></div>
<div id="showPoint"><a href="javascript:showDiv()">滚出来</a></div>
</body>
</html>
结果
四.js 正则表达式的更多相关文章
- JS正则表达式大全
转自:http://wenku.baidu.com/link?url=3y930kC7F6D3wQdMjQ3fVDmiA9Wfebs_QK0UB3N3mFaEoKg4ytZORPopxufeYA6si ...
- JS正则表达式大全(整理详细且实用)
JS正则表达式大全(整理详细且实用).需要的朋友可以过来参考下,希望对大家有所帮助!! 正则表达式中的特殊字符 字符 含意 \ 做为转意,即通常在"\"后面的字符不按原来意义解释, ...
- 初探JS正则表达式
1.概述 正则表达式是一个描述字符模式的对象.Javascript的正则表达式语法的是Perl5的正则表达式的子集.JS正则表达式有两种使用方式,文本模式和RegExp对象模式,实例如下: v ...
- js正则表达式匹配字符串与优化过程
前言 有时候需要实现对js源文件中的url字符串做拦截预处理,或者前端js语法高亮,或者需要对动态加载的关键源码做混淆保护,在某些步骤实现之前,有一个步骤是需要提炼出所有的合法字符串. 目标:检测源文 ...
- JS 正则表达式否定匹配（正向前瞻）
引言:JS 正则表达式是 JS 学习过程中的一大难点,繁杂的匹配模式足以让人头大,不过其复杂性和其学习难度也赋予了它强大的功能.文章从 JS 正则表达式的正向前瞻说起,实现否定匹配的案例.本文适合有一 ...
- [转]js 正则表达式
一.正则表达式中包括的元素 1.原子(普通字符:a-z A-Z 0-9 .原子表. 转义字符) 2.元字符 (有特殊功能的字符) 3.模式修正符 (系统内置部分字符 i .m.S.U…) 二.正则表达 ...
- 常用js正则表达式大全
常用js正则表达式大全.一.校验数字的js正则表达式 1 数字:^[0-9]*$ 2 n位的数字:^\d{n}$ 3 至少n位的数字:^\d{n,}$ 4 m-n位的数字:^\d{m,n}$ 5 零和 ...
- JS正则表达式入门，看这篇就够了
前言 在正文开始前,先说说正则表达式是什么,为什么要用正则表达式?正则表达式在我个人看来就是一个浏览器可以识别的规则,有了这个规则,浏览器就可以帮我们判断某些字符是否符合我们的要求.但是,我们为什么要 ...
- js 常用js正则表达式大全
一.校验数字的js正则表达式 1 数字:^[0-9]*$ 2 n位的数字:^d{n}$ 3 至少n位的数字:^d{n,}$ 4 m-n位的数字:^d{m,n}$ 5 ...
随机推荐
- 为啥JQuery被淘汰了？
摘要: 技术进步永不止步. 原文:jQuery的没落和技术发展的一般规律 作者:凌霄光 Fundebug经授权转载,版权归原作者所有. jQuery的成就 jQuery是一个伟大的库, 它解决了dom ...
- css3制作商品展示
今天看到一个用css3制作的简单的展示页面所以,我自己又是初学者所以决定模仿着写一个,下面右边是一开始的,右边是鼠标放上去暂时的.这个是由下到上逐渐显示的首先直接上代码. <!DOCTYPE h ...
- 前端入门6-JavaScript客户端api&jQuery
本篇文章已授权微信公众号 dasu_Android(大苏)独家发布 声明 本系列文章内容全部梳理自以下四个来源: <HTML5权威指南> <JavaScript权威指南> MD ...
- 2018-10-17 Chrome插件实现GitHub代码翻译v0.0.3
续前文浏览器插件实现GitHub代码翻译原型演示, 通过调用浏览器插件-离线英汉词典的批量查词接口, 实现了源码的初步命名直译. 源码库仍在: program-in-chinese/webextens ...
- iOS ----------如何修改mac的host文件
第一步:前往文件夹 或者 按快捷键组合 Shift+Command+G 三个组合按键. 第二步:前往/private/etc/ 找到Hosts 文件 复制到桌面 修改 然后 保 ...
- Html富文本编辑器
本文推荐两款简单的富文本编辑器[KindEditor,NicEdit]用于获得所见即所得的编辑效果,本文仅供学习分享使用,如有不足之处,还请指正. 概述 这两款编辑器都是采用JavaScript编写, ...
- Python函数式编程（二）：常见高级函数
一个函数的参数中有函数作为参数,这个函数就为高级函数. 下面学习几个常见高级函数. ---------------------------------------------------------- ...
- 使用vuejs2.0和element-ui 搭建的一个后台管理界面
说明: 这是一个用vuejs2.0和element-ui搭建的后台管理界面. 相关技术: vuejs2.0:一套构建用户界面的渐进式JavaScript框架,易用.灵活.高效. element-ui: ...
- 如何设置访问内网web项目
1.若我的项目搭建在一个linux虚拟机上 2.在内网的一台电脑做以下配置 3.测试访问 ******************************************************* ...
- VMware虚拟机安装CentOS系统图文教程
上一篇:VMware虚拟机安装教程详解图文 上一篇文章给大家介绍了虚拟机的安装,本文为大家详细介绍一下如何在虚拟机安装CentOS系统: 一:VMware虚拟机创建: 1:打开 ...