四.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 开发效率的高级 VSCode 扩展！
原文:提高 JavaScript 开发效率的高级 VSCode 扩展! 作者:前端小智 Fundebug经授权转载,版权归原作者所有. Quokka.js Quokka.js 是一个用于 JavaSc ...
- ListView子项点击无反应的解决办法
在使用ListView控件的过程中,当子项包括Button或者CheckBoX等控件时,直接点击子项无反应,分析发现原来是Button,CheckBoX等控件会优先获取焦点,那么子项点击的焦点就被上述 ...
- ajax简单登录（踩过的坑）
登陆页面: <%@ page language="java" contentType="text/html; charset=UTF-8" pageEnc ...
- java----java集合框架图
- [20190305]删除审计登录信息不适合使用logrotate.txt
[20190305]删除审计登录信息不适合使用logrotate.txt --//生产系统数据库sys用户登录会在/u01/app/oracle/admin/${ORACLE_SID}/adump/目 ...
- 解决Protege打开owl文件时程序卡死问题
Protege在打开本地owl文件时,程序卡死,而且在终端或是命令行中也没有报错.这是因为存放该本体的文件夹下面有很多其他的文件,只需要创建一个新的文件夹并把owl文件放入其中就可以解决该问题.
- DELL OME监控服务器安装配置
介绍 OME软件配合DELL的SA可以对服务器硬件进行监控,并且如果服务器出问题会自动联系DELL报修,方便我们管理维护,具体安装要求就不多写了,我用的机器4核8G内存200G硬盘空间,创建在Hype ...
- shell 函数用法
近期在学习shell编程方面的知识,写的不怎么好,请大家多多指点,下面给大家分享一下shell函数的用法. 我们为什么要用shell函数? 简单的说,函数的作用就是把程序多次调用相同的代码部分定义成一 ...
- php学习----基本介绍及数据类型
php 官方手册:http://php.net/manual/zh/ 1.PHP(全称 Hypertext Preprocessor,超文本预处理器的字母缩写)是一种服务器端脚本语言,它可嵌入到 HT ...
- LeetCode算法题-Isomorphic Strings（Java实现）
这是悦乐书的第191次更新,第194篇原创 01 看题和准备 今天介绍的是LeetCode算法题中Easy级别的第50题(顺位题号是205).给定两个字符串s和t,确定它们是否是同构的.如果s中的字符 ...