四.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 ...
随机推荐
- WORLD 文件选择的操作方法
1,按住鼠标左键拖动选择文本. 2,双击鼠标可选中光标前面一个字,如果光标左右两边是一个词,那么就会选中整个词. 3,三击-----整段. 4,光标(鼠标)移至文本左边(外面),变成向右倾斜的光标箭头 ...
- LNMP 一键安装 yum install php-mcrypt libmcrypt libmcrypt-devel
centos源不能安装libmcrypt-devel,由于版权的原因没有自带mcrypt的包 有两种方法解决,一种是使用第三方源,这样还可以使用yum来安装,简单方便,坏处是第三方源多少有中不可靠的感 ...
- 微信小程序使用wxParse，解决图片显示路径问题
我们经常用到发布文章,用的是UEditor百度富文本编辑器,方便排版,存储的也是html代码,这样小程序解析出来的也是排版的样式,但是使用wxParse解析html的时候,因为存储的是图片的相对路径, ...
- Netty实现一个简单聊天系统（点对点及服务端推送）
Netty是一个基于NIO,异步的,事件驱动的网络通信框架.由于使用Java提供 的NIO包中的API开发网络服务器代码量大,复杂,难保证稳定性.netty这类的网络框架应运而生.通过使用netty框 ...
- springboot Redis 缓存
1,先整合 redis 和 mybatis 步骤一: springboot 整合 redis 步骤二: springboot 整合 mybatis 2,启动类添加 @EnableCaching 注解, ...
- mybatis的三种批量插入以及次效率比较
1.表结构 CREATE TABLE `t_user` ( `id` varchar(32) CHARACTER SET utf8 NOT NULL COMMENT '主键', `name` varc ...
- Vue之resource请求数据
导入resource文件 <script src="https://cdn.staticfile.org/vue-resource/1.5.1/vue-resource.min.js& ...
- 深入理解Java虚拟机02--Java内存区域与内存溢出异常
一.概述 我们在进行 Java 开发的时候,很少关心 Java 的内存分配等等,因为这些活都让 JVM 给我们做了.不仅自动给我们分配内存,还有自动的回收无需再占用的内存空间,以腾出内存供其他人使用. ...
- 微软语音引擎 TTS 最基本使用
TTS(TextToSpeak) 需求:需要借助程序实现 文字合成语音/语音识别. TTS 介绍就不说了,这里介绍非常详细 >>> TTS详细介绍 + SAPI(微软的TTS语音 ...
- (后端)swagger
Swagger 文档提供了一个方法,使我们可以用指定的 JSON 或者 YAML 摘要来描述你的 API,包括了比如 names.order 等 API 信息. 你可以通过一个文本编辑器来编辑 Swa ...