<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style media="screen">
body {
background: #ccc;
}
label {
width: 40px;
display: inline-block;
}
.container {
margin: 100px auto;
width: 400px;
padding: 50px;
line-height: 40px;
border: 1px solid #777;
background: #efefef;
}
span {
margin-left: 25px;
font-size: 12px;
padding: 2px 20px 0;
color: #ccc;
}
.right {
color: green;
background: url(images/right.png) no-repeat;
}
.wrong {
color: red;
background: url(images/wrong.png) no-repeat;
}
.pwd {
width: 220px;
height: 20px;
background: url(images/strong.jpg) no-repeat;
}
.str1 {
background-position: 0 -20px;
}
.str2 {
background-position: 0 -40px;
}
.str3 {
background-position: 0 -60px;
}
.str4 {
background-position: 0 -80px;
}
</style>
</head>
<body>
<div class="container">
<label for="inp1">QQ</label><input type="text" name="" id="inp1"><span>输入正确的QQ号码</span><br>
<label for="inp2">手机</label><input type="text" name="" id="inp2"><span>输入13位手机号</span><br>
<label for="inp3">邮箱</label><input type="text" name="" id="inp3"><span>输入正确邮箱</span><br>
<label for="inp4">座机</label><input type="text" name="" id="inp4"><span>输入您的座机</span><br>
<label for="inp5">账号</label><input type="text" name="" id="inp5"><span>亲输入您的账号</span><br>
<label for="inp6">密码</label><input type="text" name="" id="inp6"><span>请输入您的密码</span><br>
<div id="password" class="pwd"></div>
</div> <script type="text/javascript">
var password = document.getElementById("password"); //qq号
addEvent("inp1",function(){
if (/^[1-9][0-9]{4,}$/.test(this.value)) {
setClassInner(this,"right","恭喜您,输入正确!");
}else {
setClassInner(this,"wrong","格式错误!");
}
}); //手机号
addEvent("inp2",function(){
if (/^((13[0-9])|(15[^4,\D])|(18[0-9]))\d{8}$/.test(this.value)) {
setClassInner(this,"right","恭喜您,输入正确!");
}else {
setClassInner(this,"wrong","格式错误!");
}
}); //邮箱
addEvent("inp3",function(){
if (/^[\w\-\.]{5,}\@[\w]+\.[\w]{2,4}$/.test(this.value)) {
setClassInner(this,"right","恭喜您,输入正确!");
}else {
setClassInner(this,"wrong","格式错误!");
}
}); //座机
addEvent("inp4",function(){
if (/(^0\d{2}-8\d{7}$)|(^0\d{3}-3\d{6}$)/.test(this.value)) {
setClassInner(this,"right","恭喜您,输入正确!");
}else {
setClassInner(this,"wrong","格式错误!");
}
}); //账号
addEvent("inp5",function(){
if (/^[a-zA-Z0-9_-]{3,16}$/.test(this.value)) {
setClassInner(this,"right","恭喜您,输入正确!");
}else {
setClassInner(this,"wrong","格式错误!");
}
}); //密码
addEvent("inp6",function(){
if (/^[a-zA-Z0-9_\-$]{6,18}$/.test(this.value)) {
setClassInner(this,"right","恭喜您,输入正确!");
password.className = "pwd str1";
//只有密码通过了,才能执行密码强度测试
//从大往小判断
if (/^[A-Za-z0-9]+[_$][A-Za-z0-9]*$/.test(this.value)) {
password.className = "pwd str4";
}else if (/^([a-z].*[0-9])|([A-Z].*[0-9])|[0-9].*[a-zA-Z]$/.test(this.value)) {
password.className = "pwd str3";
}else if (/^([a-z].*[A-Z])|([A-Z].*[a-z])$/.test(this.value)) {
password.className = "pwd str2";
}
}else {
setClassInner(this,"wrong","格式错误!");
}
}); //封装重复代码
function addEvent(str,fn){
document.getElementById(str).onblur = fn;
}
function setClassInner(aaa,rw,txt){
var span = aaa.nextElementSibling || aaa.nextSibling;
span.className = rw;
span.innerHTML = txt;
}
</script>
</body>
</html>

javascript 常用的正则表达式验证表单的更多相关文章

  1. JavaScript/Jquery:Validform 验证表单的相关属性解释

    当我们写提交表单的时候往往需要验证表单是否填写了内容,是否正确,这个插件可以很方便的完成我们需要的验证! 使用方法: 1.先引用js <script type="text/javasc ...

  2. JS正则表达式验证表单

    一.解释一些符号相关的意义     1.  /^$/ 这个是个通用的格式.         ^ 匹配输入字符串的开始位置:$匹配输入字符串的结束位置     2. 里面输入需要实现的功能.       ...

  3. JavaScript---通过正则表达式验证表单输入

    验证输入的name只能是数字或字母或下划线 js <script type="text/javascript"> function submitOn(){ var f ...

  4. 饿了么组件库element-ui正则表达式验证表单,后端验证表单。

    前言 老是遇到一些朋友问一些element-ui组件使用相关的基础问题,因为官方文档上并没有提供所有琐碎的功能代码demo.从这里开始我会根据我实际遇到的问题记录一些常见的官方文档没有详述的功能代码, ...

  5. JavaScript实现带正则表达式的表单校验(校验成功后跳转)

    运行结果: 源代码: 1 <!DOCTYPE html> 2 <html lang="zh"> 3 <head> 4 <meta char ...

  6. tp框架之自动验证表单

    tp框架的create自动加载表单的方法可以自动根据自己定义的要求来验证表单里面的内容,但是由于是在后台执行代码,会拖慢程序运行速度,所以还是建议通过前端js来进行判断,后台只进行数据库的查询以及传值 ...

  7. 表单:!!!常用JS: form 表单代码

    手机(文本框): <input type="text" name="" maxlength="11" placeholder=&quo ...

  8. JavaScript 学习(2)表单元素

    ##JavaScript 学习-2 1. 表单和表单元素 1.1 form对象 form对象的引用:document.forms[0]或者引用name属性,如:document.forms[" ...

  9. input 的 pattern 验证表单

    pattern 用于定义验证输入正则表达式 pattern 属性适用于以下 <input> 类型:text, search, url, telephone, email 以及 passwo ...

随机推荐

  1. react 动态获取数据

    如果reander()里面的dom元素是动态获取的,就要将函数放到setSTATE()里面执行

  2. redux的源码解析

    一. redux出现的动机 1. Javascript 需要管理比任何时候都要多的state2. state 在什么时候,由于什么原因,如何变化已然不受控制.3. 来自前端开发领域的新需求4. 我们总 ...

  3. centos7改中文

    centos7的与centos6有少许不同: 1.安装中文包: root@iZj6cbstl2n6r280a27eppZ tmp]# yum groupinstall "fonts" ...

  4. FEAT: Front-End Auto Testing

    FEAT FEAT: Front-End Auto Testing 前端自动化测试 jest $ yarn add -D jest # OR $ npm i -D jest https://jestj ...

  5. python之json数据存储

    # 数据存储:json.dump()和json.load() # date:2017-07-17 import json file_name = 'D:/json_file.txt' nums = [ ...

  6. [代码]--c#-实现局域网聊天

    服务器端: using System; using System.Collections.Generic; using System.Linq; using System.Net; using Sys ...

  7. BZOJ2595 WC2008游览计划(斯坦纳树)

    斯坦纳树板子题. 考虑状压dp,设f[i][j][S]表示当前在点(i,j)考虑转移,其所在的联通块包含的关键点集(至少)为S的答案. 转移时首先枚举子集,有f[i][j][S]=min{f[i][j ...

  8. python成长之路六-函数的初识

    定义函数 我们现学已知的python函数有<内置函数> 而我们现在要学的是<自定义函数> 1,def  定义一个函数 def name(): # 后接函数名 冒号 pass 2 ...

  9. get改post

    //原模式,get 入参只能小于260字符 location.href = hrefStr; localhost/getinfo/UUSDDJSKDJSJKJK 后台 getinfo(string i ...

  10. 自学Aruba4.3-Aruba AC基础配置(2)

    点击返回:自学Aruba之路 自学Aruba4.3-Aruba AC基础配置(2) 网络配置: Vlan .IP address port IP route IP dhcp 1. 网络配置VLAN . ...