知识点：

先生成一个正则规则的对象，使用test（）对传入的字符串进行验证，返回布尔类型

代码：

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>JS常用正则表达式</title>
</head>
<body>
<pre>
姓 名：<input id="name" onblur="regname()"> <span id="ts2"></span>
身份证号：<input id="sfz" onblur="regsfz()"> <span id="ts3"></span>
手 机 号：<input id="cellphone" onblur="regcellphone()"> <span id="ts4"></span>
邮箱地址：<input id="email" onblur="regemail()"> <span id="ts5"></span>
密 码：<input type="password" id="password" onblur="regpassword()"> <span id="ts6"></span>
提 示：<span id="ts" style="color:orange;">请正确填写表单</span>
</pre>
</body>
</html>
<script>
var ts = document.getElementById("ts");
var ts2 = document.getElementById("ts2");
var ts3 = document.getElementById("ts3");
var ts4 = document.getElementById("ts4");
var ts5 = document.getElementById("ts5");
var ts6 = document.getElementById("ts6");
//检测姓名
function regname(){

var name = document.getElementById("name").value;
var regname = /^[\u4E00-\u9FA5]+$/;
if(name == "" || name == null){

ts.innerHTML = "姓名栏未输入任何内容";
ts.style = "color:red";
ts2.innerHTML = "错误";
ts2.style = "color:red";
//这种写法实际上是对象赋值，因为JS读取变量ts时ts只是一个标签，JS会将其生成一个对象来描述
}else if(!regname.test(name)){
ts.innerHTML = "姓名框内必须输入汉字";
ts.style = "color:red";
ts2.innerHTML = "错误";
ts2.style = "color:red";
}else{
ts.innerHTML = "姓名输入正确";
ts.style = "color:green";
ts2.innerHTML = "正确";
ts2.style = "color:green";
}
}
function regsfz(){

var sfz = document.getElementById("sfz").value;
var regsfz = /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/; ;
if(sfz == "" || sfz == null){

ts.innerHTML = "身份证栏未输入任何内容";
ts.style = "color:red";
ts3.innerHTML = "错误";
ts3.style = "color:red";
//这种写法实际上是对象赋值，因为JS读取变量ts时ts只是一个标签，JS会将其生成一个对象来描述
}else if(!regsfz.test(sfz)){
ts.innerHTML = "必须输入正确是身份证";
ts.style = "color:red";
ts3.innerHTML = "错误";
ts3.style = "color:red";
}else{
ts.innerHTML = "身份证输入正确";
ts.style = "color:green";
ts3.innerHTML = "正确";
ts3.style = "color:green";
}
}

function regcellphone(){

var cellphone = document.getElementById("cellphone").value;
var regcellphone = /^(1[3-5][0-9]{9})|(15[89][0-9]{8})$/ ;
if(cellphone == "" || cellphone == null){

ts.innerHTML = "手机栏未输入任何内容";
ts.style = "color:red";
ts4.innerHTML = "错误";
ts4.style = "color:red";
//这种写法实际上是对象赋值，因为JS读取变量ts时ts只是一个标签，JS会将其生成一个对象来描述
}else if(!regcellphone.test(cellphone)){
ts.innerHTML = "必须输入正确的手机号";
ts.style = "color:red";
ts4.innerHTML = "错误";
ts4.style = "color:red";
}else{
ts.innerHTML = "手机号输入正确";
ts.style = "color:green";
ts4.innerHTML = "正确";
ts4.style = "color:green";
}
}
function regemail(){

var email = document.getElementById("email").value;
var regemail = /\w@\w*\.\w/;
if(email == "" || email == null){

ts.innerHTML = "邮件号栏未输入任何内容";
ts.style = "color:red";
ts5.innerHTML = "错误";
ts5.style = "color:red";
//这种写法实际上是对象赋值，因为JS读取变量ts时ts只是一个标签，JS会将其生成一个对象来描述
}else if(!regemail.test(email)){
ts.innerHTML = "必须输入正确的邮箱";
ts.style = "color:red";
ts5.innerHTML = "错误";
ts5.style = "color:red";
}else{
ts.innerHTML = "邮箱输入正确";
ts.style = "color:green";
ts5.innerHTML = "正确";
ts5.style = "color:green";
}
}
function regpassword(){

var password = document.getElementById("password").value;
var regpassword = /^[a-zA-Z\d_]{8,}$/ ;
if(password == "" || password == null){

ts.innerHTML = "密码栏未输入任何内容";
ts.style = "color:red";
ts6.innerHTML = "错误";
ts6.style = "color:red";
//这种写法实际上是对象赋值，因为JS读取变量ts时ts只是一个标签，JS会将其生成一个对象来描述
}else if(!regpassword.test(password)){
ts.innerHTML = "必须输入不得少于八位数字或字母组成密码";
ts.style = "color:red";
ts6.innerHTML = "错误";
ts6.style = "color:red";
}else{
ts.innerHTML = "密码输入符合要求";
ts.style = "color:green";
ts6.innerHTML = "正确";
ts6.style = "color:green";
}
}
//常用JS正则表达式：http://www.cnblogs.com/hai-ping/articles/2997538.html
</script>

效果图：

JS正则表达式 简单应用的更多相关文章

  1. JS正则表达式简单总结

    正则表达式定义 JavaScript中的正则表达式用RegExp 对象表示,可以使用RegExp ()构造函数来创建RegExp对象,不过RegExp 对象更多的是通过一种特殊的直接量愈发来创建. 例 ...

  2. JS正则表达式常用总结

    正则表达式的创建 JS正则表达式的创建有两种方式: new RegExp() 和 直接字面量. //使用RegExp对象创建 var regObj = new RegExp("(^\\s+) ...

  3. Python之路-(js正则表达式、前端页面的模板套用、Django基础）

    js正则表达式 前端页面的模板套用 Django基础 js正则表达式: 1.定义正则表达式 /.../  用于定义正则表达式 /.../g 表示全局匹配 /.../i 表示不区分大小写 /.../m ...

  4. JS正则表达式大全

    转自:http://wenku.baidu.com/link?url=3y930kC7F6D3wQdMjQ3fVDmiA9Wfebs_QK0UB3N3mFaEoKg4ytZORPopxufeYA6si ...

  5. js正则表达式replace里有变量的解决方法用到RegExp类

    一直比较害怕使用正则表达式,貌似很深奥很复杂的样子,所以在用js操作字符串的时候,我最多使用的是replace.split.substring.indexOf等函数,这些函数有时候需要多次叠加使用,但 ...

  6. js正则表达式入门

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/ ...

  7. C# 使用js正则表达式，让文本框只能输入数字和字母，最大长度5位

    使用js正则表达式,让文本框只能输入数字和字母,最大长度5位,只需要加个onkeyup事件,即可简单实现 <asp:TextBox ID="txtBegin" runat=& ...

  8. JS 正则表达式用法

    JS 正则表达式用法简介 简单的说,正则表达式是一种可以用于模式匹配和替换的强有力的工具.其作用如下: 测试字符串的某个模式.例如,可以对一个输入字符串进行测试,看在该字符串是否存在一个电话号码模式或 ...

  9. 【正则】精通JS正则表达式，没消化 信息量太大，好文

    http://www.jb51.net/article/25313.htm 正则表达式可以: •测试字符串的某个模式.例如,可以对一个输入字符串进行测试,看在该字符串是否存在一个电话号码模式或一个信用 ...

随机推荐

  1. 第16章 STM32中断应用概览—零死角玩转STM32-F429系列

    第16章     STM32中断应用概览 全套200集视频教程和1000页PDF教程请到秉火论坛下载:www.firebbs.cn 野火视频教程优酷观看网址:http://i.youku.com/fi ...

  2. 1、SpringBoot------表单校验

    开发工具:STS 代码下载链接:https://github.com/theIndoorTrain/Springboot/tree/1ef5e597a6f866e73387c0238dbcdf46cf ...

  3. C# grid控件用数据库分页后台怎么写？

    C#grid控件使用数据库分页的写法如下: mySystem.GetDataa(gridName.PageIndex *gridName.PageSize + 1, (gridName.PageInd ...

  4. Erwin 简单使用

    1. 物理设计:汉译英过程 ① Logical 中操作:Tools-Names-Edit Naming Standards…-Glossary选项import,导入内容为编辑好的CSV文件(只包含中文 ...

  5. iOS中 XMPP即时通讯实现的主要步骤

    这里只是列出实现的只要步骤,不是全部代码. 首先导入XMPPFramework,及相关配置,完成后开始. 创建一个XMPPHelper  类来管理要进行的操作. XMPPHelper.h文件如下 ty ...

  6. Scott Young-《如何高效学习》

    1.如果你只用一种方式了解某样事物,那么你就没有真正了解它.事情真正含义的秘密取决于我们如何将其与我们所了解的其他事情相联系.很好联系的内容可使你将想法融于脑中,从各种角度看问题,直至你找到合适自己的 ...

  7. php-5.6.26源代码 - PHP文件汇编成opcode、执行

    文件 php-5.6.26/Zend/zend.c ZEND_API int zend_execute_scripts(int type TSRMLS_DC, zval **retval, int f ...

  8. 图解HTTP总结（5）——与HTTP协作的Web服务器

    一台 Web 服务器可搭建多个独立域名的 Web 网站, 也可作为通信路径上的中转服务器提升传输效率. 用单台虚拟主机实现多个域名 HTTP/1.1 规范允许一台 HTTP 服务器搭建多个 Web 站 ...

  9. Mysql 索引 简介

    Mysql索引 索引的分类 索引的创建 索引的注意事项 什么是索引 索引是存储引擎用于快速查找记录的一种数据结构. 索引由数据库中一列或者多列组成,作用是提高表的查询速度. 索引的优点,提高检索数据的 ...

  10. 笔记-scrapy-辅助功能

    笔记-scrapy-辅助功能 1.      scrapy爬虫管理 爬虫主体写完了,要部署运行,还有一些工程性问题: 限频 爬取深度限制 按条件停止,例如爬取次数,错误次数: 资源使用限制,例如内存限 ...