四.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 ...
随机推荐
- JavaScript初学者必看“this”
译者按: JavaScript的this和Java等面向对象语言中的this大不一样,bind().call()和apply()函数更是将this的灵活度进一步延伸. 原文: JavaScript: ...
- Module的加载实现
烂笔头开始记录小知识点啦- 浏览器要加载 ES6模块,: <script type="module" src="./foo.js"></scr ...
- CPU 实用工具
系统版本:CentOS 7.4 top 17:49:04 // 当前时间 up 3:55 // 系统运行时间,格式为时:分 2 users // 当前登录用户数 load average // 三个值 ...
- bootstrap源码之滚动监听组件scrollspy.js详解
其实滚动监听使用的情况还是很多的,比如导航居于右侧,当主题内容滚动某一块的时候,右侧导航对应的要高亮. 实现功能 1.当滚动区域内设置的hashkey距离顶点到有效位置时,就关联设置其导航上的指定项 ...
- 【20190226】JavaScript-知识点记录：dom0级事件，dom2级事件
DOM0级事件处理程序: 通过将元素的事件处理程序属性(如onclick)的值设置为一个函数来指定事件处理程序的方法称为DOM0级方法,它被认为是元素的方法,这时候的事件处理程序是在元素的作用域中运行 ...
- bitnami_redmine3.3.0-1 问题及备份恢复
1. 服务不见了处理方法: 安装Bitnami Redmine之后,会生成5个与之相关的进程,分别是 redmineApache redmineMySQL redmineSubversion redm ...
- maven 术语
1, 中央仓库 是一个网络仓库, 用于存储各种 jar 和 maven 插件, 官方网站显示的是列表, 不友好, 一般搜索依赖到一个三方地址: https://mvnrepository.com/ 2 ...
- 生产环境下JVM调优参数的设置实例
JVM基础:生产环境参数实例及分析 原始配置: -Xms128m -Xmx128m -XX:NewSize=64m -XX:PermSize=64m -XX:+UseConcMarkSweepGC - ...
- 性能测试 查看Android APP 帧数FPS的方法
(下述需要先安装eclipse,不然无法抓包) 1.保证手机与PC连接是正常的 2.打开手机“设置”→“开发者选项”(没有开发者选项就点击“关于手机”“版本号”连续点击就会出现开发者选项了).找到监控 ...
- python leetcode 字符串相乘
给定两个以字符串形式表示的非负整数 num1 和 num2,返回 num1 和 num2 的乘积,它们的乘积也表示为字符串形式. 示例 1: 输入: num1 = "2", num ...