常用正则表达式
正则表达式用于字符串处理、表单验证等场合，实用高效。现将一些常用的表达式收集于此，以备不时之需。
匹配中文字符的正则表达式： [\u4e00-\u9fa5]
评注：匹配中文还真是个头疼的事，有了这个表达式就好办了匹配双字节字符(包括汉字在内)：[^\x00-\xff]
评注：可以用来计算字符串的长度（一个双字节字符长度计2，ASCII字符计1）匹配空白行的正则表达式：\n\s*\r
评注：可以用来删除空白行匹配HTML标记的正则表达式：<(\S*?)[^>]*>.*?</\1>|<.*? />
评注：网上流传的版本太糟糕，上面这个也仅仅能匹配部分，对于复杂的嵌套标记依旧无能为力匹配首尾空白字符的正则表达式：^\s*|\s*$
评注：可以用来删除行首行尾的空白字符(包括空格、制表符、换页符等等)，非常有用的表达式匹配Email地址的正则表达式：\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*
评注：表单验证时很实用匹配网址URL的正则表达式：[a-zA-z]+://[^\s]*
评注：网上流传的版本功能很有限，上面这个基本可以满足需求匹配帐号是否合法(字母开头，允许5-16字节，允许字母数字下划线)：^[a-zA-Z][a-zA-Z0-9_]{4,15}$
评注：表单验证时很实用匹配国内电话号码：\d{3}-\d{8}|\d{4}-\d{7}
评注：匹配形式如 0511-4405222 或 021-87888822匹配腾讯QQ号：[1-9][0-9]{4,}
评注：腾讯QQ号从10000开始匹配中国邮政编码：[1-9]\d{5}(?!\d)
评注：中国邮政编码为6位数字匹配身份证：\d{15}|\d{18}
评注：中国的身份证为15位或18位匹配ip地址：\d+\.\d+\.\d+\.\d+
评注：提取ip地址时有用匹配特定数字：
^[1-9]\d*$ //匹配正整数
^-[1-9]\d*$ //匹配负整数
^-?[1-9]\d*$ //匹配整数
^[1-9]\d*|0$ //匹配非负整数（正整数 + 0）
^-[1-9]\d*|0$ //匹配非正整数（负整数 + 0）
^[1-9]\d*\.\d*|0\.\d*[1-9]\d*$ //匹配正浮点数
^-([1-9]\d*\.\d*|0\.\d*[1-9]\d*)$ //匹配负浮点数
^-?([1-9]\d*\.\d*|0\.\d*[1-9]\d*|0?\.0+|0)$ //匹配浮点数
^[1-9]\d*\.\d*|0\.\d*[1-9]\d*|0?\.0+|0$ //匹配非负浮点数（正浮点数 + 0）
^(-([1-9]\d*\.\d*|0\.\d*[1-9]\d*))|0?\.0+|0$ //匹配非正浮点数（负浮点数 + 0）
评注：处理大量数据时有用，具体应用时注意修正匹配特定字符串：
^[A-Za-z]+$ //匹配由26个英文字母组成的字符串
^[A-Z]+$ //匹配由26个英文字母的大写组成的字符串
^[a-z]+$ //匹配由26个英文字母的小写组成的字符串
^[A-Za-z0-9]+$ //匹配由数字和26个英文字母组成的字符串
^\w+$ //匹配由数字、26个英文字母或者下划线组成的字符串
评注：最基本也是最常用的一些表达式
String 中的一些方法
<!-- 表单验证 --> <!-- 2种实现方式 --> <!-- 1.利用内置对象string种提供的方法进行实现 --> <!-- 1.截取：substr substring 2.长度 length 3.空格 trim 4.替换 replace 5.分割 split 6.大小写转换 toUppercase|toLowerCase 7.ascii 表单种专属事件 表单阻止提交事件 该事件属性必须位于form标签上 onsubmit --> <script type="text/javascript"> var str = "kjahdskja"; console.log(str.length); console.log(str.toLowerCase()); console.log(str.toUpperCase()); var names = "1,2,3,4,5,6,7"; var arrname = names.split(','); console.log(typeof(arrname)); </script>
模拟win7屏保 蛋蛋球
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
*{margin: 0px;padding: 0px;}
#oDiv{
width: 200px;
height: 200px;
background-color: yellow;
opacity: 0.2;
border-radius: 100%;
position: absolute;
left: 0px;
margin-top: 20px;
}
</style>
</head>
<body>
<!-- html -->
<div id="oDiv"></div>
<!-- 引入js兼容型插件库 -->
<script src="js/myjs.js" type="text/javascript" charset="utf-8"></script>
<!-- js -->
<script type="text/javascript">
// 获取和模型div
var oDiv = document.querySelector('#oDiv');
// 获取和模型div的left属性值
var oDivLeft = parseInt(getStyle(oDiv,'left'));
var oDivTop = parseInt(getStyle(oDiv,'top'));
// console.log(oDivLeft);
//获取当前屏幕中的可视区宽度
var documentClientWidth = client().width-200;
//获取当前屏幕中的可视区高度
var documentClientHeight = client().height-200;
console.log("可视区宽度: "+documentClientWidth);
var flag1 = true;
var flag2 = true;
// 开启一个定时器(每隔500毫秒让left+10)
window.setInterval(function(){
//判断flag1标记只要为true +10 一直可以进行
if(flag1 === true){
// 每个500毫秒 +10
oDivLeft+=10;
}
// 只要left值大于了可视区宽度 标记取反
if(oDivLeft >= documentClientWidth){
flag1 = false;
}
// 当oDiv达到最右侧 标记取反
if(flag1 === false){
oDivLeft-=10;
}
//只要left只小于等于0 标记取反
if(oDivLeft<=0){
flag1 = true;
}
// ====================================
if(flag2 === true){
// 每个500毫秒 +10
oDivTop+=10;
}
// 只要left值大于了可视区宽度 标记取反
if(oDivTop >= documentClientHeight){
flag2 = false;
}
// 当oDiv达到最右侧 标记取反
if(flag2 === false){
oDivTop-=10;
}
//只要left只小于等于0 标记取反
if(oDivTop<=0){
flag2 = true;
}
console.log(oDivLeft);
// 将结果重新赋值给当前oDiv的left属性即可
oDiv.style.left = oDivLeft+'px';
oDiv.style.top = oDivTop+'px';
},100);
</script>
</body>
</html>
基本常用的表单验证
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
body {
margin-top: 0px;
margin-left: auto;
margin-bottom: 0px;
margin-right: auto;
font-size: 13px;
line-height: 25px;
}
.div1 {
float: none;
width: 500px;
clear: both;
margin-top: 0px;
margin-left: auto;
margin-bottom: 0px;
margin-right: auto;
}
.left {
float: right;
/* width: 100px; */
}
#den {
margin-left: 10px;
}
.divle {
font-size: 10px;
color: red;
}
.divle {
/* margin-left: 20px; */
/* display: inline-block; */
}
</style>
<script type="text/javascript">
function $(id) {
return document.getElementById(id);
}
function check() {
var user = $("user").value;
var use = $("oDiv1");
use.innerHTML = "";
if (!user) {
use.innerHTML = "用户名不能为空";
return false;
}
var us = /[\w\u4e00-\u9fa5]{4,12}/;
if (!us.test(user)) {
use.innerHTML = "用户名必须由字母,文字或数字和下划线4—12字符组成";
return false;
}
var pw = $("paw").value;
var od = $("oDiv2");
if (!pw) {
od.innerHTML = "密码不能为空";
return false;
}
var u = /[\w]{6,12}/;
if (!u.test(od)) {
od.innerHTML = "密码长度为在6—12字符";
return false;
}
var p = $("pw").value;
var o = $("oDiv3");
if (pw != p) {
o.innerHTML = "两次输入的密码不一致";
return false;
}
var sexId = $("oDiv4");
sexId.innerHTML = "";
var j = 0;
var sex = document.getElementsByName("sex");
for (var i = 0; i < sex.length; i++) {
if (sex[i].checked == true) {
j = 1;
break;
}
}
if (j == 0) {
sexId.innerHTML = "请选择性别";
return false;
}
return true;
}
</script>
</head>
<body>
<div class="div1">
<form action="index2.1.html" name="myform" method="get" onsubmit="return check()">
<table border="0" cellspacing="" cellpadding="">
<tr>
<td colspan="2"><img src="img/header1.jpg"></td>
</tr>
<tr>
<td class="left">用户名：</td>
<td><input type="text" name="" id="user" value="" />
<div class="divle" id="oDiv1"></div>
</td>
</tr>
<tr>
<td class="left">密码：</td>
<td><input type="password" name="" id="paw" value="" />
<div class="divle" id="oDiv2"></div>
</td>
</tr>
<tr>
<td class="left">确认密码：</td>
<td><input type="password" name="" id="pw" value="" />
<div class="divle" id="oDiv3"></div>
</td>
</tr>
<tr>
<td class="left">性别：</td>
<td>
<div id="" style="float: left;">
<input type="radio" name="sex" id="" value="男" />男<input name="sex" type="radio"
value="女" />女
<div class="divle" id="oDiv4"></div>
</div>
</td>
</tr>
<tr>
<td class="left">出生日期： </td>
<td>
<select id="year">
<script type="text/javascript">
for (var i = 1900; i <= 2018; i++) {
document.write("<option value=" + i + ">" + i + "</option>");
}
</script>
</select>年
<select id="month">
<script type="text/javascript">
for (var i = 1; i <= 12; i++) {
document.write("<option value=" + i + ">" + i + "</option>");
}
</script>
</select>月
<select id="day">
<script type="text/javascript">
for (var i = 1; i <= 31; i++) {
document.write("<option value=" + i + ">" + i + "</option>");
}
</script>
</select>日
<div class="divle" id="oDiv5"> </div>
</td>
</tr>
<tr>
<td> </td>
<td><input type="submit" name="" id="" value="注册" /><input type="reset" name="" id="den"
value="清除" /></td>
</tr>
</table>
</form>
</div>
</body>
</html>
基本表单验证！！
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<script type="text/javascript">
/*
javascript正则表达式规则符号
. 除了\n以外的任意字符
+ 至少重复1次
? 0次或者1次
* 任意次
- 连字符
[abc] abc种任取1个
[abc]{6} 必须6次
[abc]{6,} 至少6次
[abc]{6,10} 6-10次
\d [0-9]
\w [a-zA-Z0-9_]
\s 空格
^
*/
var str = "12345a";
var regex = /^\d{6}$/;
// test方法
console.log(regex.test(str));
</script>
<form action="demo2.html" method="get" onsubmit="mySubmit();">
账户 <input onblur="mya();" type="text" id="username"> <span id="uname_error"></span>
<br>
邮箱 <input onblur="myb()" type="text" id="email"><span id="emial_error"></span>
<br>
年龄 <input onblur="myc();" id = "age" type="text"><span id="age_error"></span>
<br>
手机号码 <input type="text"><span></span>
<br>
身份证 <input type="text"> <span></span>
<br>
座机号码 <input type="text"><span></span>
<br><br>
<input type="submit" value="注册"/>
</form>
<script type="text/javascript">
// 账号 6-12
function mya(){
var username= document.getElementById('username').value;
var regex = /\w{6,12}/;
if(!regex.test(username)){
document.getElementById('uname_error').innerHTML = '账号必须在6-12位之间'
return false;
}
return true;
}
// 邮箱
// 15084961293@163.com
// 1561868458@qq.com
// zkingzz@sina.cn
function myb(){
var email= document.getElementById('email').value;
var regex = /[a-zA-Z0-9]{4,16}@[a-zA-Z0-9]{2,4}\.(com|cn|gov)/;
if(!regex.test(email)){
document.getElementById('emial_error').innerHTML = '邮箱格式不正确'
return false;
}else{
document.getElementById('emial_error').innerHTML = ''
}
return true;
}
// 年龄1-150
function myc(){
var age= document.getElementById('age').value;
//1-9 10-99 100-149 150
var regex = /^([1-9]|[1-9]\d|1[0-4]\d|150)$/;
if(!regex.test(age)){
document.getElementById('age_error').innerHTML = '年龄不符合规则'
return false;
}else{
document.getElementById('age_error').innerHTML = ''
}
return true;
}
// 手机号码 1 [3-9]\d
// regex = /^(1[3-9]\d{9})$/;
// 座机号码 010-32423423-01
// regex = /(\d{3,4}\-)?(\d{7,8})(\-\d{2})?/;
regex = /\d{15}|\d{18}/;
// 430111 20201223 0058
</script>
</body>
</html>
653
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
