四.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 ...
随机推荐
- C#中try catch finally的执行顺序
1.首先明确一点,就是不管怎样,finally一定会执行,即使程序有异常,并且在catch中thorw 了 ,finally还是会被执行. 2.当try和catch中有return时,finally仍 ...
- LeetCode | HouseCode 算法题
题目: You are a professional robber planning to rob houses along a street. Each house has a certain am ...
- Sublime Text 2 JS 格式化插件 JsFormat
这里下载这插件包 https://github.com/jdc0589/JsFormat ,点油下角的zip就能下载插件包放到sublime安装目录的DataPackages目录中重新打开sublim ...
- 洛谷P1516 青蛙的约会
题目描述 两只青蛙在网上相识了,它们聊得很开心,于是觉得很有必要见一面.它们很高兴地发现它们住在同一条纬度线上,于是它们约定各自朝西跳,直到碰面为止.可是它们出发之前忘记了一件很重要的事情,既没有问清 ...
- CSS3 Transform、Transition和Animation属性总结
CSS3的三个与变形和动画啊相关的属性: Transform 浏览器支持情况: Internet Explorer 10.Firefox.Opera 支持 transform 属性. Internet ...
- leaflet计算多边形面积
上一篇介绍了使用leaflet绘制圆形,那如何计算圆形的面积呢? 1.使用数学公式计算,绘制好圆形后,获取中心点以及半径即可 2.使用第三方工具计算,如turf.js. 这里turf的area方法入参 ...
- [Intellij] 在IntelliJ IDEA 中创建运行web项目
安装工具 1.JDK7+ 2.IntelliJ Idea 工具(下载安装后,网上找注册码破解即可) 3.tomcat7+ 解压缩版 明确两个概念: 1.Project:类似于eclipse的works ...
- Nginx 负载均衡4种模式
转载请标明出处:http://blog.csdn.net/zhaoyanjun6/article/details/80541464 本文出自[赵彦军的博客] 4 种负载均衡算法 upstream 支持 ...
- html之head标签
本文内容: head标签 介绍 常用子标签 meta title link style script 首发时间:2018-02-12 修改: 2018-04-24:修改了标题名称,重新排版了内容,使得 ...
- python与html5 websocket开发聊天对话窗
1.下载必须的包 https://github.com/Pithikos/python-websocket-server,解压缩并把文件夹名‘python-websocket-server-maste ...