javascript 常用的正则表达式验证表单
<!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 常用的正则表达式验证表单的更多相关文章
- JavaScript/Jquery：Validform 验证表单的相关属性解释
当我们写提交表单的时候往往需要验证表单是否填写了内容,是否正确,这个插件可以很方便的完成我们需要的验证! 使用方法: 1.先引用js <script type="text/javasc ...
- JS正则表达式验证表单
一.解释一些符号相关的意义 1. /^$/ 这个是个通用的格式. ^ 匹配输入字符串的开始位置:$匹配输入字符串的结束位置 2. 里面输入需要实现的功能. ...
- JavaScript---通过正则表达式验证表单输入
验证输入的name只能是数字或字母或下划线 js <script type="text/javascript"> function submitOn(){ var f ...
- 饿了么组件库element-ui正则表达式验证表单，后端验证表单。
前言 老是遇到一些朋友问一些element-ui组件使用相关的基础问题,因为官方文档上并没有提供所有琐碎的功能代码demo.从这里开始我会根据我实际遇到的问题记录一些常见的官方文档没有详述的功能代码, ...
- JavaScript实现带正则表达式的表单校验（校验成功后跳转）
运行结果: 源代码: 1 <!DOCTYPE html> 2 <html lang="zh"> 3 <head> 4 <meta char ...
- tp框架之自动验证表单
tp框架的create自动加载表单的方法可以自动根据自己定义的要求来验证表单里面的内容,但是由于是在后台执行代码,会拖慢程序运行速度,所以还是建议通过前端js来进行判断,后台只进行数据库的查询以及传值 ...
- 表单：!!!常用JS： form 表单代码
手机(文本框): <input type="text" name="" maxlength="11" placeholder=&quo ...
- JavaScript 学习（2）表单元素
##JavaScript 学习-2 1. 表单和表单元素 1.1 form对象 form对象的引用:document.forms[0]或者引用name属性,如:document.forms[" ...
- input 的 pattern 验证表单
pattern 用于定义验证输入正则表达式 pattern 属性适用于以下 <input> 类型:text, search, url, telephone, email 以及 passwo ...
随机推荐
- [2017BUAA软件工程]第0次博客作业
[2017BUAA软件工程]第0次博客作业 结缘计算机 你为什么选择计算机专业?你认为你的条件如何?和这些博主比呢? 计算机是你喜欢的领域吗?是你擅长的领域吗? 我当时报考高考志愿的时候就已经是想好报 ...
- mac安装sublime text 3，含注册码
软件下载地址: https://www.sublimetext.com/3 注册码如下: —– BEGIN LICENSE —– TwitterInc 200 User License EA7E-89 ...
- Docker attach
Description Attach local standard input, output, and error streams to a running container Usage dock ...
- React props传变量
<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8" ...
- linux服务器上安装python 3.6.3
一.下载源码包 地址https://www.python.org/ftp/python/3.6.3/Python-3.6.3.tar.xz 二.解压源码包 1.下载解压工具xz #yum -y ins ...
- jquery 祖先、子孫、同級
jquery向上遍歷,獲取祖先元素 parent()獲取選中元素的父 parents()獲取選中元素的所有的祖先節點,一直到文檔的根元素<html> parentUntil(“元素1”)獲 ...
- 【Linux】Centos6.8下一键安装Lnmp/Lamp环境
[下载一键安装软件包] 百度云地址:https://pan.baidu.com/s/1TZqGKtE-46gxW96Ptfp4gA 网址:https://lnmp.org/ [步骤] 通过第三方远程工 ...
- MT【42】抛物线不常见性质1.
评:特别的,当$PP'$为切线时,$\angle PSK=90^0$ 注:S为抛物线焦点.
- Watchdogs利用Redis实施大规模挖矿，常见数据库蠕虫如何破？
背景 2月20日17时许,阿里云安全监测到一起大规模挖矿事件,判断为Watchdogs蠕虫导致,并在第一时间进行了应急处置. 该蠕虫短时间内即造成大量Linux主机沦陷,一方面是利用Redis未授权访 ...
- 洛谷 P4137 Rmq Problem /mex 解题报告
P4137 Rmq Problem /mex 题意 给一个长为\(n(\le 10^5)\)的数列\(\{a\}\),有\(m(\le 10^5)\)个询问,每次询问区间的\(mex\) 可以莫队然后 ...